vite-plugin-svg-sfc

Vite (also support Rollup) plugin to convert SVGs to Vue single file components (SFC).

Demo

🚀 Features

• Extract <style> tags from SVG to scoped SFC style block.
• Support Hot Module Replacement.
• Support custom import mark.
• SVGO minification with sensible defaults.

Usage

Install:

npm i -D vite-plugin-svg-sfc

Then add the plugin to your vite.config.js:

1import { defineConfig } from "vite";
2import vue from "@vitejs/plugin-vue";
3import svgSfc from "vite-plugin-svg-sfc";
4
5// If in commonjs module
6// const { default: svgSfc } = require("vite-plugin-svg-sfc");
7
8export default defineConfig({
9    plugins: [svgSfc(), vue()],
10});

SVG files can be imported as Vue component using the ?sfc query:

1<template>
2    <MyIconComponent/>
3    <img :src="myIconUrl" alt="icon">
4    <pre>{{ myIconXml }}</pre>
5</template>
6
7<script setup>
8import MyIconComponent from "../assets/my-icon.svg?sfc";
9
10// vite-plugin-svg-sfc does not affect Vite default asset handling.
11import myIconUrl from "../assets/my-icon.svg";
12import myIconRaw from "../assets/my-icon.svg?raw";
13</script>

If you are using TypeScript, vite-plugin-svg-sfc/client can be added to d.ts declaration file.

1/// <reference types="vite-plugin-svg-sfc/client" />

You can add more than one of this plugin with different marks.

1export default defineConfig({
2    plugins: [
3        vue(),
4        // matches *.svg?icon
5        svgSfc({ mark: "icon", svgProps: { class: "icon" } }),
6        // matches *.svg?img
7        svgSfc({ mark: "img", responsive: false }),
8    ],
9});

Build a component library:

1// index.js
2export { default as FooIcon } from "./icons/foo.svg?sfc";
3export { default as BarIcon } from "./icons/bar.svg?sfc";

1import { defineConfig } from "vite";
2import svgSfc from "vite-plugin-svg-sfc";
3import vue from "@vitejs/plugin-vue";
4
5export default defineConfig({
6    plugins: [svgSfc(), vue()],
7    build: {
8        rollupOptions: {
9            external: "vue",
10        },
11        lib: {
12            formats: ["es"],
13            entry: "index.js",
14        },
15    },
16});

Without Vite

SVGSFCConvertor is exported for convert SVG to SFC code without build tools.

1import { SVGSFCConvertor } from "vite-plugin-svg-sfc";
2
3const svg2sfc = new SVGSFCConvertor();
4const vueCode = svg2sfc.convert("<svg>...</svg>");
5// <template><svg>...</svg></template>...

Options

mark

Type: string

Default: sfc

SVG will be imported as SFC using the query parameter.

1// vite.config.js
2export default defineConfig({
3    plugins: [svgSfc({ mark: "component" }), vue()],
4});
5
6// Vue component.
7import Icon from "../assets/my-icon.svg?component";

extractCSS

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 <style>, so we need to move them to top level.

You may notice that SVGO has a inlineStyles plugin that avoid <style> in the SVG by move styles onto the style attribute, but some features (e.g. media query) can not be inlined.

minify

Type: boolean

Default: true on production mode and false otherwise.

Perform minification for SVG.

responsive

Type: boolean

Default: true

When set to true, some attributes on <svg> will be replaced with reactive value:

• set width & height to "1em".
• set fill and stroke to "currentColor" if it's not transparent。

svgProps

Type: Record<string, string>

Default: undefined

Add props to the root SVG tag.

uniqueId

Type: boolean

Default: false

Make id attributes of elements in SVG component per-instance unique, requires Vue 3.5 useId function.

This feature is useful when you need link elements by id inside SVG.

svgo

Type: OptimizeOptions | false

Default: {}

Specify the SVGO config to use, set to false to disable processing SVG data.

If svgo.plugins is specified, the extractStyles, minify, svgProps, responsive options and builtin plugins are ignored, you can add them manually:

1import svgSfc from "vite-plugin-svg-sfc";
2
3svgSfc({
4    svgo: {
5        plugins: [
6            "responsiveSVGAttrs",
7            "extractCSS",
8            "preset-default",
9            {
10                name: "modifySVGAttrs",
11                params(attrs) {
12                    delete attrs.xmlns;
13                    delete attrs.version;
14                    delete attrs["xml:space"];
15                }
16            }
17        ]
18    }
19});