vite-plugin-svg-spritemap

This plugin supports Vite 5 and 6.

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).

[!NOTE] This plugin is inspired by svg-spritemap-webpack-plugin for Webpack.

🚀 Features

• ⚡ 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/SCSS/Stylus/Less
• 🍕 Import SVG fragment as VueJS component
• 🔥 HMR support

📦 Install

1npm i -D @spiriit/vite-plugin-svg-spritemap
2npm i -D svgo #if you need svgo optimization
3
4# yarn
5yarn add -D @spiriit/vite-plugin-svg-spritemap
6yarn add -D svgo #if you need svgo optimization
7
8# pnpm
9pnpm add -D @spiriit/vite-plugin-svg-spritemap
10pnpm add -D svgo #if you need svgo optimization
11
12# bun
13bun add -D @spiriit/vite-plugin-svg-spritemap
14bun add -D svgo #if you need svgo optimization

👨‍💻 Quick start

Add all your SVGs icons in one folder (like below /src/icons folder for example) and pass the first argument as a glob path including your svg files.

1// vite.config.js / vite.config.ts
2import VitePluginSvgSpritemap from '@spiriit/vite-plugin-svg-spritemap'
3
4export default {
5  plugins: [VitePluginSvgSpritemap('./src/icons/*.svg')]
6}

You can access to the spritemap via the route /__spritemap. All files process by ViteJS will transform the path of the file on build. The prefix is sprite- by default.

The plugin will generate a spritemap to support all methods described below (files populated with <view> for fragments and <use> for sprite). This can be configured through options.

SVG

1<svg>
2  <use xlink:href="/__spritemap#sprite-spiriit"></use>
3</svg>

Img

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

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

📚 Documentation

For more informations, check the vite-plugin-svg-spritemap documentation. It covers everything from getting started to advanced topics.

🏃 What's next

• Add variable supports inspired by svg-spritemap-webpack-plugin

👨‍💼 Licence

MIT