\r\n\r\n# vite-plugin-svg4vue\r\n\r\nA `vite (3.x || 4.x)` plugin which can transform `SVG` icon to `vue (2.7.X || 3.x)` component.\r\n\r\n> this plugin dependencies on `vue/compiler-sfc`, so keep your `vue` version to **3.2.13+** or **2.7.14+**.\r\n\r\n- [Example Here](https://hongwenqing.com/vite-plugin-svg4vue/).\r\n- [Release Notes](./CHANGELOG.md).\r\n\r\n# Features\r\n\r\n- [SVGO](https://github.com/svg/svgo) optimization.\r\n- Hot Module Replacement support.\r\n- Support for `?url` , `?component` and `?raw` query string.\r\n- Support custom svg icon (monochrome) color with `fill` , `fill-opacity` , `stroke` , `stroke-opacity` attribute.\r\n- Support change svg icon size with `font-size` and it will be responsive.\r\n- Support Iconfont SVG Icons.\r\n\r\n# Installation\r\n\r\n```bash\r\n# pnpm\r\n$ pnpm add vite-plugin-svg4vue -D\r\n\r\n# yarn\r\n$ yarn add vite-plugin-svg4vue --dev\r\n\r\n# npm\r\n$ npm i vite-plugin-svg4vue -D\r\n```\r\n\r\n# Usage\r\n## Setup\r\n\r\n```ts\r\n// vite.config.ts\r\n\r\nimport { defineConfig } from 'vite'\r\nimport vue from '@vitejs/plugin-vue'\r\nimport { svg4VuePlugin } from 'vite-plugin-svg4vue'\r\n\r\nexport default defineConfig({\r\n plugins: [\r\n vue(),\r\n svg4VuePlugin(),\r\n ],\r\n})\r\n```\r\n\r\n## In Vue\r\n\r\n```vue\r\n\r\n
\r\n
SVG component:
\r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n
SVG url:
\r\n\r\n
\r\n \r\n
\r\n\r\n
SVG raw:
\r\n\r\n
\r\n \r\n
\r\n
\r\n\r\n\r\n\r\n```\r\n\r\n## Skip SVGO for a single file (Added in v2.8.1)\r\n\r\n**SVGO** can be explicitly disabled for one file by adding the `?skipsvgo` query string:\r\n\r\n```vue\r\n\r\n
\r\n \r\n \r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n\r\n\r\n\r\n```\r\n\r\n## Typescript\r\n\r\nIf you are using TypeScript, **vite-plugin-svg4vue/client** can be added to `d.ts` declaration file.\r\n\r\n``` ts\r\n/// \r\n```\r\n\r\n## Options\r\n\r\n| Key | Default value | Description | Type |\r\n| :---: | :---: | :---: | :---: |\r\n| `svgoConfig` | `{}` | [SVGO](https://github.com/svg/svgo) config. if set to `false`, will disable **SVGO**. | `object/boolean` |\r\n| `enableSvgoPresetDefaultConfig` | `true` | Whether to enable `preset-default` configuration for **SVGO** | `boolean` |\r\n| `defaultExport` | `url` | Default behavior when importing `.svg` files, possible options are: `url` , `component` and `raw` | `string` |\r\n| `assetsDirName` | `icons` | Restrict SVG to a specific folder. As long as the SVG is in the `assetsDirName` folder, it can be processed by this plugin, Even if the folder is nested, such as, `path/to/icons/*.svg`, `icons/path/to/svg/*.svg` , ` path/to/icons/path/to/*.svg` and so on. If set `assetsDirname` to `false` , will make it work with arbitrary file path. | `string/boolean` |\r\n| `enableBuildCache` | `true` | Whether to enable caching at build time | `boolean` |\r\n| `enableMonochromeSvgOptimize` | `true` | Whether to enable **monochrome** svg icon optimize which can move child node (named **path**, Even the **path** wrapped by **g**) 's `fill`, `fill-opacity` and `stroke`, `stroke-opacity` attribute to its parent node (**svg** element). So that you can change the svg icon color with `fill` and `stroke`. | `boolean` |\r\n| `enableSvgSizeResponsive` | `true` | Whether to enable svg icon responsive. | `boolean` |\r\n| `namespaceClassnames` | `true` | Whether to add a namespace for `class` selector. | `boolean` |\r\n| `namespaceIDs` | `true` | Whether to add a namespace for `ID` selector. | `boolean` |\r\n| `namespacePrefix` | `'a'` | Whether to add a namespace prefix string for selector. | `string` |\r\n| `enforce` | `'pre'` | Define this plugin invocation order. | `string` or `boolean` |\r\n\r\n\r\n### What `enableSvgSizeResponsive` do ?\r\n\r\nIn fact, for the **svg** node, **vite-plugin-svg4vue** will set the `width` value to `font-size`, remove svg `height` and set `width` to `1em`, so that the **svg** size will be **responsive** and you can manipulate it's size with `font-size`.\r\n\r\nJust in case, it records the **original size** of the **svg** as a **css variables**:\r\n\r\n``` html\r\n\r\n```\r\n\r\nSo, you can easily apply its original size.\r\n\r\n```vue\r\n\r\n \r\n\r\n\r\n\r\n```\r\n\r\n# Framework Support\r\n\r\n- **Nuxt**: see [nuxt-svg-icons](https://github.com/yisibell/nuxt-svg-icons).\r\n","readmeFilename":"README.md"}
![](\"https://img.shields.io/npm/v/vite-plugin-svg4vue.svg\")
\r\n \r\n \r\n ![](\"https://img.shields.io/npm/dm/vite-plugin-svg4vue.svg\")
\r\n \r\n