@endmvp/vite-plugin-svgsg v1.1.2

vite-plugin-svg-sprite

A Vite plugin to generate and manage SVG icon sprites. It scans a directory for SVG files, compiles them into a single sprite, and watches for changes to regenerate the sprite automatically.

Installation

To install the plugin, run one of the following command:

npm install vite-plugin-svg-sprite --save-dev

pnpm add vite-plugin-svg-sprite --save-dev

yarn add vite-plugin-svg-sprite --save-dev

Usage

In your vite.config.js (or vite.config.ts), add the plugin like this:

import { defineConfig } from 'vite';
import IconSpritePlugin from 'vite-plugin-svg-sprite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    IconSpritePlugin('src/icons', 'dist')  // Specify your icons directory and output directory
  ]
});

1. The plugin watches the specified folder for changes to .svg files. It automatically rebuilds the sprite whenever any SVG files in the source directory are modified.
2. It generates a single SVG sprite file, icon-sprite.svg, in the specified output directory. This sprite contains all icons as <symbol> elements, with each icon's ID derived from its folder structure and filename (#subfolder(optional)_filename).
3. In components, you can reference icons from the sprite using the <use> tag:

import Icons from "./assets/icon-sprite.svg"


<svg width="18" height="18">
  <use href={`${Icons}#footer_phone`}></use>
</svg>

Options

• iconsDir: The directory containing your SVG icons. (e.g. 'src/icons')
• outDir: The output directory where the icon-sprite.svg will be generated. (e.g. 'dist')

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Vasyl Vovk (GitHub)