Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yunsii/unplugin-svg-sprite
A framework-agnostic unified plugin for SVG sprite
https://github.com/yunsii/unplugin-svg-sprite
esbuild jannajs nextjs rollup rspack sprite svg svg-sprite svg-stack svgo unplugin vite webpack
Last synced: 7 days ago
JSON representation
A framework-agnostic unified plugin for SVG sprite
- Host: GitHub
- URL: https://github.com/yunsii/unplugin-svg-sprite
- Owner: yunsii
- License: mit
- Created: 2023-07-19T13:58:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-23T15:01:00.000Z (8 months ago)
- Last Synced: 2024-04-24T19:33:50.773Z (7 months ago)
- Topics: esbuild, jannajs, nextjs, rollup, rspack, sprite, svg, svg-sprite, svg-stack, svgo, unplugin, vite, webpack
- Language: TypeScript
- Homepage: https://stackblitz.com/github/yunsii/unplugin-svg-sprite
- Size: 372 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
> [!Note]
> If you are using Tailwind CSS, I recommend you can try to use svg icons by tailwind plugin by [iconify.design](https://iconify.design/docs/usage/css/tailwind/#options), where icons are used as background or mask image.
>
> Also I create a tailwind plugin [tailwindcss-plugin-iconify](https://github.com/yunsii/tailwindcss-plugin-iconify) for more easy to use, especially for import local svg icons or import icons from figma.
# unplugin-svg-sprite
[![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![License][license-src]][license-href]
> [🌱 Try it online](https://stackblitz.com/github/yunsii/unplugin-svg-sprite)
## 🎉 Features
- 🦄 [Unified plugin](https://github.com/unjs/unplugin), support Vite/Rollup/Webpack/Nuxt/esbuild
- ❤️ Framework-agnostic, use whatever framework you like
- 😎 Import SVG file directly in the source code
- 🪁 \*Inject **dynamic SVG sprite** only
- 😄 HMR supported (Vite/Webpack)
- 🤖 Detect duplicated SVG shapes
- 🚀 Auto optimization for unused and duplicated svg shapes (After build)
> There is [some SVG nodes](https://stackoverflow.com/a/74173265/8335317) will make SVG item broken, if `use` node `href` property is external link like `/svg-sprite-symbol#unplugin`. I call it `dynamic SVG`, because regular SVG can use with external **static resource** link smoothly.
>
> Fortunately, with the plugin, you can just use injected `href` property to resolve the situation. Only **dynamic SVG sprite** will inject to the DOM.
## 👀 Install
```bash
npm i unplugin-svg-sprite
```
Vite
```ts
// vite.config.ts
import svgSprite from 'unplugin-svg-sprite/vite'
export default defineConfig({
plugins: [
svgSprite({
/* options */
}),
],
})
```
Example: [`playground/`](./playground/)
Rollup
```ts
// rollup.config.js
import svgSprite from 'unplugin-svg-sprite/rollup'
export default {
plugins: [
svgSprite({
/* options */
}),
],
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-svg-sprite/webpack')({
/* options */
}),
],
}
```
Nuxt
```ts
// nuxt.config.js
export default {
vue: {
runtimeCompiler: true,
},
// Nuxt 2 move `modules` into `buildModules`
modules: [
[
'unplugin-svg-sprite/nuxt',
{
/* options */
},
],
],
}
```
> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-svg-sprite/webpack')({
/* options */
}),
],
},
}
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import svgSprite from 'unplugin-svg-sprite/esbuild'
build({
plugins: [svgSprite()],
})
```
## 🗺️ Road Map
[Check **todo** issues](https://github.com/yunsii/unplugin-svg-sprite/issues?q=is%3Aopen+label%3Atodo+sort%3Aupdated-desc)
## 📚 References
- [svg-sprite](https://github.com/svg-sprite/svg-sprite)
- [How SVG Fragment Identifiers Work](https://css-tricks.com/svg-fragment-identifiers-work/)
- [SVG Stacks](https://simurai.com/blog/2012/04/02/svg-stacks)
- [SVGO](https://github.com/svg/svgo)
## License
[MIT](./LICENSE) License © 2023-PRESENT [yunsii](https://github.com/yunsii)
[npm-version-src]: https://img.shields.io/npm/v/unplugin-svg-sprite?color=a1b858&label=
[npm-version-href]: https://www.npmjs.com/package/unplugin-svg-sprite
[npm-downloads-src]: https://img.shields.io/npm/dm/unplugin-svg-sprite.svg?color=a1b858
[npm-downloads-href]: https://www.npmjs.com/package/unplugin-svg-sprite
[license-src]: https://img.shields.io/github/license/yunsii/unplugin-svg-sprite.svg?style=flat&colorB=a1b858
[license-href]: https://github.com/yunsii/unplugin-svg-sprite/blob/main/LICENSE