vite-plugin-svg-spriter

Build a svg sprite from individual svgs and inject it in your root html with vite.

Uses svg-sprite under the hood.

Install

npm install vite-plugin-svg-spriter -DE

Careful, it's "spriter", with an 'r'.

Plugin usage

The plugin only requires the path to your svgs. Check the configuration section for options.

1// vite.config.ts
2
3import {defineConfig} from 'vite'
4import createSvgSpritePlugin from 'vite-plugin-svg-spriter'
5import path from 'path'
6
7const SRC_PATH = path.resolve(__dirname, 'src')
8const SVG_FOLDER_PATH = path.resolve(SRC_PATH, 'assets', 'svg-sprite')
9
10export default defineConfig({
11  plugins: [createSvgSpritePlugin({svgFolder: SVG_FOLDER_PATH})],
12})

By default, the sprite is prepended to your root html body element and no transformation is applied to the svgs.

Display svg

You can display a particular svg symbol with svg use xlinkHref where name is the svg filename without extension.

thumbs-up.svg

1<svg>
2  <use xlinkHref="#thumbs-up" />
3</svg>

Configuration (optional)

• svg-sprite: You can customize the output by providing a svg-sprite config.

• injection: You can provide a HtmlTagDescriptor for Vite transformIndexHtml hook tag

1defineConfig({
2  plugins: [
3    createSvgSpritePlugin({
4      svgFolder: SVG_FOLDER_PATH,
5      svgSpriteConfig: {
6        shape: {
7          transform: ['svgo'],
8        },
9      },
10      transformIndexHtmlTag: {
11        injectTo: 'body',
12      },
13    }),
14  ],
15})