CLI for React SVG Loader

3.0.3 · active · verified Wed Apr 22

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.

Common errors

```
TypeError: Cannot read property 'restElement' of undefined
```
cause This error typically occurs due to incompatibilities between Babel 6 and 7's AST (Abstract Syntax Tree) node definitions when processing JavaScript.

fix Upgrade your `react-svg-loader-cli` package to version 3.0.0 or newer, which includes fixes for Babel 6 and 7 compatibility.
```
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.
```
cause Older versions of the loader incorrectly transformed `data-*` attributes to camelCase during the Babel transformation process.

fix Upgrade `react-svg-loader-cli` to version 2.0.0-alpha.1 or higher, as this issue was addressed in that release.

Warnings

breaking Version 3.0.0 dropped support for Node.js 6. Applications running on older Node.js environments will fail.
Fix: Upgrade your Node.js runtime to version 8 or higher.
breaking 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.
Fix: Ensure Node.js is version 4 or higher and Webpack (if used alongside) is version 2 or higher.
breaking 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).
Fix: Update your React code to be compatible with functional components or revert to an older version if specific class component behavior is required.
breaking 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.
Fix: Add the `--jsx` flag to your CLI command if you require JSX output for your generated React components.
gotcha 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.
Fix: Upgrade `react-svg-loader-cli` to version 3.0.0 or higher to ensure compatibility across Babel versions.

Install

npm install react-svg-loader-cli npm
yarn add react-svg-loader-cli yarn
pnpm add react-svg-loader-cli pnpm

Quickstart

Demonstrates global installation, basic SVG processing, specifying output path, JSX output, and custom SVGO configuration.

# Install react-svg-loader-cli globally for easy access
npm install -g react-svg-loader-cli

# Or use npx for a one-off execution without global installation
# npx react-svg-loader-cli -i path/to/your/icon.svg -o src/components/Icon.js

# Example: Create a dummy SVG file for demonstration
echo '<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

# Process the SVG, outputting a React component with JSX syntax
# The --jsx flag ensures JSX output (default changed in v2.0.0-alpha.0)
# The --svgo-config allows passing SVGO options directly, here preventing viewBox removal
react-svg-loader -i check-circle.svg -o src/components/CheckCircleIcon.js --jsx --svgo-config='{"plugins":[{"name":"preset-default", "params":{"overrides":{"removeViewBox":false}}}]}'

# To use this component in a React application:
# import CheckCircleIcon from './components/CheckCircleIcon';
# function MyComponent() {
#   return <CheckCircleIcon width={32} height={32} color="blue" />;
# }

view raw JSON →