{"_id":"@anyone-dev/vite-svg-loader","name":"@anyone-dev/vite-svg-loader","dist-tags":{"latest":"5.1.0"},"versions":{"5.1.0":{"name":"@anyone-dev/vite-svg-loader","version":"5.1.0","description":"Vite plugin to load SVG files as Vue components","keywords":["vite-plugin","vite","vue","svg"],"private":false,"main":"./index.js","types":"./index.d.ts","dependencies":{"debug":"^4.3.4","svgo":"^3.0.2"},"devDependencies":{"cypress":"^8.6.0","standard":"^16.0.3"},"peerDependencies":{"vue":">=3.2.13"},"scripts":{"lint":"standard --fix","cypress":"cypress run","test:preview":"cd ./test-app && npm run preview -- --host"},"repository":{"type":"git","url":"git+https://github.com/jpkleemans/vite-svg-loader.git"},"author":{"name":"Jan-Paul Kleemans","email":"jpkleemans@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/jpkleemans/vite-svg-loader/issues"},"homepage":"https://github.com/jpkleemans/vite-svg-loader#readme","_id":"@anyone-dev/vite-svg-loader@5.1.0","gitHead":"e0ef76454bb3ede2c5a5815943568decdb732b34","_nodeVersion":"22.5.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-/6bw0r7j0g++/o16aQQ77qkKLWcC30OpsdYHPpd1a4aDI4040Qoox7p8y2evKWrVzHNoCyt0CYUkijs4Uuyo4g==","shasum":"bb6d0e50a1c83ad4b46d714f2eeb9212d600363a","tarball":"https://registry.npmjs.org/@anyone-dev/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz","fileCount":10,"unpackedSize":29067,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCweZDSL0MH3JOhSAAQ2zJzN/jmbbEEDHNKNGNOn8FBgIhAPoZzbRnzKsNqSSt9d0ZhhjfXEyPjH5upl7v4HWoEtsu"}]},"_npmUser":{"name":"vlaoff","email":"vlaoff@gmail.com"},"directories":{},"maintainers":[{"name":"vlaoff","email":"vlaoff@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vite-svg-loader_5.1.0_1724734348137_0.3046539325651798"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-27T04:52:28.069Z","5.1.0":"2024-08-27T04:52:28.283Z","modified":"2024-08-27T04:52:28.535Z"},"maintainers":[{"name":"vlaoff","email":"vlaoff@gmail.com"}],"description":"Vite plugin to load SVG files as Vue components","homepage":"https://github.com/jpkleemans/vite-svg-loader#readme","keywords":["vite-plugin","vite","vue","svg"],"repository":{"type":"git","url":"git+https://github.com/jpkleemans/vite-svg-loader.git"},"author":{"name":"Jan-Paul Kleemans","email":"jpkleemans@gmail.com"},"bugs":{"url":"https://github.com/jpkleemans/vite-svg-loader/issues"},"license":"MIT","readme":"# Vite SVG loader\nVite plugin to load SVG files as Vue components, using SVGO for optimization.\n\n<a href=\"https://www.npmjs.com/package/vite-svg-loader\" target=\"_blank\"><img src=\"https://img.shields.io/npm/v/vite-svg-loader?style=flat-square\" alt=\"Version\"></a>\n<a href=\"https://www.npmjs.com/package/vite-svg-loader\" target=\"_blank\"><img src=\"https://img.shields.io/npm/dw/vite-svg-loader?style=flat-square\" alt=\"Downloads\"></a>\n<a href=\"https://github.com/jpkleemans/vite-svg-loader/actions\" target=\"_blank\"><img src=\"https://img.shields.io/github/actions/workflow/status/jpkleemans/vite-svg-loader/e2e.yml?branch=main&label=tests&style=flat-square\" alt=\"Tests\"></a>\n<a href=\"https://www.npmjs.com/package/vite-svg-loader\" target=\"_blank\"><img src=\"https://img.shields.io/npm/l/vite-svg-loader?style=flat-square\" alt=\"License\"></a>\n\n```vue\n<template>\n  <MyIcon />\n</template>\n\n<script setup>\nimport MyIcon from './my-icon.svg'\n</script>\n```\n\n### Install\n```bash\nnpm install vite-svg-loader --save-dev\n```\n\n### Setup\n\n#### `vite.config.js`\n```js\nimport svgLoader from 'vite-svg-loader'\n\nexport default defineConfig({\n  plugins: [vue(), svgLoader()]\n})\n```\n\n### Import params\n### URL\nSVGs can be imported as URLs using the `?url` suffix:\n```js\nimport iconUrl from './my-icon.svg?url'\n// 'data:image/svg+xml...'\n```\n\n### Raw\nSVGs can be imported as strings using the `?raw` suffix:\n```js\nimport iconRaw from './my-icon.svg?raw'\n// '<?xml version=\"1.0\"?>...'\n```\n\n### Component\nSVGs can be explicitly imported as Vue components using the `?component` suffix:\n```js\nimport IconComponent from './my-icon.svg?component'\n// <IconComponent />\n```\n\n### Default import config\nWhen no explicit params are provided SVGs will be imported as Vue components by default.\nThis can be changed using the `defaultImport` config setting,\nsuch that SVGs without params will be imported as URLs (or raw strings) instead.\n\n#### `vite.config.js`\n```js\nsvgLoader({\n  defaultImport: 'url' // or 'raw'\n})\n```\n\n### SVGO Configuration\n#### `vite.config.js`\n```js\nsvgLoader({\n  svgoConfig: {\n    multipass: true\n  }\n})\n```\n\n### Disable SVGO\n#### `vite.config.js`\n```js\nsvgLoader({\n  svgo: false\n})\n```\n\n### Skip SVGO for a single file\nSVGO can be explicitly disabled for one file by adding the `?skipsvgo` suffix:\n```js\nimport IconWithoutOptimizer from './my-icon.svg?skipsvgo'\n// <IconWithoutOptimizer />\n```\n\n### Use with TypeScript\nIf you use the loader in a Typescript project, you'll need to reference the type definitions inside `vite-env.d.ts`:\n```ts\n/// <reference types=\"vite/client\" />\n/// <reference types=\"vite-svg-loader\" />\n```\n\n## Sponsors\n\n<a href=\"https://www.nexxtmove.nl/\" target=\"_blank\">\n  <img src=\"https://raw.githubusercontent.com/jpkleemans/attribute-events/gh-pages/nexxtmove-logo.svg\" alt=\"Nexxtmove Logo\" width=\"200\">\n</a>\n\nThanks to <a href=\"https://www.nexxtmove.nl/\" target=\"_blank\">Nexxtmove</a> for sponsoring the development of this project.  \nYour logo or name here? [Sponsor this project](https://github.com/sponsors/jpkleemans).\n","readmeFilename":"README.md"}