{"id":22486229,"url":"https://github.com/swisnl/vue-cli-plugin-svg-sprite","last_synced_at":"2025-07-12T15:07:10.292Z","repository":{"id":47494649,"uuid":"154844026","full_name":"swisnl/vue-cli-plugin-svg-sprite","owner":"swisnl","description":"vue-cli 3 plugin to build an SVG sprite","archived":false,"fork":false,"pushed_at":"2022-11-11T14:36:44.000Z","size":32,"stargazers_count":68,"open_issues_count":2,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-01T10:51:10.531Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/swisnl.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-26T14:05:39.000Z","updated_at":"2024-09-16T15:42:38.000Z","dependencies_parsed_at":"2023-01-22T15:15:06.926Z","dependency_job_id":null,"html_url":"https://github.com/swisnl/vue-cli-plugin-svg-sprite","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swisnl%2Fvue-cli-plugin-svg-sprite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swisnl%2Fvue-cli-plugin-svg-sprite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swisnl%2Fvue-cli-plugin-svg-sprite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swisnl%2Fvue-cli-plugin-svg-sprite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swisnl","download_url":"https://codeload.github.com/swisnl/vue-cli-plugin-svg-sprite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500077,"owners_count":17929997,"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":["hacktoberfest"],"created_at":"2024-12-06T17:14:08.461Z","updated_at":"2024-12-06T17:15:36.616Z","avatar_url":"https://github.com/swisnl.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-cli-plugin-svg-sprite\n\n[![Latest Version on NPM](https://img.shields.io/npm/v/vue-cli-plugin-svg-sprite.svg)](https://www.npmjs.com/package/vue-cli-plugin-svg-sprite)\n[![Code Style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com)\n[![Software License](https://img.shields.io/github/license/swisnl/vue-cli-plugin-svg-sprite.svg)](LICENSE.md)\n[![Buy us a tree](https://img.shields.io/badge/Treeware-%F0%9F%8C%B3-lightgreen.svg)](https://plant.treeware.earth/swisnl/vue-cli-plugin-svg-sprite)\n[![Known Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/vue-cli-plugin-svg-sprite.svg)](https://snyk.io/test/github/swisnl/vue-cli-plugin-svg-sprite?targetFile=package.json)\n[![Made by SWIS](https://img.shields.io/badge/%F0%9F%9A%80-made%20by%20SWIS-%230737A9.svg)](https://www.swis.nl)\n\nvue-cli 3 plugin to build an SVG sprite using [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader).\n\n⚠️ Vue CLI and this plugin are in Maintenance Mode! ⚠️\n\nFor new projects, it is now recommended to use [`create-vue`](https://github.com/vuejs/create-vue) to scaffold [Vite](https://vitejs.dev/)-based projects. Also refer to the [Vue 3 Tooling Guide](https://vuejs.org/guide/scaling-up/tooling.html) for the latest recommendations.\n\n## Install\n\n```bash\nvue add svg-sprite\n```\n\n## Usage\n\nUse the [SvgIcon component](template/src/components/SvgIcon.vue) provided by the generator or check the [loader documentation](https://github.com/kisenka/svg-sprite-loader#runtime-configuration) for other/advanced usages.\n\nN.B. This plugin only adds a loader to the Webpack configuration, it doesn't glob your directory and include every file it finds. You need to require the icons from within your code (JS, CSS, etc.) just like other modules to have them added to the sprite!\n\n### Options\n\nMost options for this plugin are passed directly to svg-sprite-loader and its plugin.\nPlease refer to [their documentation](https://github.com/kisenka/svg-sprite-loader#configuration) for further details.\nThe configuration must be defined in your `vue.config.js` file as below (defaults shown).\n\n```javascript\nmodule.exports = {\n    pluginOptions: {\n        svgSprite: {\n            /*\n             * The directory containing your SVG files.\n             */\n            dir: 'src/assets/icons',\n            /*\n             * The regex that will be used for the Webpack rule.\n             */\n            test: /\\.(svg)(\\?.*)?$/,\n            /*\n             * @see https://github.com/kisenka/svg-sprite-loader#configuration\n             */\n            loaderOptions: {\n                extract: true, // or false if you need the sprite to be automatically injected in the document.body\n                spriteFilename: 'img/icons.[hash:8].svg' // or 'img/icons.svg' if filenameHashing == false\n            },\n            /*\n             * @see https://github.com/kisenka/svg-sprite-loader#configuration\n             */\n            pluginOptions: {\n                plainSprite: true\n            }    \n        }    \n    }    \n};\n```\n\n### Extra loaders\n\nIt is possible to add extra Webpack loaders to this plugin.\nThis can be useful if you want your icons to be optimized before the sprite is created.\nThe following example can be created using the generator and uses [svgo](https://github.com/svg/svgo) and [svgo-loader](https://github.com/rpominov/svgo-loader) to accomplish this.\n\nInstall extra dependencies:\n```bash\nnpm install svgo svgo-loader --save-dev\n```\n\nAdd the loader to your Webpack config in your `vue.config.js` file:\n```javascript\nmodule.exports = {\n    chainWebpack: config =\u003e {\n        config.module\n            .rule('svg-sprite')\n            .use('svgo-loader')\n            .loader('svgo-loader');\n    }\n};\n```\n\n### Injected webpack-chain Rules\n\n- `config.module.rule('svg-sprite')`\n- `config.module.rule('svg-sprite').use('svg-sprite-loader')`\n- `config.plugin('svg-sprite')`\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information about what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) and [CODE_OF_CONDUCT](CODE_OF_CONDUCT.md) for details.\n\n### Security\n\nIf you discover any security related issues, please email security@swis.nl instead of using the issue tracker.\n\n## Credits\n\n- [Jasper Zonneveld](https://github.com/JaZo)\n- [All Contributors](../../contributors)\n\nThis package is a vue-cli 3 plugin wrapping [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader). Many thanks to [Stas Kurilov](https://github.com/kisenka) for his excellent package!\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n\nThis package is [Treeware](https://treeware.earth). If you use it in production, then we ask that you [**buy the world a tree**](https://plant.treeware.earth/swisnl/vue-cli-plugin-svg-sprite) to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.\n\n## SWIS :heart: Open Source\n\n[SWIS](https://www.swis.nl) is a web agency from Leiden, the Netherlands. We love working with open source software.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswisnl%2Fvue-cli-plugin-svg-sprite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswisnl%2Fvue-cli-plugin-svg-sprite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswisnl%2Fvue-cli-plugin-svg-sprite/lists"}