Skip to content

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

License

Notifications You must be signed in to change notification settings

g-makarov/vite-plugin-svg-spritemap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vite-plugin-svg-spritemap

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

npm version npm downloads

Features

  • Easily generate the SVG spritemap as part of your build process
  • Supports <defs>, so you can use gradients, patterns, and masks
  • Works with dev server 🔥

If you find this plugin useful, why not

Buy Me A Coffee

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

<svg>
  <use xlink:href="/spritemap.svg#example"></use>
</svg>

React component example

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#${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. Default is spritemap.svg.
currentColor boolean (optional) Replace colors in the SVGs with the currentColor value by SVGO. Default is false.
svgo SVGOConfig or boolean (optional) Use SVGO for optimization. Default is true.
emit boolean (optional) Additionally emit the file so that other vite plugins can process it (eg. compression). Default is false.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published