unplugin-svg-sprite v1.2.8
!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()],
})
πΊοΈ Road Map
π References
License
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago