Convert SVGs to Vue single file component(SFC), support <style> tag
npm install vite-plugin-svg-sfc


Vite (also support Rollup) plugin to convert SVGs to Vue single file components (SFC).
🚀 Features
* Extract tags from SVG to scoped SFC style block.
* Support Hot Module Replacement.
* Support custom import mark.
* SVGO minification with sensible defaults.
Install:
```
npm i -D vite-plugin-svg-sfc
Then add the plugin to your vite.config.js:
`typescript
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import svgSfc from "vite-plugin-svg-sfc";
// If in commonjs module
// const { default: svgSfc } = require("vite-plugin-svg-sfc");
export default defineConfig({
plugins: [svgSfc(), vue()],
});
`
SVG files can be imported as Vue component using the ?sfc query:
`vue
{{ myIconXml }}
`
If you are using TypeScript, vite-plugin-svg-sfc/client can be added to d.ts declaration file.
`typescript`
///
You can add more than one of this plugin with different marks.
`javascript`
export default defineConfig({
plugins: [
vue(),
// matches *.svg?icon
svgSfc({ mark: "icon", svgProps: { class: "icon" } }),
// matches *.svg?img
svgSfc({ mark: "img", responsive: false }),
],
});
Build a component library:
`javascript`
// index.js
export { default as FooIcon } from "./icons/foo.svg?sfc";
export { default as BarIcon } from "./icons/bar.svg?sfc";
`typescript
import { defineConfig } from "vite";
import svgSfc from "vite-plugin-svg-sfc";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [svgSfc(), vue()],
build: {
rollupOptions: {
external: "vue",
},
lib: {
formats: ["es"],
entry: "index.js",
},
},
});
`
SVGSFCConvertor is exported for convert SVG to SFC code without build tools.
`typescript
import { SVGSFCConvertor } from "vite-plugin-svg-sfc";
const svg2sfc = new SVGSFCConvertor();
const vueCode = svg2sfc.convert("");
// ...
`
Type: string
Default: sfc
SVG will be imported as SFC using the query parameter.
`javascript
// vite.config.js
export default defineConfig({
plugins: [svgSfc({ mark: "component" }), vue()],
});
// Vue component.
import Icon from "../assets/my-icon.svg?component";
`
Type: boolean
Default: true
When set to true, extract all style elements in the svg and put their content into a scoped SFC style block.
Vue template compiler will throw an error when the template contains