{"id":18335290,"url":"https://github.com/bhovhannes/svg-url-loader","last_synced_at":"2025-10-08T01:00:10.685Z","repository":{"id":1876919,"uuid":"45042398","full_name":"bhovhannes/svg-url-loader","owner":"bhovhannes","description":"A webpack loader which loads SVG file as utf-8 encoded DataUrl string.","archived":false,"fork":false,"pushed_at":"2025-05-11T13:09:27.000Z","size":2328,"stargazers_count":242,"open_issues_count":5,"forks_count":33,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-11T14:22:38.680Z","etag":null,"topics":["data-uri","svg","webpack-loader"],"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/bhovhannes.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,"zenodo":null}},"created_at":"2015-10-27T13:20:54.000Z","updated_at":"2025-05-11T13:09:18.000Z","dependencies_parsed_at":"2024-01-06T04:20:40.548Z","dependency_job_id":"7ab109c7-b540-460b-89de-37ae12efa3f4","html_url":"https://github.com/bhovhannes/svg-url-loader","commit_stats":{"total_commits":647,"total_committers":15,"mean_commits":43.13333333333333,"dds":0.401854714064915,"last_synced_commit":"a073271171b51e8c47b6694418c77b3d890742a2"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhovhannes%2Fsvg-url-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhovhannes%2Fsvg-url-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhovhannes%2Fsvg-url-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhovhannes%2Fsvg-url-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhovhannes","download_url":"https://codeload.github.com/bhovhannes/svg-url-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254110374,"owners_count":22016391,"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":["data-uri","svg","webpack-loader"],"created_at":"2024-11-05T19:54:34.360Z","updated_at":"2025-10-08T01:00:05.616Z","avatar_url":"https://github.com/bhovhannes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svg-url-loader\n\n[![NPM version][npm-version-image]][npm-url] [![NPM downloads][npm-downloads-image]][npm-url] [![codecov][codecov-image]][codecov-url] [![MIT License][license-image]][license-url]\n\nA webpack loader which loads SVG file as utf-8 encoded DataUrl string.\n\nExisting [`url-loader`](https://github.com/webpack-contrib/url-loader) always does Base64 encoding for data-uri. As SVG content is a human-readable xml string, using base64 encoding is not mandatory. Instead, one may only escape [unsafe characters](http://www.ietf.org/rfc/rfc1738.txt) and replace `\"` with `'` as described [in this article](http://codepen.io/Tigt/post/optimizing-svgs-in-data-uris).\n\nThere are some benefits for choosing utf-8 encoding over base64.\n\n1. Resulting string is shorter (can be ~2 times shorter for 2K-sized icons);\n2. Resulting string will be compressed better when using gzip compression;\n3. Browser parses utf-8 encoded string faster than its base64 equivalent.\n\n## Supported parameters\n\nParameters can be passed both in an url or from webpack config file. See [Loaders](https://webpack.js.org/concepts/loaders/) section in webpack documentation for more details.\n\nPassing parameters using `resourceQuery` is also supported:\n\n```css\n.selector {\n  background-image: url(../assets/foo.svg?encoding=base64);\n}\n```\n\nThe loader supports the following parameters:\n\n### `limit`\n\nIf given, loader will not encode the source file if its content is greater than this limit.\nDefaults to no limit.\nIf the file is greater than the limit the [`file-loader`](https://github.com/webpack-contrib/file-loader) is used, receiving all query parameters set for svg-url-loader.\n\n```javascript\nrequire(\"svg-url-loader?limit=1024!./file.svg\");\n// =\u003e DataUrl if \"file.png\" is smaller that 1kb\n\nrequire(\"svg-url-loader?prefix=img/!./file.svg\");\n// =\u003e Parameters for the file-loader are valid too\n//    They are passed to the file-loader if used.\n```\n\n### `stripdeclarations`\n\nThis option is true by default. **It will be removed in the next major release.**  \nSee [this issue](https://github.com/bhovhannes/svg-url-loader/issues/104#issuecomment-348377933) for more context about this decision.\n\nIf given will tell the loader to strip out any XML declaration, e.g. `\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e` at the beginning of imported SVGs.\nInternet Explorer (tested in Edge 14) cannot handle XML declarations in CSS data URLs (`content: url(\"data:image/svg...\")`).\n\n```javascript\nrequire(\"svg-url-loader?stripdeclarations!./file.svg\");\n```\n\n### `iesafe`\n\nThis option tells loader to fall back to the file-loader if the file contains a style-element and the encoded size is above 4kB no matter the `limit` specified.\n\nThis option was introduced because Internet Explorer (including IE11) stops parsing style-elements in SVG data-URIs longer than 4kB. This results in black fill-color for all styled shapes.\n\nYou can either specify `iesafe` option in the query:\n\n```javascript\n// apply `iesafe` option only for 'foo.svg'\nrequire(\"svg-url-loader?iesafe!./foo.svg\");\n```\n\nOr, you can set this option globally in you webpack config:\n\n```javascript\nmodule.exports = {\n  //...\n  module: {\n    rules: [\n      {\n        test: /\\.svg/,\n        use: {\n          loader: \"svg-url-loader\",\n          options: {\n            // make all svg images to work in IE\n            iesafe: true,\n          },\n        },\n      },\n    ],\n  },\n  //...\n};\n```\n\n### `encoding`\n\nThis option controls which encoding to use when constructing a data-URI for an SVG. When set to a non-\"none\" value, loader does not apply quotes to the resulting data-URI.\n\nPossible values are \"base64\" and \"none\". Defaults to \"none\".\n\nNormally, setting `encoding` option to `base64` _should not_ be required, as using base64 encoding defeats the original purpose of this loader - embed svg with minimal size overhead. However, because of incompatibility with some tools, we support this mode, too.\n\nYou can either specify `base64` option in the query:\n\n```javascript\n// apply `base64` option only for 'foo.svg'\nrequire(\"svg-url-loader?encoding=base64!./foo.svg\");\n```\n\nOr, you can set this option globally in you webpack config:\n\n```javascript\nmodule.exports = {\n  //...\n  module: {\n    rules: [\n      {\n        test: /\\.svg/,\n        use: {\n          loader: \"svg-url-loader\",\n          options: {\n            // make loader to behave like url-loader, for all svg files\n            encoding: \"base64\",\n          },\n        },\n      },\n    ],\n  },\n  //...\n};\n```\n\n## Usage\n\n[Documentation: Loaders](https://webpack.js.org/concepts/loaders/)\n\n### In JS:\n\n```javascript\nrequire(\"svg-url-loader!./file.svg\");\n// =\u003e DataUrl for file.svg\n```\n\n### In CSS (with webpack.config.js below):\n\n```css\n.icon {\n  background: url(\"../images/file.svg\");\n}\n```\n\n```javascript\nmodule.exports = {\n  //...\n  module: {\n    rules: [\n      {\n        test: /\\.svg/,\n        use: {\n          loader: \"svg-url-loader\",\n          options: {},\n        },\n      },\n    ],\n  },\n  //...\n};\n```\n\n## Benefits of using data-uri\n\n1. Browser won't make an extra http call to download the image\n2. Some folks [mentioned](https://github.com/bhovhannes/svg-url-loader/issues/341) that even if image is in browser cache images with data url appear on screen faster.\n\n## License\n\nMIT (http://www.opensource.org/licenses/mit-license.php)\n\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\n[license-url]: LICENSE\n[npm-url]: https://www.npmjs.org/package/svg-url-loader\n[npm-version-image]: https://img.shields.io/npm/v/svg-url-loader.svg?style=flat-square\n[npm-downloads-image]: https://img.shields.io/npm/dm/svg-url-loader.svg?style=flat-square\n[codecov-url]: https://codecov.io/gh/bhovhannes/svg-url-loader\n[codecov-image]: https://codecov.io/gh/bhovhannes/svg-url-loader/branch/master/graph/badge.svg?token=iJvUUKrgzB\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhovhannes%2Fsvg-url-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhovhannes%2Fsvg-url-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhovhannes%2Fsvg-url-loader/lists"}