SVGR
Converts SVG icon files into React components you can import and use in code.
- Stars
- 11.1k
- Forks
- 440
- Licence
- MIT
- Language
- TypeScript
- Last update
- 8 months ago
- Type
- Library
What it is
SVGR takes an SVG image file and turns it into a React component, so the icon can be used like any other part of a React interface. It provides a command-line tool, a Webpack loader, and a Node.js API, and it can be tried in an online playground. Developers use it to avoid hand-converting SVG markup into JSX.
- Convert a folder of SVG icons into React components with the command-line tool
- Import an SVG file directly in a Webpack project through the loader
- Try a conversion in the online playground before adding it to a project
Great for
- React developers who import SVG icons or logos into components
- Teams with a shared icon set that needs consistent React components
- Projects using Webpack or Node.js build setups that want automatic SVG conversion
Not ideal for
- Projects that do not use React, since the output is React-specific
- People who only need a static SVG file displayed on a plain web page
- Users who need to edit SVG artwork itself; SVGR only converts the file format
How to get it
- 1
Install with a package manager
You'll need: Node.js
Run the command-line tool without installing it
npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" -- icon.svg - 2
Run it
- Save an SVG file, such as icon.svg, in your project folder
- Run the npx @svgr/cli command shown in the README against that file
- Open the generated React component and import it into your app
- 3
Get the most out of it
- Use the --icon flag so the component sizes to 1em, as shown in the README example
- Use --replace-attr-values to swap colors for currentColor so icons inherit text color
- Try conversions in the online playground at react-svgr.com/playground before scripting them
- Read the Webpack and Node.js API pages for automated builds
Downloads
Strengths
- Produces ready-to-use React components from a raw SVG file
- Offers several ways to run it: command line, Webpack loader, and Node.js API
- Has a browser playground and documentation at react-svgr.com
Trade-offs
- The README is short and points to external docs for most setup detail
- Output depends on the SVG and options used, so the example may need review for complex files
- Command-line and build setup require Node.js familiarity
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| svgr (this) | 11.1k | Library | beginner | 8 months ago | React developers who import SVG icons or logos into components |
| svgo | 22.8k | Library | intermediate | 10 days ago | Web developers who want smaller SVG icons and images loaded in pages |
| mojs | 18.9k | Library | intermediate | 3 months ago | Front-end developers who want decorative animated effects like bursts, shapes, or icon animations |
| react-loadable | 16.5k | Library | intermediate | 2.3 years ago | React developers whose main JavaScript bundle has grown large |
| html-webpack-plugin | 10.7k | Library | intermediate | 2 months ago | Developers with existing webpack 4 or webpack 5 projects that build a web page |
| three.js | 117k | Library | intermediate | 4 days ago | Web developers adding interactive 3D graphics to a website |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.