https://github.com/endmvp/vite-plugin-svgsg
https://github.com/endmvp/vite-plugin-svgsg
icon-sprite-generator icons svg svg-icons svg-sprite svg-sprite-loader svg-sprites vite vite-plugin vite-plugin-svgr vite-react
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/endmvp/vite-plugin-svgsg
- Owner: endmvp
- License: mit
- Created: 2025-03-19T00:50:48.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-06-02T11:58:35.000Z (4 months ago)
- Last Synced: 2025-08-08T15:54:02.047Z (2 months ago)
- Topics: icon-sprite-generator, icons, svg, svg-icons, svg-sprite, svg-sprite-loader, svg-sprites, vite, vite-plugin, vite-plugin-svgr, vite-react
- Language: TypeScript
- Homepage:
- Size: 8.79 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
npm install vite-plugin-svg-sprite --save-dev
```
```bash
pnpm add vite-plugin-svg-sprite --save-dev
```
```bash
yarn add vite-plugin-svg-sprite --save-dev
```
## Usage
In your vite.config.js (or vite.config.ts), add the plugin like this:
```js
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 `` 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 `` tag:
```tsx
import Icons from "./assets/icon-sprite.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](LICENSE) file for details.
## Author
Vasyl Vovk ([GitHub](https://github.com/Kristalkill))