{"id":15130339,"url":"https://github.com/sirsayed98/simple-svg-sprite","last_synced_at":"2025-06-11T03:34:51.395Z","repository":{"id":257721859,"uuid":"858614397","full_name":"sirSayed98/simple-svg-sprite","owner":"sirSayed98","description":"A Webpack plugin that generates a SVG sprite","archived":false,"fork":false,"pushed_at":"2024-09-30T19:47:15.000Z","size":6,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-30T17:34:15.132Z","etag":null,"topics":["images","loaders","optimization","performance","plugins","sprite-map","sprites","svg","svg-icons","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sirSayed98.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-09-17T08:14:04.000Z","updated_at":"2024-11-12T07:23:18.000Z","dependencies_parsed_at":"2024-09-18T20:47:38.436Z","dependency_job_id":null,"html_url":"https://github.com/sirSayed98/simple-svg-sprite","commit_stats":null,"previous_names":["sirsayed98/sir-svg-sprite","sirsayed98/simple-svg-sprite"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sirSayed98%2Fsimple-svg-sprite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sirSayed98%2Fsimple-svg-sprite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sirSayed98%2Fsimple-svg-sprite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sirSayed98%2Fsimple-svg-sprite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sirSayed98","download_url":"https://codeload.github.com/sirSayed98/simple-svg-sprite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237793824,"owners_count":19367421,"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":["images","loaders","optimization","performance","plugins","sprite-map","sprites","svg","svg-icons","webpack"],"created_at":"2024-09-26T02:45:57.526Z","updated_at":"2025-02-08T10:31:05.031Z","avatar_url":"https://github.com/sirSayed98.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# simple-svg-sprite\n\nA Webpack plugin for creating an SVG sprite from individual SVG files.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Options](#options)\n- [Change reference](#change-reference)\n- [Demo](#demo)\n---\n\n## Installation\n\nInstall `simple-svg-sprite` using npm or yarn as a dev dependency:\n\n```\nnpm install --save-dev simple-svg-sprite\n```\nOR\n```\nyarn add --dev simple-svg-sprite\n```\n## Usage\n\nHere's how to use the plugin in your Webpack configuration:\n```\n// import package \nconst { SimpleSVGSprite, GenerateSVGContentHash } = require('simple-svg-sprite');\nconst svgContentHash = GenerateSVGContentHash('path/to/svgs/folder')\n\nmodule.exports = {\n   // ... other webpack config \n   plugins: [ \n   new SimpleSVGSprite({\n      svgFolderPath: 'path/to/svgs/folder',\n      spriteOutput: spritemap.${svgContentHash}.svg,\n    }),\n  ] \n};\n```\n\n## Options\n\n| Option | Required | Description | Default\n|--------|----------|-------------|---------\n| `svgFolderPath` | **Yes** | The path to SVG images folder | -\n| `spriteOutput` | **NO** | The output sprite name | `\"spritemap.svg\"`\n| `prefix` | **NO** | Prefix to each symbol ID  | `\"shape-\"`\n| `svgoOptions` |**NO** | Custom optimization using SVGO library | `{}`\n\n## Change reference \nwe need to convert reference from your code to sprite refrence \nexample:\n```\n// your code \n\u003csvg\u003e\n  \u003cuse xlink:href=\"#shape-sp-delete\" /\u003e\n\u003c/svg\u003e\n// to\n\u003csvg\u003e\n  \u003cuse xlink:href=\"spritemap.${svgContentHash}.svg#shape-sp-delete\" /\u003e\n\u003c/svg\u003e\n```\n- You don't need to update your code base to this format , you can use [Mutation observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to do that `OR` use custom loader:\n\n```\n// add this rule to your loaders\n{\n        test: /\\.(js|html)$/,\n        exclude: [/node_modules/],\n        use: {\n          loader: path.resolve(__dirname, './custom-loaders/EditSvgHrefLoader'),\n          options: {\n            svgFileName: `spritemap.${svgContentHash}.svg`,\n            prefix: 'shape-',\n          },\n        },\n},\n\n// create EditSvgHrefLoader.js file in custom-loaders folder\ncustom-loaders/EditSvgHrefLoader.js\n\nconst loaderUtils = require('loader-utils');\nmodule.exports = function (source) {\n  const { svgFileName, prefix } = loaderUtils.getOptions(this);\n\n  const modifiedSource = source.replace(\n    new RegExp(`#${prefix}`, 'g'),\n    `${svgFileName}#${prefix}`\n  );\n\n  return modifiedSource;\n};\n```\n## Demo\nYou can see demo [here](https://codesandbox.io/p/github/sirSayed98/simple-svg-sprite-example/main).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsirsayed98%2Fsimple-svg-sprite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsirsayed98%2Fsimple-svg-sprite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsirsayed98%2Fsimple-svg-sprite/lists"}