Registry / web-framework / react-svg-loader-cli

react-svg-loader-cli

library3.0.3jsnpmunverified

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.

web-framework serialization

npm install react-svg-loader-cli

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SVG-LOADER-C

react-svg-loader-cli

web-frameworkjavascriptv3.0.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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" />; # }

react-svg-loader --version

Debug

Known issues

breakingVersion 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.

affects: >=3.0.0

breakingVersion 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.

affects: >=2.0.0

breakingVersion 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.

affects: >=2.0.0

breakingVersion 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.

affects: >=2.0.0-alpha.0

gotchaPrevious 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.

affects: <3.0.0

Errors

Common errors & fixes

TypeError: Cannot read property 'restElement' of undefined

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.

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.

Upgrade

Version history

3.0.3latest on npm

Audit

Dependencies

react-svg-loaderrequiredProvides the core logic for transforming SVGs into React components; this package is a CLI wrapper around that functionality.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/boopathi/react-svg-loader ↗

packagehttps://www.npmjs.com/package/react-svg-loader-cli ↗