unplugin-svg-sprite
v1.2.8
Published
Unified plugin system for svg sprite
Downloads
109
Maintainers
Readme
[!Note] If you are using Tailwind CSS, I recommend you can try to use svg icons by tailwind plugin by iconify.design, where icons are used as background or mask image.
Also I create a tailwind plugin tailwindcss-plugin-iconify for more easy to use, especially for import local svg icons or import icons from figma.
unplugin-svg-sprite
🎉 Features
- 🦄 Unified plugin, support Vite/Rollup/Webpack/Nuxt/esbuild
- ❤️ Framework-agnostic, use whatever framework you like
- 😎 Import SVG file directly in the source code
- 🪁 *Inject dynamic SVG sprite only
- 😄 HMR supported (Vite/Webpack)
- 🤖 Detect duplicated SVG shapes
- 🚀 Auto optimization for unused and duplicated svg shapes (After build)
There is some SVG nodes will make SVG item broken, if
use
nodehref
property is external link like/svg-sprite-symbol#unplugin
. I call itdynamic SVG
, because regular SVG can use with external static resource link smoothly.Fortunately, with the plugin, you can just use injected
href
property to resolve the situation. Only dynamic SVG sprite will inject to the DOM.
👀 Install
npm i unplugin-svg-sprite
// vite.config.ts
import svgSprite from 'unplugin-svg-sprite/vite'
export default defineConfig({
plugins: [
svgSprite({
/* options */
}),
],
})
Example: playground/
// rollup.config.js
import svgSprite from 'unplugin-svg-sprite/rollup'
export default {
plugins: [
svgSprite({
/* options */
}),
],
}
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-svg-sprite/webpack')({
/* options */
}),
],
}
// nuxt.config.js
export default {
vue: {
runtimeCompiler: true,
},
// Nuxt 2 move `modules` into `buildModules`
modules: [
[
'unplugin-svg-sprite/nuxt',
{
/* options */
},
],
],
}
This module works for both Nuxt 2 and Nuxt Vite
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-svg-sprite/webpack')({
/* options */
}),
],
},
}
// esbuild.config.js
import { build } from 'esbuild'
import svgSprite from 'unplugin-svg-sprite/esbuild'
build({
plugins: [svgSprite()],
})