gem-hunter

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

👀 Install

npm i unplugin-svg-sprite

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

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

// 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 */
      },
    ],
  ],
}

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