vite-plugin-svg-spritemap

This vite plugin generates a single SVG spritemap containing multiple elements from all .svg files in a directory.

Features

Easily generate the SVG spritemap as part of your build process
Works with dev server 🔥

Installation

# using npm
npm install -D vite-plugin-svg-spritemap
# using pnpm
pnpm install -D vite-plugin-svg-spritemap
# using yarn
yarn add --dev vite-plugin-svg-spritemap

Usage

Vite config

import svgSpritemap from 'vite-plugin-svg-spritemap';

export default defineConfig({
  plugins: [
    svgSpritemap({
      pattern: 'src/icons/*.svg',
    }),
  ],
});

SVG element

export const Icon: React.FC<{ name: string }> = ({ name }) => (
  <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <use xlinkHref={`/spritemap.svg#sprite-${name}`} />
  </svg>
);

const App = () => {
  return (
    <Icon name="arrow" />
  );
}

Options

Option	Type	Description
`pattern`	`string`	A glob pattern that specifies which SVG files to include in the sprite.
`prefix`	`string` (optional)	A string that is added to the beginning of each SVG icon's ID when it is added to the sprite.
`filename`	`string` (optional)	The name of the output file that contains the SVG sprite. If not specified, the default name "spritemap.svg" is used.

What's next?

Allow to pass svgo options