{"id":20593,"library":"svg-react-loader","title":"svg-react-loader","description":"A Webpack loader that transforms SVG files into reusable React components. Current stable version is 0.4.6. Allows inline SVG usage as React components or composition of multiple SVGs. Supports query parameters for component naming, attribute mapping, CSS class prefixing, and custom filter functions. Does not require Babel for output (ES5-7 compatible). Works with React >=0.14. Key differentiators: supports SVG/XML string or object tree input, filter API for node modification, and works as both a loader and pre-loader.","status":"maintenance","version":"0.4.6","language":"javascript","source_language":"en","source_url":"https://github.com/jhamlet/svg-react-loader","tags":["javascript","webpack","loader","react","svg","component"],"install":[{"cmd":"npm install svg-react-loader","lang":"bash","label":"npm"},{"cmd":"yarn add svg-react-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add svg-react-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a webpack loader; requires webpack to be installed.","package":"webpack","optional":false},{"reason":"The generated components require React >=0.14.","package":"react","optional":false}],"imports":[{"note":"Loader syntax is required: 'svg-react-loader?params!filepath'. Without the loader prefix, webpack won't process the SVG.","wrong":"import Icon from '../svg/my-icon.svg';","symbol":"default import","correct":"import Icon from 'svg-react-loader?name=Icon!../svg/my-icon.svg';"},{"note":"Same as import, must include loader prefix in the require path.","wrong":"var Icon = require('../svg/my-icon.svg');","symbol":"CommonJS require","correct":"var Icon = require('svg-react-loader?name=Icon!../svg/my-icon.svg');"},{"note":"Use 'svg-react-loader' in webpack module rules. Other SVG loaders produce strings or URLs, not React components.","wrong":"loader: 'svg-inline-loader'","symbol":"webpack config loader","correct":"loader: 'svg-react-loader'"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.svg$/,\n        exclude: /node_modules/,\n        use: [\n          {\n            loader: 'svg-react-loader',\n            options: {\n              classIdPrefix: '[name]-[hash:8]__',\n              filters: [\n                function (value) {\n                  // Remove fill attributes\n                  if (value.attrs && value.attrs.fill) {\n                    delete value.attrs.fill;\n                  }\n                  this.update(value);\n                }\n              ]\n            }\n          }\n        ]\n      }\n    ]\n  }\n};\n\n// MyComponent.js\nimport React from 'react';\nimport Icon from './my-icon.svg';\n\nexport default function MyComponent() {\n  return <Icon className=\"my-icon\" />;\n}","lang":"javascript","description":"Configures webpack to load SVG files as React components, with a filter to remove fill attributes."},"warnings":[{"fix":"Upgrade React to at least 0.14. For older React versions, use svg-react-loader@0.3.x.","message":"Requires React >=0.14 (stateless function component).","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Ensure your webpack config does not expect Babel output from this loader. Adjust transpilation pipeline if needed.","message":"No longer requires Babel for transpilation; module returns ES5-7 compatible code.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Always prefix SVG imports with 'svg-react-loader?' or configure in webpack module.rules.","message":"Loader must be used with '!' in import path or configured in webpack module rules.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use module.rules with 'use' and 'loader' options instead of 'loaders' array.","message":"Webpack 1 style loaders array is deprecated; use module.rules instead.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Always invoke this.update(value) inside filter functions after modifying the SVG object tree.","message":"filter functions must call this.update() for changes to take effect.","severity":"gotcha","affected_versions":">=0.4.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install --save-dev svg-react-loader","cause":"svg-react-loader not installed or not in devDependencies.","error":"Module not found: Error: Can't resolve 'svg-react-loader' in '/path/to/project'"},{"fix":"Add a rule in webpack.config.js: { test: /\\.svg$/, use: 'svg-react-loader' }","cause":"Webpack rule for .svg files is missing or loader not configured.","error":"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."},{"fix":"Change import to include loader: import Icon from 'svg-react-loader!../svg/my-icon.svg';","cause":"Import path missing loader prefix, so webpack returns undefined instead of a React component.","error":"React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined."},{"fix":"Upgrade svg-react-loader to >=0.4.0: npm install svg-react-loader@latest","cause":"Older version (<0.4.0) required Babel; newer versions don't but project may still use old version.","error":"Cannot find module 'babel-core'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}