yunsii/unplugin-svg-sprite

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.

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

unplugin-svg-sprite's Issues

Tree-shaking of SVG files

Preset for specific frameworks

Provide some presets for specific frameworks, for example:

• Next.js
• Nuxt

Analyze of duplicate svg by file hash

Support SVG changes

Update svg sprite on SVG files occur some changes.

Problem with importing lodash

I have a problem importing lodash. You can solve it by replacing this line.

import { get, isPlainObject, omitBy, padStart } from "lodash";

On this line in the file: /src/core/ctx.ts

import pkg from 'lodash';
const { get, isPlainObject, omitBy, padStart } = pkg;

I use node.js v20.11.1 and pnpm v8.15.5.

failed to load config from /Users/serhii/_work/vite-boilerplate/vite.config.js
error during build:
file:///Users/serhii/_work/vite-boilerplate/node_modules/.pnpm/[email protected]/node_modules/unplugin-svg-sprite/dist/chunk-K4L3MOHQ.js:114
import { get, isPlainObject, omitBy, padStart } from "lodash";
         ^^^
SyntaxError: Named export 'get' not found. The requested module 'lodash' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'lodash';
const { get, isPlainObject, omitBy, padStart } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async loadConfigFromBundledFile (file:///Users/serhii/_work/vite-boilerplate/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:64506:21)
    at async loadConfigFromFile (file:///Users/serhii/_work/vite-boilerplate/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:64388:28)
    at async resolveConfig (file:///Users/serhii/_work/vite-boilerplate/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:63993:28)
    at async build (file:///Users/serhii/_work/vite-boilerplate/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46318:20)
    at async CAC.<anonymous> (file:///Users/serhii/_work/vite-boilerplate/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/cli.js:812:9)
 ELIFECYCLE  Command failed with exit code 1.

How to only generate static with symbol?

Hi,

Is it possible to only output dynamic or static with only stack or symbol? Ideally, I only want to render the static symbol sprite.

Also, is it possible to set a totally custom output path? I would like to render my static sprite to a custom path like static/sprites/icons.svg.

The current output looks like:

static/sprites/
├── dynamic
│   └── symbol
│       ├── icons-stack.svg
│       └── icons.svg
└── static
    └── symbol
        ├── icons-stack.svg
        └── icons.svg

Whereas I only want:

static/sprites/
└── icons.svg

Apologies if I missed this in the docs, I tried a few things like setting a custom dest and setting sprites.stack to false in the config but wasn't able to achieve the above.

How to use it with Webpack?

I know you have added a simple example but it doesn't work for me.

In general, Webpack plugins start with the new keyword. Example:

new MiniCssExtractPlugin({
    filename: 'css/[name].css',
}),

And not with:

require('unplugin-svg-sprite/webpack')

When I try your example I get the error:

TypeError: require(...) is not a function