This ViteJS plugin generates a single SVG spritemap with <symbol>/<view>/<use> for each SVG files. It can also generate a stylesheet (CSS/SCSS/Stylus/Less) containing the sprites to be used directly (via a Data URI or SVG fragments).

The plugin outputs can be fully configurable through options.

This plugin is inspired by svg-spritemap-webpack-plugin for Webpack.

• ⚡ Fully integrated in your ViteJS environment
• 📦 Pack your SVG files in one (spritemap) file
• ✨ Use your SVG in an <svg> or <img> tags and also directly in your CSS
• 🔥 HMR support

npm i -D @spiriit/vite-plugin-svg-spritemap

# yarn
yarn add -D @spiriit/vite-plugin-svg-spritemap

# pnpm
pnpm add -D @spiriit/vite-plugin-svg-spritemap

By default, the plugin will generate a spritemap to support all methods described below (files populated with <view> for fragments and <use> for sprite).

// vite.config.js / vite.config.ts
import VitePluginSVGSpritemap from '@spiriit/vite-plugin-svg-spritemap'

export default {
  plugins: [VitePluginSVGSpritemap('./src/icons/*.svg')]
}

You can access to the spritemap via the route __spritemap. It will be process in build. By default, you will need to use the prefix sprite-.

SVG

<svg>
  <use href="__spritemap#sprite-spiriit"></use>
</svg>

Img

You need to add the suffix -view to access to the fragment.

<img src="__spritemap#sprite-spiriit-view" />

CSS

You can also use the spritemap SVGs in your CSS. The plugin supports CSS (basic classes) and also SCSS, Stylus and Less (mixins and map with SVG Data URI and sizes).

First you need to adjust the plugin options to set the output styles. For full styles options, check the Options.

// vite.config.js / vite.config.ts
import VitePluginSVGSpritemap from '@spiriit/vite-plugin-svg-spritemap'

export default {
  plugins: [
    VitePluginSVGSpritemap('./src/icons/*.svg', {
      styles: 'src/scss/spritemap.scss'
    })
  ]
}

// main.scss
@import './spritemap.scss';

After that, you needs to import the file in your current styles. Don't forget to load the CSS via ViteJS.

If you use a CSS preprocessing language, you can use the mixin sprite and access to a map with all sprites infos. If not, you will only access to classes.

You can see the usage in the demo folder :

• CSS
• SCSS
• Less
• Stylus

The first argument is a glob path (using fast-glob) and the second is an object with the following options :

• Add variable supports inspired by svg-spritemap-webpack-plugin
• Add support for SVG import as Vue Component

MIT