{"id":46633204,"url":"https://github.com/vadymshymko/svg-sprite-generation-loader","last_synced_at":"2026-03-08T00:32:28.384Z","repository":{"id":36957253,"uuid":"500108908","full_name":"vadymshymko/svg-sprite-generation-loader","owner":"vadymshymko","description":"Webpack loader for generating svg sprites","archived":false,"fork":false,"pushed_at":"2026-03-02T07:54:30.000Z","size":665,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-02T11:54:15.111Z","etag":null,"topics":["svg","svg-icons","svg-loader","svg-loaders","svg-sprite","svg-sprite-icon","svg-sprite-loader","svg-sprite-symbols","svg-sprites","svg-spritesheet","webpack","webpack-loader","webpack-svg","webpack-svg-plugin"],"latest_commit_sha":null,"homepage":"https://github.com/vadymshymko/svg-sprite-generation-loader","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/vadymshymko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-06-05T13:43:03.000Z","updated_at":"2026-03-02T07:54:33.000Z","dependencies_parsed_at":"2026-02-09T21:05:13.465Z","dependency_job_id":null,"html_url":"https://github.com/vadymshymko/svg-sprite-generation-loader","commit_stats":{"total_commits":74,"total_committers":2,"mean_commits":37.0,"dds":"0.41891891891891897","last_synced_commit":"4db61bd629a0bca9b57c9130835f9954fcd8c18f"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"purl":"pkg:github/vadymshymko/svg-sprite-generation-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Fsvg-sprite-generation-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Fsvg-sprite-generation-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Fsvg-sprite-generation-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Fsvg-sprite-generation-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vadymshymko","download_url":"https://codeload.github.com/vadymshymko/svg-sprite-generation-loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Fsvg-sprite-generation-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30238879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T00:30:53.000Z","status":"ssl_error","status_checked_at":"2026-03-08T00:30:44.061Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["svg","svg-icons","svg-loader","svg-loaders","svg-sprite","svg-sprite-icon","svg-sprite-loader","svg-sprite-symbols","svg-sprites","svg-spritesheet","webpack","webpack-loader","webpack-svg","webpack-svg-plugin"],"created_at":"2026-03-08T00:32:27.284Z","updated_at":"2026-03-08T00:32:28.356Z","avatar_url":"https://github.com/vadymshymko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svg-sprite-generation-loader\n\n[![npm version](https://img.shields.io/npm/v/svg-sprite-generation-loader)](https://www.npmjs.com/package/svg-sprite-generation-loader)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/vadymshymko/svg-sprite-generation-loader/blob/master/LICENSE)\n\nWebpack loader for generating external svg symbol sprite files\n\n## Table of contents\n\n- [How it works?](#how-it-works)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Options](#options)\n\n## How it works?\n\nsvg-sprite-generation-loader is a webpack-loader that takes a multiple svg files, optimize them (using [svgo.optimize](https://github.com/svg/svgo#optimize)), transform (parse and return as an object with `symbolId`, `attributes` and `content` (disabled by default) keys) and put them back in one file.\n\nInput multiple svg files, e.g:\n\n```html\n\u003c!-- file1.svg --\u003e\n\u003csvg viewBox=\"0 0 10 10\"\u003e\n \u003c!-- file1.svg content --\u003e\n\u003c/svg\u003e\n\n\u003c!-- file2.svg --\u003e\n\u003csvg viewBox=\"0 0 10 30\"\u003e\n \u003c!-- file2.svg content --\u003e\n\u003c/svg\u003e\n\n\u003c!-- file3.svg --\u003e\n\u003csvg viewBox=\"0 0 15 40\"\u003e\n \u003c!-- file3.svg content --\u003e\n\u003c/svg\u003e\n```\n\nOutput one svg file (svg sprite):\n\n```html\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\"\u003e\n \u003csymbol viewBox=\"0 0 10 10\" id=\"file1\"\u003e\n \u003c!-- file1.svg content --\u003e\n \u003c/symbol\u003e\n\n \u003csymbol viewBox=\"0 0 10 30\" id=\"file2\"\u003e\n \u003c!-- file1.svg content --\u003e\n \u003c/symbol\u003e\n\n \u003csymbol viewBox=\"0 0 15 40\" id=\"file3\"\u003e\n \u003c!-- file3.svg content --\u003e\n \u003c/symbol\u003e\n\u003c/svg\u003e\n```\n\nYou can refer to this file to display all your icons using [SVG stacking technique](https://css-tricks.com/svg-fragment-identifiers-work/#article-header-id-4)\n\n## Installation:\n\n```bash\nnpm install svg-sprite-generation-loader --save-dev\n```\n\n**yarn**\n\n```bash\nyarn add svg-sprite-generation-loader --dev\n```\n\n**pnpm**\n\n```bash\npnpm add svg-sprite-generation-loader --save--dev\n```\n\n## Usage:\n\nIn your webpack config:\n\n```javascript\nconst SvgSpriteGenerationPlugin = require('svg-sprite-generation-loader/plugin.js');\n\nmodule.exports = {\n plugins: [new SvgSpriteGenerationPlugin()],\n module: {\n rules: [\n {\n test: /\\.svg$/,\n use: 'svg-sprite-generation-loader',\n },\n ],\n },\n};\n```\n\nIn some source code:\n\n```jsx\nimport iconData from 'path/to/some/icon-file-name.svg';\n\n// by default iconData will include symbolId and attributes keys.\n// If you enable the addContent loader option, the `content` key will also be added\n\n\u003csvg {...iconData.attributes}\u003e\n \u003cuse href={`path/to/sprite/filename.svg#${iconData.symbolId}`} /\u003e\n\u003c/svg\u003e;\n```\n\n## Options\n\n| Name | Type | Default value | Description |\n| -------------- | -------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| symbolId | `string`\u0026nbsp;\\|\u0026nbsp;`function` | `\"[name]\"` | Sprite item (single icon) `\u003csymbol\u003e`\u0026nbsp;`id` attribute value.\u003cbr /\u003e`string` or `function` that takes the file path of the original icon as an argument and returns `string`.\u003cbr /\u003e\u003cbr /\u003eYou can use [interpolateName](https://github.com/webpack/loader-utils#interpolatename) patterns.\u003cbr /\u003e Default value (`\"[name]\"`) is equal to icon filename (without extension). For example, by default symbolId for `file1.svg` file will be `file1` |\n| spriteFilePath | `string` | `sprite.svg` | Path to sprite file.\u003cbr /\u003e `webpack.output.path` is included. You can use [interpolateName](https://github.com/webpack/loader-utils#interpolatename) patterns. |\n| svgoOptimize | `boolean` \\| `object` | `true` | Enable/Disable/Customize source svg file optimization with [svgo.optimize](https://github.com/svg/svgo#optimize). The following options are used by default: \u003cbr /\u003e\u003cpre\u003e`{`\u003cbr /\u003e\u0026nbsp;\u0026nbsp;`plugins: [`\u003cbr /\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`{`\u003cbr /\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`name: 'preset-default',`\u003cbr /\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`params: {`\u003cbr /\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`overrides: {`\u003cbr /\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`removeViewBox: false,`\u003cbr /\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`},`\u003cbr /\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`},`\u003cbr /\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`},`\u003cbr /\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`'removeXMLNS',`\u003cbr /\u003e\u0026nbsp;\u0026nbsp;`],`\u003cbr /\u003e`}`\u003c/pre\u003e You can disable it completely (by passing `false`) or use your own configuration (see [svgo docs](https://github.com/svg/svgo#optimize)) |\n| **addContent** | `boolean` | `false` | Add svg content as property to transformed svg object (may increase bundle size when enabled) |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadymshymko%2Fsvg-sprite-generation-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvadymshymko%2Fsvg-sprite-generation-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadymshymko%2Fsvg-sprite-generation-loader/lists"}