{"id":19071850,"url":"https://github.com/yunsii/unplugin-svg-sprite","last_synced_at":"2025-04-28T15:54:25.397Z","repository":{"id":183014041,"uuid":"668309567","full_name":"yunsii/unplugin-svg-sprite","owner":"yunsii","description":"A framework-agnostic unified plugin for SVG sprite","archived":false,"fork":false,"pushed_at":"2024-03-23T15:01:00.000Z","size":381,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-18T04:45:07.262Z","etag":null,"topics":["esbuild","jannajs","nextjs","rollup","rspack","sprite","svg","svg-sprite","svg-stack","svgo","unplugin","vite","webpack"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/github/yunsii/unplugin-svg-sprite","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yunsii.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"yuns","custom":["https://afdian.net/@yunslove"]}},"created_at":"2023-07-19T13:58:03.000Z","updated_at":"2024-09-06T13:17:56.000Z","dependencies_parsed_at":"2024-03-30T14:30:10.116Z","dependency_job_id":null,"html_url":"https://github.com/yunsii/unplugin-svg-sprite","commit_stats":null,"previous_names":["yunsii/unplugin-svg-sprite"],"tags_count":29,"template":false,"template_full_name":"unplugin/unplugin-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunsii%2Funplugin-svg-sprite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunsii%2Funplugin-svg-sprite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunsii%2Funplugin-svg-sprite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunsii%2Funplugin-svg-sprite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yunsii","download_url":"https://codeload.github.com/yunsii/unplugin-svg-sprite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251319608,"owners_count":21570426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["esbuild","jannajs","nextjs","rollup","rspack","sprite","svg","svg-sprite","svg-stack","svgo","unplugin","vite","webpack"],"created_at":"2024-11-09T01:31:36.730Z","updated_at":"2025-04-28T15:54:25.361Z","avatar_url":"https://github.com/yunsii.png","language":"TypeScript","funding_links":["https://opencollective.com/yuns","https://afdian.net/@yunslove"],"categories":[],"sub_categories":[],"readme":"\u003e [!Note]\n\u003e 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.\n\u003e\n\u003e 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.\n\n# unplugin-svg-sprite\n\n[![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![License][license-src]][license-href]\n\n\u003e [🌱 Try it online](https://stackblitz.com/github/yunsii/unplugin-svg-sprite)\n\n## 🎉 Features\n\n- 🦄 [Unified plugin](https://github.com/unjs/unplugin), support Vite/Rollup/Webpack/Nuxt/esbuild\n- ❤️ Framework-agnostic, use whatever framework you like\n- 😎 Import SVG file directly in the source code\n- 🪁 \\*Inject **dynamic SVG sprite** only\n- 😄 HMR supported (Vite/Webpack)\n- 🤖 Detect duplicated SVG shapes\n- 🚀 Auto optimization for unused and duplicated svg shapes (After build)\n\n\u003e 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.\n\u003e\n\u003e Fortunately, with the plugin, you can just use injected `href` property to resolve the situation. Only **dynamic SVG sprite** will inject to the DOM.\n\n## 👀 Install\n\n```bash\nnpm i unplugin-svg-sprite\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport svgSprite from 'unplugin-svg-sprite/vite'\n\nexport default defineConfig({\n  plugins: [\n    svgSprite({\n      /* options */\n    }),\n  ],\n})\n```\n\nExample: [`playground/`](./playground/)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRollup\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rollup.config.js\nimport svgSprite from 'unplugin-svg-sprite/rollup'\n\nexport default {\n  plugins: [\n    svgSprite({\n      /* options */\n    }),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require('unplugin-svg-sprite/webpack')({\n      /* options */\n    }),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNuxt\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// nuxt.config.js\nexport default {\n  vue: {\n    runtimeCompiler: true,\n  },\n  // Nuxt 2 move `modules` into `buildModules`\n  modules: [\n    [\n      'unplugin-svg-sprite/nuxt',\n      {\n        /* options */\n      },\n    ],\n  ],\n}\n```\n\n\u003e This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue CLI\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vue.config.js\nmodule.exports = {\n  configureWebpack: {\n    plugins: [\n      require('unplugin-svg-sprite/webpack')({\n        /* options */\n      }),\n    ],\n  },\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eesbuild\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from 'esbuild'\nimport svgSprite from 'unplugin-svg-sprite/esbuild'\n\nbuild({\n  plugins: [svgSprite()],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n## 🗺️ Road Map\n\n[Check **todo** issues](https://github.com/yunsii/unplugin-svg-sprite/issues?q=is%3Aopen+label%3Atodo+sort%3Aupdated-desc)\n\n## 📚 References\n\n- [svg-sprite](https://github.com/svg-sprite/svg-sprite)\n- [How SVG Fragment Identifiers Work](https://css-tricks.com/svg-fragment-identifiers-work/)\n- [SVG Stacks](https://simurai.com/blog/2012/04/02/svg-stacks)\n- [SVGO](https://github.com/svg/svgo)\n\n## License\n\n[MIT](./LICENSE) License © 2023-PRESENT [yunsii](https://github.com/yunsii)\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/unplugin-svg-sprite?color=a1b858\u0026label=\n[npm-version-href]: https://www.npmjs.com/package/unplugin-svg-sprite\n[npm-downloads-src]: https://img.shields.io/npm/dm/unplugin-svg-sprite.svg?color=a1b858\n[npm-downloads-href]: https://www.npmjs.com/package/unplugin-svg-sprite\n[license-src]: https://img.shields.io/github/license/yunsii/unplugin-svg-sprite.svg?style=flat\u0026colorB=a1b858\n[license-href]: https://github.com/yunsii/unplugin-svg-sprite/blob/main/LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunsii%2Funplugin-svg-sprite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyunsii%2Funplugin-svg-sprite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunsii%2Funplugin-svg-sprite/lists"}