Repository files navigation

This plugin supports Vite 5 and 6.

This ViteJS plugin generates a single SVGspritemap 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).

• ⚡ 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

npm i -D @spiriit/vite-plugin-svg-spritemapnpm i -D svgo#if you need svgo optimization# yarnyarn add -D @spiriit/vite-plugin-svg-spritemapyarn add -D svgo#if you need svgo optimization# pnpmpnpm add -D @spiriit/vite-plugin-svg-spritemappnpm add -D svgo#if you need svgo optimization# bunbun add -D @spiriit/vite-plugin-svg-spritemapbun add -D svgo#if you need svgo optimization

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.

// vite.config.js / vite.config.tsimportVitePluginSvgSpritemapfrom'@spiriit/vite-plugin-svg-spritemap'exportdefault{plugins:[VitePluginSvgSpritemap('./src/icons/*.svg')]}

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 issprite- 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

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

Img

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

<imgsrc="/__spritemap#sprite-spiriit-view"/>

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

• Add variable supports inspired bysvg-spritemap-webpack-plugin

MIT