{"id":19141,"library":"babel-plugin-react-svg","title":"babel-plugin-react-svg","description":"Babel plugin that transforms SVG files into React components. Version 3.0.3 is the current stable release, with no active development since 2019. It works by running SVGO optimization followed by a Babel transform to produce a component that renders the SVG as JSX. Key differentiators: integrates with webpack via react-svg-loader, supports SVGO options, and outputs functional components. Alternatives like @svgr/webpack offer more features and are actively maintained.","status":"maintenance","version":"3.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/boopathi/react-svg-loader","tags":["javascript","babel","babel-plugin","react","react-svg-loader","svg","webpack","webpack-loader"],"install":[{"cmd":"npm install babel-plugin-react-svg","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-react-svg","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-react-svg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required to parse JSX syntax in Babel transforms.","package":"@babel/plugin-syntax-jsx","optional":false}],"imports":[{"note":"ESM default export; in CommonJS, use `require('babel-plugin-react-svg')` directly.","wrong":"const plugin = require('babel-plugin-react-svg').default","symbol":"default","correct":"import plugin from 'babel-plugin-react-svg'"},{"note":"Plugin name must be the full npm package name.","wrong":"\"plugins\": [\"react-svg\"]","symbol":"babel-plugin-react-svg (in .babelrc/plugins)","correct":"\"plugins\": [\"babel-plugin-react-svg\"]"},{"note":"SVGO options are passed as an object; see SVGO docs for valid options.","wrong":"[\"babel-plugin-react-svg\", { \"svgo\": { \"plugins\": [] } }]","symbol":"Options (e.g., svgo, expandProps)","correct":"[\"babel-plugin-react-svg\", { \"svgo\": true, \"expandProps\": \"start\" }]"}],"quickstart":{"code":"// .babelrc\n{\n  \"presets\": [\"@babel/preset-react\"],\n  \"plugins\": [\n    [\"babel-plugin-react-svg\", {\n      \"svgo\": true,\n      \"expandProps\": \"end\"\n    }]\n  ]\n}\n\n// In your React component\nimport React from 'react';\nimport MyIcon from './icon.svg';\n\nfunction App() {\n  return <MyIcon style={{ width: 100, height: 100 }} />;\n}\n\nexport default App;","lang":"javascript","description":"Shows Babel plugin configuration and how to import an SVG as a React component."},"warnings":[{"fix":"Migrate to @svgr/webpack (see svgr.io).","message":"This package is no longer actively maintained. Consider using @svgr/webpack for new projects.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Update Node.js to version >=8. For class component output, downgrade to v1.x.","message":"In v3.0.0, Node <8 is no longer supported. The plugin changed from class component output to functional component output in v2.0.0.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Avoid reusing the same SVGO instance across multiple files; plugin handles this internally now.","message":"SVGO object is mutated during transform. Multiple runs on same file may produce inconsistent results.","severity":"gotcha","affected_versions":">=2.1.0"},{"fix":"Upgrade to Babel 7 or pin to babel-plugin-react-svg@^2.1.0.","message":"Babel 6 support was dropped in v3.0.0. Use v2.x if you need Babel 6.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Use react-svg-loader webpack loader instead of configuring manually.","message":"The plugin expects .svg files to be imported as React components. If you are also using file-loader, ensure order of loaders in webpack.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure your SVG files have the .svg extension and are imported with correct path.","message":"Import path must end with .svg; other file extensions are ignored.","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 react-svg-loader to webpack rules: { test: /\\.svg$/, use: ['babel-loader', 'react-svg-loader'] }","cause":"Webpack is trying to process the .svg file without the react-svg-loader or babel-plugin-react-svg configured.","error":"Module parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"npm install @babel/plugin-syntax-jsx --save-dev","cause":"Missing peer dependency @babel/plugin-syntax-jsx.","error":"Cannot find module '@babel/plugin-syntax-jsx'"},{"fix":"Use valid options: { svgo: boolean, expandProps: 'start'|'end'|false }","cause":"Options passed to the plugin in .babelrc are not recognized.","error":"Unknown option: expandProps. Check if it's written correctly."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}