{"id":19085,"library":"babel-plugin-inline-svg","title":"babel-plugin-inline-svg","description":"A Babel plugin (v1.2.0) that transforms SVG imports into inline SVG strings, optimized with SVGO and with optional ID namespacing to avoid conflicts. Supports exporting as data URI for direct use in src attributes. Key differentiators: built-in SVGO optimization, automatic ID namespacing, and data URI export. Alternatives like svg-inline-loader or @svgr/webpack require more configuration.","status":"active","version":"1.2.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/iest/babel-plugin-inline-svg","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-inline-svg","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-inline-svg","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-inline-svg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Requires Babel as runtime","package":"babel","optional":false}],"imports":[{"note":"Default import yields a string. CommonJS require() will not work without additional configuration.","wrong":"const someSvg = require('./file.svg');","symbol":"default (import)","correct":"import someSvg from './file.svg';"},{"note":"When using require(), access .default to get the string.","wrong":"const someSvg = require('./file.svg');","symbol":"default (require)","correct":"const someSvg = require('./file.svg').default;"},{"note":"The plugin does not provide TypeScript types; declare module '*.svg' { const content: string; export default content; }.","wrong":"","symbol":"type","correct":"// No separate type import; the string is the type."}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\n    [\"inline-svg\", {\n      \"ignorePattern\": \"icons\",\n      \"disableNamespaceIds\": true,\n      \"exportDataURI\": true,\n      \"svgo\": {\n        \"plugins\": [{\"removeDimensions\": true}]\n      }\n    }]\n  ]\n}\n\n// src/App.js\nimport logo from './logo.svg';\n\nfunction App() {\n  return <img src={logo} alt=\"Logo\" />;\n}","lang":"javascript","description":"Configure babel-plugin-inline-svg to ignore 'icons' files, disable ID namespacing, and export SVG as data URI."},"warnings":[{"fix":"If you need a React component, consider using @svgr/webpack instead.","message":"SVG import is a string, not a React component. Using dangerouslySetInnerHTML or <img> src is required.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update custom transformers that rely on the old argument order.","message":"In v1.2.0, the argument order for namespaceIds transformer changed to standardize.","severity":"deprecated","affected_versions":">=1.2.0"},{"fix":"Only disable if you have pre-optimized SVGs.","message":"Disabling SVGO (disableSVGO: true) may leave SVG unoptimized, increasing bundle size.","severity":"gotcha","affected_versions":">=1.1.0"},{"fix":"Use disableNamespaceIds: true if IDs are not used in CSS.","message":"By default, ID namespacing is enabled and uses the import variable name. Ensure variable names are unique to avoid collisions.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add the babel-loader with this plugin before other loaders in webpack config, or use the plugin directly in .babelrc and ensure svg files are not handled by other loaders.","cause":"SVG file not being processed by the plugin, often due to webpack using a different loader.","error":"SyntaxError: Unexpected token '<'"},{"fix":"Run 'npm install --save-dev babel-plugin-inline-svg' and verify your .babelrc or babel config.","cause":"Plugin is not installed or not listed in devDependencies.","error":"Cannot find module 'babel-plugin-inline-svg'"},{"fix":"Use import statement or access .default when using require(). Ensure the file has .svg extension and the plugin is active.","cause":"Trying to use require() without .default, or importing a file that is not processed by the plugin.","error":"TypeError: (0 , _someSvg.default) is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}