{"id":26777,"library":"babel-plugin-inline-react-svg","title":"babel-plugin-inline-react-svg","description":"A Babel plugin (v2.0.2) that transforms SVG file imports into inline React components, using SVGO for optimization. Stable but infrequently updated (last release ~2019). Alternatives like @svgr/webpack are more actively maintained and support broader use cases. Requires @babel/core ^7.0.0 as a peer dependency. Works in Node.js >=10.13, not browser-native.","status":"maintenance","version":"2.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/kesne/babel-plugin-inline-react-svg","tags":["javascript","babel","plugin","react","svg","inline"],"install":[{"cmd":"npm install babel-plugin-inline-react-svg","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-inline-react-svg","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-inline-react-svg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for Babel plugin execution","package":"@babel/core","optional":false}],"imports":[{"note":"Default export; CommonJS require also works.","wrong":"const plugin = require('babel-plugin-inline-react-svg')","symbol":"plugin","correct":"import plugin from 'babel-plugin-inline-react-svg'"},{"note":"In Babel config, use shorthand without prefix.","wrong":"plugins: ['babel-plugin-inline-react-svg']","symbol":"babel config","correct":"plugins: ['inline-react-svg']"},{"note":"No special query string needed; declaration file may be needed for TS.","wrong":"import Icon from './icon.svg?inline';","symbol":"TypeScript","correct":"import * as React from 'react';\nimport Icon from './icon.svg';"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\n    \"inline-react-svg\"\n  ]\n}\n\n// App.js\nimport React from 'react';\nimport CloseIcon from './close.svg';\n\nfunction App() {\n  return <CloseIcon />;\n}\n\nexport default App;","lang":"javascript","description":"Shows basic setup and usage: configuring the plugin in .babelrc and importing an SVG as a React component."},"warnings":[{"fix":"If you relied on earlier behavior, configure svgo options explicitly to disable unwanted plugins.","message":"v2.0.0 changed default SVG processing to include all SVGO plugins. Previously some plugins were disabled.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use the 'plugins' array directly; see SVGO documentation for v2 configuration.","message":"The svgo option 'extendDefaultPlugins' from svgo v1 is deprecated in svgo v2.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Set caseSensitive: true in plugin options to enforce case sensitivity on all platforms.","message":"File paths are case-sensitive by default on Linux; use caseSensitive option for cross-platform consistency.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to Babel 7 or use version 1.x of the plugin.","message":"The plugin only works with Babel 7 (peer dep @babel/core ^7.0.0). Not compatible with Babel 6.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev babel-plugin-inline-react-svg","cause":"Plugin not installed or missing from devDependencies.","error":"Cannot find module 'babel-plugin-inline-react-svg'"},{"fix":"Use import or const plugin = require('babel-plugin-inline-react-svg').default;","cause":"Using CommonJS require() incorrectly when plugin expects default export.","error":"TypeError: (0 , _plugin.default) is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}