unplugin-svg-sprite
TypeScript icon, indicating that this package has built-in type declarations

1.2.8 • Public • Published

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

npm version npm downloads License

🌱 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

License

MIT License © 2023-PRESENT yunsii

Package Sidebar

Install

npm i unplugin-svg-sprite

Weekly Downloads

44

Version

1.2.8

License

MIT

Unpacked Size

195 kB

Total Files

28

Last publish

Collaborators

  • theprimone