gem-hunter
Language: TypeScript
A framework-agnostic unified plugin for SVG sprite
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.
There is some SVG nodes will make SVG item broken, if
usenodehrefproperty 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
hrefproperty to resolve the situation. Only dynamic SVG sprite will inject to the DOM.
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()], })