https://github.com/SpiriitLabs/vite-plugin-svg-spritemap
Vite plugin to generate svg spritemap
https://github.com/SpiriitLabs/vite-plugin-svg-spritemap
css spritemap svg vitejs vuejs
Last synced: 3 days ago
JSON representation
Vite plugin to generate svg spritemap
- Host: GitHub
- URL: https://github.com/SpiriitLabs/vite-plugin-svg-spritemap
- Owner: SpiriitLabs
- License: mit
- Created: 2022-07-06T14:52:03.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-10T07:35:24.000Z (6 months ago)
- Last Synced: 2024-10-26T15:23:01.205Z (6 months ago)
- Topics: css, spritemap, svg, vitejs, vuejs
- Language: TypeScript
- Homepage:
- Size: 1.42 MB
- Stars: 51
- Watchers: 4
- Forks: 4
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - @spiriit/vite-plugin-svg-spritemap - Pack your SVG files in one spritemap file and use them with `<svg>`/`<img>` and directly in your CSS. (Plugins / Framework-agnostic Plugins)
- awesome-vite - @spiriit/vite-plugin-svg-spritemap - Pack your SVG files in one spritemap file and use them with `<svg>`/`<img>` and directly in your CSS. (Plugins / Framework-agnostic Plugins)
- jimsghstars - SpiriitLabs/vite-plugin-svg-spritemap - Vite plugin to generate svg spritemap (TypeScript)
README
[](https://www.npmjs.com/package/@spiriit/vite-plugin-svg-spritemap) [](https://nodejs.org/) [](https://coveralls.io/github/SpiriitLabs/vite-plugin-svg-spritemap?branch=main)
# [vite-plugin-svg-spritemap](https://spiriitlabs.github.io/vite-plugin-svg-spritemap)
> This plugin supports Vite 5 and 6.
This ViteJS plugin generates a single SVG [spritemap](https://css-tricks.com/svg-sprites-use-better-icon-fonts/) with ``/``/`` for each SVG files. It can also generate a stylesheet (CSS/SCSS/Stylus/Less) containing the sprites to be used directly (via a Data URI or SVG fragments).
> [!NOTE]
> This plugin is inspired by [svg-spritemap-webpack-plugin](https://github.com/cascornelissen/svg-spritemap-webpack-plugin) for Webpack.
## 🚀 Features
- ⚡ Fully integrated in your ViteJS environment
- 📦 Pack your SVG files in one ([spritemap](https://css-tricks.com/svg-sprites-use-better-icon-fonts/)) file
- ✨ Use your SVG in an `` or `![]()
` tags and also directly in your CSS/SCSS/Stylus/Less
- 🍕 Import SVG fragment as VueJS component
- 🔥 HMR support
## 📦 Install
```shell
npm i -D @spiriit/vite-plugin-svg-spritemap
npm i -D svgo #if you need svgo optimization
# yarn
yarn add -D @spiriit/vite-plugin-svg-spritemap
yarn add -D svgo #if you need svgo optimization
# pnpm
pnpm add -D @spiriit/vite-plugin-svg-spritemap
pnpm add -D svgo #if you need svgo optimization
# bun
bun add -D @spiriit/vite-plugin-svg-spritemap
bun add -D svgo #if you need svgo optimization
```
## 👨💻 Quick start
Add all your SVGs icons in one folder (like below `/src/icons` folder for example) and pass the first argument as a glob path including your svg files.
```ts
// vite.config.js / vite.config.ts
import VitePluginSvgSpritemap from '@spiriit/vite-plugin-svg-spritemap'
export default {
plugins: [VitePluginSvgSpritemap('./src/icons/*.svg')]
}
```
You can access to the spritemap via the route `/__spritemap`. All files process by ViteJS will transform the path of the file on build. The prefix is `sprite-` by default.
The plugin will generate a spritemap to support all methods described below (files populated with `` for fragments and `` for sprite). This can be configured through options.
**SVG**
```html
```
**Img**
You need to add the suffix `-view` to access to the fragment.
```html
```
## 📚 Documentation
For more informations, check the [vite-plugin-svg-spritemap documentation](https://spiriitlabs.github.io/vite-plugin-svg-spritemap). It covers everything from getting started to advanced topics.
## 🏃 What's next
- Add variable supports inspired by [svg-spritemap-webpack-plugin](https://github.com/cascornelissen/svg-spritemap-webpack-plugin/blob/master/docs/variables.md)
## 👨💼 Licence
MIT