{"id":18681714,"url":"https://github.com/stowball/webpack-svg-icon-system","last_synced_at":"2025-04-12T04:09:42.925Z","repository":{"id":143928438,"uuid":"83387649","full_name":"stowball/webpack-svg-icon-system","owner":"stowball","description":"A loader and plugin for webpack that converts all your SVGs into symbols and merges them into a SVG sprite.","archived":false,"fork":false,"pushed_at":"2019-04-25T11:18:17.000Z","size":107,"stargazers_count":10,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T04:09:37.047Z","etag":null,"topics":["icon","javascript","svg","webpack"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/webpack-svg-icon-system","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/stowball.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2017-02-28T04:00:58.000Z","updated_at":"2022-11-22T09:31:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"db862e78-7225-413c-aa15-5d2f7393463c","html_url":"https://github.com/stowball/webpack-svg-icon-system","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Fwebpack-svg-icon-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Fwebpack-svg-icon-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Fwebpack-svg-icon-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Fwebpack-svg-icon-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stowball","download_url":"https://codeload.github.com/stowball/webpack-svg-icon-system/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248514222,"owners_count":21116903,"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":["icon","javascript","svg","webpack"],"created_at":"2024-11-07T10:08:50.830Z","updated_at":"2025-04-12T04:09:42.906Z","avatar_url":"https://github.com/stowball.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-svg-icon-system\n\n[![npm version](https://badge.fury.io/js/webpack-svg-icon-system.svg)](https://badge.fury.io/js/webpack-svg-icon-system)\n[![Build Status](https://travis-ci.org/stowball/webpack-svg-icon-system.svg?branch=master)](https://travis-ci.org/stowball/webpack-svg-icon-system)\n\nA loader and plugin for webpack that converts all your SVGs into symbols and merges them into a SVG sprite.\n\nThis is a simpler fork of [Karify's external-svg-sprite-loader](https://github.com/Karify/external-svg-sprite-loader).\n\n## Requirements\n\nYou will need NodeJS v6+, npm v3+ and webpack 2.\n\nTo make it work in older browsers, like Internet Explorer, you will also need [SVG for Everybody](https://github.com/jonathantneal/svg4everybody) or [svgxuse](https://github.com/Keyamoon/svgxuse).\n\n## Installation\n\n```bash\nnpm i webpack-svg-icon-system\n```\n\n## Options\n\n### Loader options\n\n- `name` - relative path to the sprite file (default: `img/sprite.svg`). The `[hash]` placeholder is supported.\n- `prefix` - value to be prefixed to the icon's name (default: `icon`).\n- `suffix` - value to be suffixed to the icon's name (default: `''`). The `[hash]` placeholder is supported.\n- `svgoOptions` - custom options to be passed to svgo.\n\n### Plugin options\n\n- `emit` - determines if the sprite is supposed to be emitted (default: true). Useful when generating server rendering bundles where you just need the SVG sprite URLs but not the sprite itself.\n\n## Usage\n\n### Configure\n\nIf you have the following webpack configuration:\n\n```js\n// webpack.config.js\n\nimport path from 'path';\nimport SvgStorePlugin from 'webpack-svg-icon-system/lib/SvgStorePlugin';\n\nmodule.exports = {\n    module: {\n        rules: [\n            {\n                loader: 'webpack-svg-icon-system',\n                test: /\\.svg$/,\n                options: {\n                  // override default options\n                },\n            },\n        ],\n    },\n    output: {\n        path: path.resolve(__dirname, 'public'),\n        publicPath: '/',\n    },\n    plugins: [\n        new SvgStorePlugin(),\n    ],\n};\n```\n\n### Import the SVGs\n\nImport (export) the SVGs you wish to combine in to the sprite in your JavaScript like so:\n\n```js\nexport logoFacebook from './assets/svg/icons/logo-facebook.svg';\nexport logoInstagram from './assets/svg/icons/logo-instagram.svg';\n```\n\n### Add your sprite to the DOM\n\n```js\n(function(path, baseUrl) {\n  var id = 'svg';\n  var xhr = new XMLHttpRequest;\n  var body = document.body;\n  var div = document.createElement('div');\n  var base = baseUrl || window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');\n  var url = base + path;\n\n  if (div.id = id, body.insertBefore(div, body.childNodes[0]), 'withCredentials' in xhr) {\n    xhr.withCredentials;\n    xhr.open('GET', url, true);\n  }\n  else {\n    if (typeof XDomainRequest == 'undefined') {\n      return void(body.className += ' no-svg');\n    }\n\n    xhr = new XDomainRequest;\n    xhr.open('GET', url);\n  }\n\n  xhr.onload = function() {\n    div.className = 'u-visually-hidden';\n    div.innerHTML = xhr.responseText;\n  };\n\n  xhr.onerror = function() {\n    body.className += ' no-svg';\n  };\n\n  setTimeout(function() {\n    xhr.send();\n  }, 0);\n})('/img/sprite.svg');\n```\n\n### \u003cuse\u003e in your markup\n\n```html\n\u003csvg role=\"img\"\u003e\n  \u003cuse xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"#svg-{{ name }}\"/\u003e\n\u003c/svg\u003e\n\n```\n\n## Contributing\n\nFirst of all, **thank you** for contributing, **you are awesome**.\n\nHere are a few rules to follow in order to ease code reviews, and discussions before maintainers accept and merge your work:\n\n- Make sure your commit messages make sense (don't use `fix tests`, `small improvement`, `fix 2`, among others).\n- Before creating a pull request make sure of the following:\n    - your code is all documented properly;\n    - your code passes the ESLint rules;\n    - variable, function and class names are explanatory enough;\n    - code is written in ES2015.\n- When creating a pull request give it a name and description that are explanatory enough. In the description detail everything you are adding, do not assume we will understand it from the code.\n\nThank you!\n\n---\n\nCopyright (c) 2017 [Matt Stow](http://mattstow.com)  \nLicensed under the MIT license *(see [LICENSE](https://github.com/stowball/react-accessible-tabs/blob/master/LICENSE) for details)*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstowball%2Fwebpack-svg-icon-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstowball%2Fwebpack-svg-icon-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstowball%2Fwebpack-svg-icon-system/lists"}