[!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

🌱 Try it online

🎉 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 node href property is external link like /svg-sprite-symbol#unplugin. I call it dynamic 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

// vite.config.ts
import svgSprite from 'unplugin-svg-sprite/vite'

export default defineConfig({
  plugins: [
    svgSprite({
      /* options */
    }),
  ],
})

Example: playground/

Rollup

// rollup.config.js
import svgSprite from 'unplugin-svg-sprite/rollup'

export default {
  plugins: [
    svgSprite({
      /* options */
    }),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-svg-sprite/webpack')({
      /* options */
    }),
  ],
}

Nuxt

// 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 CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-svg-sprite/webpack')({
        /* options */
      }),
    ],
  },
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import svgSprite from 'unplugin-svg-sprite/esbuild'

build({
  plugins: [svgSprite()],
})

🗺️ Road Map

Check todo issues

📚 References

• svg-sprite
• How SVG Fragment Identifiers Work
• SVG Stacks
• SVGO

License

MIT License © 2023-PRESENT yunsii