{"id":20591,"library":"svg-inline-loader","title":"SVG Inline Loader","description":"A Webpack loader that inlines SVG files as modules while removing unnecessary metadata (e.g., from Adobe Suite or Sketch). The latest stable version is 0.8.2, last released in 2017. It offers query options to strip tags, attributes, and add CSS class/id prefixes to avoid collisions. Key differentiators: built-in sanitization of exported SVGs, configurable removal and prefixing, and seamless integration with Webpack 1/2. However, it is unmaintained and does not support Webpack 5; alternatives like @svgr/webpack are recommended for modern projects.","status":"maintenance","version":"0.8.2","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/sairion/svg-inline-loader","tags":["javascript","svg","webpack","react","loader"],"install":[{"cmd":"npm install svg-inline-loader","lang":"bash","label":"npm"},{"cmd":"yarn add svg-inline-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add svg-inline-loader","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is a Webpack loader, not a standard import. Configure in webpack.config.js via module.rules.","wrong":"import svgInlineLoader from 'svg-inline-loader'","symbol":"default (loader)","correct":"module.exports = { test: /\\.svg$/, loader: 'svg-inline-loader' }"},{"note":"Inline requires must include the loader prefix. Alternatively, configure in webpack rules and use normal require.","wrong":"var logo = require('./logo.svg');","symbol":"require (runtime usage)","correct":"var logo = require('svg-inline-loader?classPrefix!./logo.svg');"},{"note":"When the loader is configured in webpack config, a plain import works. The ! syntax is for inline requires only.","wrong":"import logo from 'svg-inline-loader!./logo.svg';","symbol":"ESM import (with loader configured)","correct":"import logo from './logo.svg';"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n    module: {\n        rules: [\n            {\n                test: /\\.svg$/,\n                loader: 'svg-inline-loader',\n                options: {\n                    removeTags: true,\n                    removingTags: ['title', 'desc', 'defs', 'style'],\n                    removeSVGTagAttrs: true,\n                    classPrefix: true\n                }\n            }\n        ]\n    }\n};","lang":"javascript","description":"Webpack configuration to inline SVGs, removing common tags and attributes, and adding automatic class prefix to avoid collisions."},"warnings":[{"fix":"Upgrade to a maintained loader like @svgr/webpack or use svg-url-loader for Webpack 5.","message":"Webpack 4/5 compatibility: svg-inline-loader only supports Webpack <=3. It may break with Webpack 4+.","severity":"breaking","affected_versions":">=0.8.0"},{"fix":"Configure the loader in webpack.config.js under module.rules. Avoid inline loader prefixes.","message":"Loader configuration via require('!...') is deprecated. Use module.rules in webpack config instead.","severity":"deprecated","affected_versions":">=0.6.1"},{"fix":"Set removeTags: true in loader options for removingTags to take effect.","message":"The removingTags option only works when removeTags is true. If omitted, tags like <title> and <desc> remain.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure only one rule with test: /\\.svg$/ exists in your webpack config.","message":"If you configure this loader multiple times (e.g., duplicate rules), it can cause errors or double processing.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add a rule for .svg files in webpack.config.js: { test: /\\.svg$/, loader: 'svg-inline-loader' }","cause":"Webpack is trying to parse the SVG as JavaScript because no loader is configured for SVG files.","error":"Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type."},{"fix":"Run npm install --save-dev svg-inline-loader","cause":"svg-inline-loader is not installed or not in node_modules.","error":"Cannot find module 'svg-inline-loader'"},{"fix":"Use module.rules instead of module.loaders: { module: { rules: [ { test: /\\.svg$/, loader: 'svg-inline-loader' } ] } }","cause":"Using Webpack 4+ with svg-inline-loader's outdated module.loaders syntax.","error":"Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema."},{"fix":"Ensure the loader is configured with an options object: { test: /\\.svg$/, loader: 'svg-inline-loader', options: { ... } }","cause":"The loader is being used in a way that expects an options object but receives none (common in older Webpack versions).","error":"TypeError: Cannot read property 'query' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}