{"id":15065713,"url":"https://github.com/webpack-contrib/svg-inline-loader","last_synced_at":"2025-10-05T02:31:30.445Z","repository":{"id":28925618,"uuid":"32451145","full_name":"webpack-contrib/svg-inline-loader","owner":"webpack-contrib","description":"Inline SVG loader with cleaning-up functionality","archived":true,"fork":false,"pushed_at":"2020-10-09T11:55:34.000Z","size":216,"stargazers_count":490,"open_issues_count":36,"forks_count":59,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-05-21T15:14:23.689Z","etag":null,"topics":["svg","webpack-loader"],"latest_commit_sha":null,"homepage":null,"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/webpack-contrib.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-18T10:02:17.000Z","updated_at":"2024-02-05T01:34:35.000Z","dependencies_parsed_at":"2022-09-01T04:01:54.657Z","dependency_job_id":null,"html_url":"https://github.com/webpack-contrib/svg-inline-loader","commit_stats":null,"previous_names":["sairion/svg-inline-loader"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fsvg-inline-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fsvg-inline-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fsvg-inline-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fsvg-inline-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack-contrib","download_url":"https://codeload.github.com/webpack-contrib/svg-inline-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235033797,"owners_count":18925499,"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":["svg","webpack-loader"],"created_at":"2024-09-25T00:46:11.779Z","updated_at":"2025-10-05T02:31:25.120Z","avatar_url":"https://github.com/webpack-contrib.png","language":"JavaScript","readme":"[![npm][npm]][npm-url]\n[![deps][deps]][deps-url]\n[![test][test]][test-url]\n[![coverage][cover]][cover-url]\n[![chat][chat]][chat-url]\n\n# ! NO LONGER MAINTAINED !\n\nThis module is deprecated and will no longer be maintained.\n\nIn most cases, you can replace the functionality by using [`raw-loader`](https://github.com/webpack-contrib/raw-loader) and [`image-minimizer-webpack-plugin`](https://github.com/webpack-contrib/image-minimizer-webpack-plugin) instead:\n\n**webpack.config.js**\n\n```js\nconst ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.svg$/,\n        use: [\n          {\n            loader: \"raw-loader\"\n          }\n        ]\n      },\n    ],\n  },\n  plugins: [\n    new ImageMinimizerPlugin({\n      minimizerOptions: {\n        plugins: [\n          [\n            'imagemin-svgo',\n            {\n              plugins: [\n                // SVGO options is here \"https://github.com/svg/svgo#what-it-can-do\"\n                {\n                  removeViewBox: false,\n                  removeXMLNS: true,\n                },\n              ],\n            },\n          ],\n        ],\n      },\n    }),\n  ],\n};\n```\n\nFor optimization svg use [`imagemin-svgo`](https://github.com/imagemin/imagemin-svgo).\n\n\n\u003cdiv align=\"center\"\u003e\n  \u003c!-- replace with accurate logo e.g from https://worldvectorlogo.com/ --\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\" vspace=\"\" hspace=\"25\"\n      src=\"https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg\"\u003e\n  \u003c/a\u003e\n  \u003ch1\u003eSVG Inline Loader for Webpack\u003c/h1\u003e\n  \u003cp\u003eThis Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too.\u003cp\u003e\n\u003c/div\u003e\n\n\u003ch2 align=\"center\"\u003eInstall\u003c/h2\u003e\n\n```bash\nnpm install svg-inline-loader --save-dev\n```\n\n\u003ch2 align=\"center\"\u003eConfiguration\u003c/h2\u003e\n\nSimply add configuration object to `module.loaders` like this.\n\n```javascript\n    {\n        test: /\\.svg$/,\n        loader: 'svg-inline-loader'\n    }\n```\n\nwarning: You should configure this loader only once via `module.loaders` or `require('!...')`. See [#15](https://github.com/webpack-contrib/svg-inline-loader/issues/15) for detail.\n\n\u003ch2 align=\"center\"\u003eQuery Options\u003c/h2\u003e\n\n#### `removeTags: boolean`\n\nRemoves specified tags and its children. You can specify tags by setting `removingTags` query array.\n\ndefault: `removeTags: false`\n\n#### `removingTags: [...string]`\n\nwarning: this won't work unless you specify `removeTags: true`\n\ndefault: `removingTags: ['title', 'desc', 'defs', 'style']`\n\n#### `warnTags: [...string]`\n\nwarns about tags, ex: ['desc', 'defs', 'style']\n\ndefault: `warnTags: []`\n\n#### `removeSVGTagAttrs: boolean`\n\nRemoves `width` and `height` attributes from `\u003csvg /\u003e`.\n\ndefault: `removeSVGTagAttrs: true`\n\n#### `removingTagAttrs: [...string]`\n\nRemoves attributes from inside the `\u003csvg /\u003e`.\n\ndefault: `removingTagAttrs: []`\n\n#### `warnTagAttrs: [...string]`\n\nWarns to console about attributes from inside the `\u003csvg /\u003e`.\n\ndefault: `warnTagAttrs: []`\n#### `classPrefix: boolean || string`\n\nAdds a prefix to class names to avoid collision across svg files.\n\ndefault: `classPrefix: false`\n\n#### `idPrefix: boolean || string`\n\nAdds a prefix to ids to avoid collision across svg files.\n\ndefault: `idPrefix: false`\n\n\u003ch2 align=\"center\"\u003eExample Usage\u003c/h2\u003e\n\n```js\n// Using default hashed prefix (__[hash:base64:7]__)\nvar logoTwo = require('svg-inline-loader?classPrefix!./logo_two.svg');\n\n// Using custom string\nvar logoOne = require('svg-inline-loader?classPrefix=my-prefix-!./logo_one.svg');\n\n// Using custom string and hash\nvar logoThree = require('svg-inline-loader?classPrefix=__prefix-[sha512:hash:hex:5]__!./logo_three.svg');\n```\nSee [loader-utils](https://github.com/webpack/loader-utils#interpolatename) for hash options.\n\nPreferred usage is via a `module.loaders`:\n```js\n    {\n        test: /\\.svg$/,\n        loader: 'svg-inline-loader?classPrefix'\n    }\n```\n\n\u003ch2 align=\"center\"\u003eMaintainers\u003c/h2\u003e\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg width=\"150\" height=\"150\"\n        src=\"https://avatars3.githubusercontent.com/u/166921?v=3\u0026s=150\"\u003e\n        \u003c/br\u003e\n        \u003ca href=\"https://github.com/bebraw\"\u003eJuho Vepsäläinen\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg width=\"150\" height=\"150\"\n        src=\"https://avatars2.githubusercontent.com/u/8420490?v=3\u0026s=150\"\u003e\n        \u003c/br\u003e\n        \u003ca href=\"https://github.com/d3viant0ne\"\u003eJoshua Wiens\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg width=\"150\" height=\"150\"\n        src=\"https://avatars3.githubusercontent.com/u/533616?v=3\u0026s=150\"\u003e\n        \u003c/br\u003e\n        \u003ca href=\"https://github.com/SpaceK33z\"\u003eKees Kluskens\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg width=\"150\" height=\"150\"\n        src=\"https://avatars3.githubusercontent.com/u/3408176?v=3\u0026s=150\"\u003e\n        \u003c/br\u003e\n        \u003ca href=\"https://github.com/TheLarkInn\"\u003eSean Larkin\u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003ctbody\u003e\n\u003c/table\u003e\n\n[npm]: https://img.shields.io/npm/v/svg-inline-loader.svg\n[npm-url]: https://npmjs.com/package/svg-inline-loader\n\n[deps]: https://david-dm.org/webpack-contrib/svg-inline-loader.svg\n[deps-url]: https://david-dm.org/webpack-contrib/svg-inline-loader\n\n[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg\n[chat-url]: https://gitter.im/webpack/webpack\n\n[test]: https://travis-ci.org/webpack-contrib/svg-inline-loader.svg?branch=master\n[test-url]: https://travis-ci.org/webpack-contrib/svg-inline-loader\n\n[cover]: https://codecov.io/gh/webpack-contrib/svg-inline-loader/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/svg-inline-loader\n","funding_links":[],"categories":["Handling SVG"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fsvg-inline-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack-contrib%2Fsvg-inline-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fsvg-inline-loader/lists"}