{"id":13508533,"url":"https://github.com/JetBrains/svg-sprite-loader","last_synced_at":"2025-03-30T11:32:11.980Z","repository":{"id":35980279,"uuid":"40271714","full_name":"JetBrains/svg-sprite-loader","owner":"JetBrains","description":"Webpack loader for creating SVG sprites.","archived":false,"fork":false,"pushed_at":"2023-10-13T09:54:14.000Z","size":1848,"stargazers_count":2017,"open_issues_count":148,"forks_count":272,"subscribers_count":48,"default_branch":"master","last_synced_at":"2024-10-29T14:52:28.845Z","etag":null,"topics":["sprite","svg","svg-sprite","svg-stack","webpack","webpack-loader","webpack-plugin","webpack2","webpack3"],"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/JetBrains.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2015-08-05T22:23:53.000Z","updated_at":"2024-10-18T09:41:44.000Z","dependencies_parsed_at":"2024-06-18T11:14:53.213Z","dependency_job_id":null,"html_url":"https://github.com/JetBrains/svg-sprite-loader","commit_stats":{"total_commits":617,"total_committers":60,"mean_commits":"10.283333333333333","dds":0.2317666126418152,"last_synced_commit":"0663a7400430b345c154d67be5969faf612b2059"},"previous_names":["kisenka/webpack-svg-sprite-loader","kisenka/svg-sprite-loader"],"tags_count":125,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fsvg-sprite-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fsvg-sprite-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fsvg-sprite-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fsvg-sprite-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JetBrains","download_url":"https://codeload.github.com/JetBrains/svg-sprite-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245872129,"owners_count":20686325,"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":["sprite","svg","svg-sprite","svg-stack","webpack","webpack-loader","webpack-plugin","webpack2","webpack3"],"created_at":"2024-08-01T02:00:54.452Z","updated_at":"2025-03-30T11:32:06.970Z","avatar_url":"https://github.com/JetBrains.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","\u003e 1k ★"],"sub_categories":[],"readme":"[![obsolete JetBrains project](https://jb.gg/badges/obsolete.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)\n\n# SVG sprite loader\n[![NPM version][version-img]][versions-img] [![Build status][ci-img]][ci-url] [![Documentation score][docs-coverage-img]][docs-coverage-url] [![Dependencies status][deps-img]][deps-url] [![Dev dependencies status][dev-deps-img]][dev-deps-url] [![NPM downloads][downloads-img]][npm-url]\n\nWebpack loader for creating SVG sprites.\n\n\u003e :tada: 2.0 is out, please read the [migration guide \u0026 overview](2.0.md).\n\n\u003e :warning: For old v0.x versions see [the README in the v0 branch](https://github.com/JetBrains/svg-sprite-loader/blob/v0/README.md).\n\n## Table of contents\n\n- [Why it's cool](#why-its-cool)\n- [Installation](#installation)\n- [Configuration](#configuration)\n  - [`symbolId`](#symbol-id)\n  - [`symbolRegExp`](#symbol-regexp)\n  - [`esModule`](#es-module)\n  - [Runtime configuration](#runtime-configuration)\n    - [`spriteModule`](#sprite-module)\n    - [`symbolModule`](#symbol-module)\n    - [`runtimeGenerator`](#runtime-generator)\n    - [`runtimeCompat`](#runtime-compat) (deprecated)\n    - [`runtimeOptions`](#runtime-options)\n  - [Extract configuration](#extract-configuration)\n    - [`extract`](#extract)\n    - [`spriteFilename`](#sprite-filename)\n    - [`publicPath`](#public-path)\n    - [`outputPath`](#output-path)\n    - [`plainSprite`](#plain-sprite)\n    - [`spriteAttrs`](#sprite-attrs)\n- [Examples](#examples)\n- [Contributing guidelines](#contributing-guidelines)\n- [License](#license)\n- [Credits](#credits)\n\n## Why it's cool\n\n- **Minimum initial configuration**. Most of the options are configured automatically.\n- **Runtime for browser**. Sprites are rendered and injected in pages automatically, you just refer to images via `\u003csvg\u003e\u003cuse xlink:href=\"#id\"\u003e\u003c/use\u003e\u003c/svg\u003e`.\n- **Isomorphic runtime for node/browser**. Can render sprites on server or in browser manually.\n- **Customizable**. Write/extend runtime module to implement custom sprite behaviour. Write/extend runtime generator to produce your own runtime, e.g. React component configured with imported symbol.\n- **External sprite file** is generated for images imported from css/scss/sass/less/styl/html ([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-loader -D\n# via yarn\nyarn add svg-sprite-loader -D\n```\n\n## Configuration\n\n```js\n// webpack 1\n{\n  test: /\\.svg$/,\n  loader: 'svg-sprite-loader',\n  query: { ... }\n}\n\n// webpack 1 multiple loaders\n{\n  test: /\\.svg$/,\n  loaders: [\n    `svg-sprite-loader?${JSON.stringify({ ... })}`,\n    'svg-transform-loader',\n    'svgo-loader'\n  ]\n}\n\n// webpack \u003e= 2\n{\n  test: /\\.svg$/,\n  loader: 'svg-sprite-loader',\n  options: { ... }\n}\n\n// webpack \u003e= 2 multiple loaders\n{\n  test: /\\.svg$/,\n  use: [\n    { loader: 'svg-sprite-loader', options: { ... } },\n    'svg-transform-loader',\n    'svgo-loader'\n  ]\n}\n```\n\n\u003ca id=\"symbol-id\"\u003e\u003c/a\u003e\n### `symbolId` (`string | function(path, query)`, default `[name]`)\n\nHow `\u003csymbol\u003e` `id` attribute should be named. All patterns from [loader-utils#interpolateName](https://github.com/webpack/loader-utils#interpolatename)\nare supported. Also can be a function which accepts 2 args - file path and query string and return symbol id:\n\n```js\n{\n  symbolId: filePath =\u003e path.basename(filePath)\n}\n```\n\n\u003ca id=\"symbol-regexp\"\u003e\u003c/a\u003e\n### `symbolRegExp` (default `''`)\nPassed to the symbolId interpolator to support the [N] pattern in the loader-utils name interpolator\n\n\u003ca id=\"es-module\"\u003e\u003c/a\u003e\n### `esModule` (default `true`, autoconfigured)\n\nGenerated export format:\n- when `true` loader will produce `export default ...`.\n- when `false` the result is `module.exports = ...`.\n\nBy default depends on used webpack version: `true` for webpack \u003e= 2, `false` otherwise.\n\n## Runtime configuration\n\nWhen you require an image, loader transforms it to SVG `\u003csymbol\u003e`, adds it to the special sprite storage and returns class instance\nthat represents symbol. It contains `id`, `viewBox` and `content` (`id`, `viewBox` and `url` in extract mode)\nfields and can later be used for referencing the sprite image, e.g:\n\n```js\nimport twitterLogo from './logos/twitter.svg';\n// twitterLogo === SpriteSymbol\u003cid: string, viewBox: string, content: string\u003e\n// Extract mode: SpriteSymbol\u003cid: string, viewBox: string, url: string, toString: Function\u003e\n\nconst rendered = `\n\u003csvg viewBox=\"${twitterLogo.viewBox}\"\u003e\n  \u003cuse xlink:href=\"#${twitterLogo.id}\" /\u003e\n\u003c/svg\u003e`;\n```\n\nWhen browser event `DOMContentLoaded` is fired, sprite will be automatically rendered and injected in the `document.body`.\nIf custom behaviour is needed (e.g. a different mounting target) default sprite module could be overridden via `spriteModule` option. Check example below.\n\n\u003ca id=\"sprite-module\"\u003e\u003c/a\u003e\n### `spriteModule` (autoconfigured)\n\nPath to sprite module that will be compiled and executed at runtime.\nBy default it depends on [`target`](https://webpack.js.org/configuration/target) webpack config option:\n- `svg-sprite-loader/runtime/browser-sprite.build` for 'web' target.\n- `svg-sprite-loader/runtime/sprite.build` for other targets.\n\nIf you need custom behavior, use this option to specify a path of your sprite implementation module.\nPath will be resolved relative to the current webpack build folder, e.g. `utils/sprite.js` placed in current project dir should be written as `./utils/sprite`.\n\nExample of sprite with custom mounting target (copypasted from [browser-sprite](https://github.com/JetBrains/svg-sprite-loader/blob/master/runtime/browser-sprite.js)):\n\n```js\nimport BrowserSprite from 'svg-baker-runtime/src/browser-sprite';\nimport domready from 'domready';\n\nconst sprite = new BrowserSprite();\ndomready(() =\u003e sprite.mount('#my-custom-mounting-target'));\n\nexport default sprite; // don't forget to export!\n```\n\nIt's highly recommended to extend default sprite classes:\n- [for browser-specific env](https://github.com/JetBrains/svg-baker/blob/master/packages/svg-baker-runtime/src/browser-sprite.js)\n- [for isomorphic env](https://github.com/JetBrains/svg-baker/blob/master/packages/svg-baker-runtime/src/sprite.js)\n\n\u003ca id=\"symbol-module\"\u003e\u003c/a\u003e\n### `symbolModule` (autoconfigured)\n\nSame as `spriteModule`, but for sprite symbol. By default also depends on `target` webpack config option:\n- `svg-baker-runtime/browser-symbol` for 'web' target.\n- `svg-baker-runtime/symbol` for other targets.\n\n\u003ca id=\"runtime-generator\"\u003e\u003c/a\u003e\n### `runtimeGenerator` ([default generator](https://github.com/JetBrains/svg-sprite-loader/blob/master/lib/runtime-generator.js))\n\nPath to node.js script that generates client runtime.\nUse this option if you need to produce your own runtime, e.g. React component configured with imported symbol. [Example](https://github.com/JetBrains/svg-sprite-loader/tree/master/examples/custom-runtime-generator).\n\n\u003ca id=\"runtime-compat\"\u003e\u003c/a\u003e\n### `runtimeCompat` (default `false`, deprecated)\n\nShould runtime be compatible with earlier v0.x loader versions. This option will be removed in the next major version release.\n\n\u003ca id=\"runtime-options\"\u003e\u003c/a\u003e\n### `runtimeOptions`\n\nArbitrary data passed to runtime generator. Reserved for future use when other runtime generators will be created.\n\n## Extract configuration\n\nIn the extract mode loader should be configured with plugin, otherwise an error is thrown. Example:\n\n```js\n// webpack.config.js\nconst SpriteLoaderPlugin = require('svg-sprite-loader/plugin');\n\n...\n\n{\n  plugins: [\n    new SpriteLoaderPlugin()\n  ]\n}\n```\n\n\u003ca id=\"extract\"\u003e\u003c/a\u003e\n### `extract` (default `false`, autoconfigured)\n\nSwitches loader to the extract mode.\nEnabled automatically for images imported from css/scss/sass/less/styl/html files.\n\n\u003ca id=\"sprite-filename\"\u003e\u003c/a\u003e\n### `spriteFilename` (type `string|Function\u003cstring\u003e`,default `sprite.svg`)\n\nFilename of extracted sprite. Multiple sprites can be generated by specifying different loader rules restricted with `include` option or\nby providing custom function which recieves SVG file absolute path, e.g.:\n\n```js\n{\n  test: /\\.svg$/,\n  loader: 'svg-sprite-loader',\n  options: {\n    extract: true,\n    spriteFilename: svgPath =\u003e `sprite${svgPath.substr(-4)}`\n  }\n}\n```\n\n`[hash]` in sprite filename will be replaced by it's content hash.\nIt is also possible to generate sprite for each chunk by using `[chunkname]` pattern in spriteFilename option. This is experimental feature, use it with caution!\n\n\u003ca id=\"public-path\"\u003e\u003c/a\u003e\n### `publicPath` (type: `string`, default: `__webpack_public_path__`)\n\nCustom public path for sprite file.\n\n```js\n{\n  test: /\\.svg$/,\n  loader: 'svg-sprite-loader',\n  options: {\n    extract: true,\n    publicPath: '/'\n  }\n}\n```\n\n\u003ca id=\"output-path\"\u003e\u003c/a\u003e\n### `outputPath` (type: `string`, default: null`)\n\nCustom output path for sprite file.\nBy default it will use `publicPath`.\nThis param is useful if you want to store sprite is a directory with a custom http access.\n\n```js\n{\n  test: /\\.svg$/,\n  loader: 'svg-sprite-loader',\n  options: {\n    extract: true,\n    outputPath: 'custom-dir/sprites/'\n    publicPath: 'sprites/'\n  }\n}\n```\n\n\u003ca id=\"plain-sprite\"\u003e\u003c/a\u003e\n### Plain sprite\n\nYou can render plain sprite in extract mode without styles and usages. Pass `plainSprite: true` option to plugin constructor:\n\n```js\n{\n  plugins: [\n    new SpriteLoaderPlugin({ plainSprite: true })\n  ]\n}\n```\n\n\u003ca id=\"sprite-attrs\"\u003e\u003c/a\u003e\n### Sprite attributes\n\nSprite `\u003csvg\u003e` tag attributes can be specified via `spriteAttrs` plugin option:\n\n```js\n{\n  plugins: [\n    new SpriteLoaderPlugin({\n      plainSprite: true,\n      spriteAttrs: {\n        id: 'my-custom-sprite-id'\n      }\n    })\n  ]\n}\n```\n\n## Examples\n\nSee [examples](examples) folder.\n\n## Contributing guidelines\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## License\n\nSee [LICENSE](LICENSE)\n\n## Credits\n\nHuge thanks for [all this people](https://github.com/JetBrains/svg-sprite-loader/graphs/contributors).\n\n[npm-url]: https://www.npmjs.com/package/svg-sprite-loader\n[version-img]: https://img.shields.io/npm/v/svg-sprite-loader.svg?style=flat-square\n[versions-img]: https://libraries.io/npm/svg-sprite-loader/versions\n[downloads-img]: https://img.shields.io/npm/dm/svg-sprite-loader.svg?style=flat-square\n[deps-url]: https://david-dm.org/JetBrains/svg-sprite-loader\n[deps-img]: https://img.shields.io/david/JetBrains/svg-sprite-loader.svg?style=flat-square\n[dev-deps-url]: https://david-dm.org/JetBrains/svg-sprite-loader?type=dev\n[dev-deps-img]: https://img.shields.io/david/dev/JetBrains/svg-sprite-loader.svg?style=flat-square\n[ci-url]: https://travis-ci.org/JetBrains/svg-sprite-loader\n[ci-img]: https://img.shields.io/travis/JetBrains/svg-sprite-loader.svg?style=flat-square\n[docs-coverage-url]: https://inch-ci.org/github/JetBrains/svg-sprite-loader\n[docs-coverage-img]: https://inch-ci.org/github/JetBrains/svg-sprite-loader.svg?branch=master\u0026style=flat-square\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJetBrains%2Fsvg-sprite-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJetBrains%2Fsvg-sprite-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJetBrains%2Fsvg-sprite-loader/lists"}