{"id":17051,"library":"react-svg-loader-cli","title":"CLI for React SVG Loader","description":"react-svg-loader-cli is a command-line interface tool designed to convert SVG files into optimized React components. It is part of the broader `react-svg-loader` ecosystem, which also includes webpack and rollup plugins. The package leverages SVGO for SVG optimization, generating functional React components (arrow functions) that can accept standard React props. The current stable version is 3.0.3. Release cadence is irregular, driven by bug fixes, dependency upgrades, and Node.js version support. Key differentiators include its focused CLI approach for batch processing SVGs and its integration with SVGO, providing a streamlined workflow for developers who prefer a command-line utility over build tool integrations. It allows for direct transformation of SVG assets into reusable React components.","status":"active","version":"3.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/boopathi/react-svg-loader","tags":["javascript","cli","commandline","react","react-svg-loader"],"install":[{"cmd":"npm install react-svg-loader-cli","lang":"bash","label":"npm"},{"cmd":"yarn add react-svg-loader-cli","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-svg-loader-cli","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the core logic for transforming SVGs into React components; this package is a CLI wrapper around that functionality.","package":"react-svg-loader","optional":false}],"imports":[],"quickstart":{"code":"# Install react-svg-loader-cli globally for easy access\nnpm install -g react-svg-loader-cli\n\n# Or use npx for a one-off execution without global installation\n# npx react-svg-loader-cli -i path/to/your/icon.svg -o src/components/Icon.js\n\n# Example: Create a dummy SVG file for demonstration\necho '<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>' > check-circle.svg\n\n# Process the SVG, outputting a React component with JSX syntax\n# The --jsx flag ensures JSX output (default changed in v2.0.0-alpha.0)\n# The --svgo-config allows passing SVGO options directly, here preventing viewBox removal\nreact-svg-loader -i check-circle.svg -o src/components/CheckCircleIcon.js --jsx --svgo-config='{\"plugins\":[{\"name\":\"preset-default\", \"params\":{\"overrides\":{\"removeViewBox\":false}}}]}'\n\n# To use this component in a React application:\n# import CheckCircleIcon from './components/CheckCircleIcon';\n# function MyComponent() {\n#   return <CheckCircleIcon width={32} height={32} color=\"blue\" />;\n# }\n","lang":"bash","description":"Demonstrates global installation, basic SVG processing, specifying output path, JSX output, and custom SVGO configuration."},"warnings":[{"fix":"Upgrade your Node.js runtime to version 8 or higher.","message":"Version 3.0.0 dropped support for Node.js 6. Applications running on older Node.js environments will fail.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Ensure Node.js is version 4 or higher and Webpack (if used alongside) is version 2 or higher.","message":"Version 2.0.0 dropped support for Node.js 0.12 and Webpack 1. This primarily affected the associated `react-svg-loader` webpack plugin, but indicates a general move away from older environments.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Update your React code to be compatible with functional components or revert to an older version if specific class component behavior is required.","message":"Version 2.0.0 changed the output component format from ES6 class components to functional arrow components. This might break consuming code that relied on class-specific features (e.g., `this` context or lifecycle methods).","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Add the `--jsx` flag to your CLI command if you require JSX output for your generated React components.","message":"Version 2.0.0-alpha.0 changed the default output from JSX to ES2015. Without the `--jsx` flag, the CLI will output plain ES2015 JavaScript instead of JSX syntax.","severity":"breaking","affected_versions":">=2.0.0-alpha.0"},{"fix":"Upgrade `react-svg-loader-cli` to version 3.0.0 or higher to ensure compatibility across Babel versions.","message":"Previous versions (prior to v3.0.0) had compatibility issues with Babel 6 and 7 regarding `t.restElement` and `t.restProperty`, which could lead to build failures or incorrect transformations when integrating with projects using different Babel versions.","severity":"gotcha","affected_versions":"<3.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Upgrade your `react-svg-loader-cli` package to version 3.0.0 or newer, which includes fixes for Babel 6 and 7 compatibility.","cause":"This error typically occurs due to incompatibilities between Babel 6 and 7's AST (Abstract Syntax Tree) node definitions when processing JavaScript.","error":"TypeError: Cannot read property 'restElement' of undefined"},{"fix":"Upgrade `react-svg-loader-cli` to version 2.0.0-alpha.1 or higher, as this issue was addressed in that release.","cause":"Older versions of the loader incorrectly transformed `data-*` attributes to camelCase during the Babel transformation process.","error":"My `data-*` attributes on the SVG are being converted to camelCase (e.g., `data-test-id` becomes `dataTestId`) in the generated React component, which is incorrect for HTML attributes."}],"ecosystem":"npm","meta_description":null}