Guide · Open source
How to use svgr: turn SVG files into React components
Updated · written with AI from the project's own documentation and checked against our catalogue data
SVGR is an open-source tool that takes an SVG image file and turns it into a React component, so an icon or logo can be used like any other part of a React interface. This guide explains what it does, how to run it from the command line, and where the Webpack loader and Node.js API fit in. By the end you will be able to convert an SVG file into a React component yourself.
SVGRgregberge/svgr · ★ 11.1k · MIT Install options & downloads Quick start
- 1Check Node.js. SVGR requires Node.js. Make sure it is available in your terminal before continuing.
- 2Prepare an SVG file. Choose the SVG icon or logo you want to convert and save it in your project folder, for example as icon.svg.
- 3Run the CLI. Run the npx @svgr/cli command with the --replace-attr-values flag and the SVG file name after the double dash.
- 4Review the component. Open the generated React component and check that the width, height and fill values match what you expect.
- 5Import it in React. Import the component into your React code and render it like any other component, passing props such as className.
- 6Automate with a build tool. For repeated conversion, use the Webpack loader or Node.js API as described in the documentation at react-svgr.com.
What SVGR does and who it is for
SVGR transforms a raw SVG into a ready-to-use React component. Developers use it to avoid converting SVG markup into JSX by hand.
It suits React developers who import SVG icons or logos into components, teams with a shared icon set that needs consistent React components, and projects using Webpack or Node.js build setups that want automatic SVG conversion. It is not a fit for projects that do not use React, since the output is React-specific.
- Good fit: React apps that import icons or logos as components
- Good fit: teams that want one consistent icon set
- Not a fit: non-React projects
- Not a fit: people who only need a static SVG shown on a plain web page
- Not a fit: editing SVG artwork itself, since SVGR only converts the file format
Install SVGR and its prerequisites
SVGR is installed with a package manager, and the prerequisite is Node.js. You can also run the command-line tool without installing it first, using npx.
The README shows this command for running the CLI directly, which converts icon.svg and replaces the fill color #063855 with currentColor.
- Prerequisite: Node.js
- Install method: a package manager
- The CLI, Webpack loader and Node.js API are all part of the project
npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" -- icon.svgConvert an SVG file with the command line
Start with an SVG file. The README example uses a simple rectangle drawn in Sketch, with a fill color of #063855. Passing the --replace-attr-values flag with #063855=currentColor tells SVGR to swap that color for currentColor, so the icon takes on the text color of its surroundings.
The --icon flag is used in the example command. The file to convert is named after the double dash, here icon.svg.
- Pass the SVG file name after the -- separator
- Use --replace-attr-values "old=new" to swap attribute values such as colors
- Use currentColor so the icon inherits the surrounding text color
npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" -- icon.svgRead the React component SVGR produces
The output is a function component that renders an svg element. The width and height are set to 1em, and the props are spread onto the svg so you can pass size, class or other attributes when you use it. The original path data is kept, and fill-rule is written in JSX form.
Because the fill is currentColor, the icon follows the color set by CSS on its parent element.
- The component is exported as default
- Attributes are written in JSX style, such as fillRule
- Props are spread onto the svg element with {...props}
import * as React from 'react'
const SvgComponent = (props) => (
<svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
<path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
</svg>
)
export default SvgComponentUse SVGR in a Webpack or Node.js build
If you want conversion to happen automatically during a build instead of by hand, SVGR provides a Webpack loader and a Node.js API. The project documentation has separate pages for each, linked from the README.
Refer to the documentation at react-svgr.com for the Webpack setup and the Node.js API details, since those configuration options are not shown in the README excerpt used for this guide.
- Webpack usage: see react-svgr.com/docs/webpack/
- Node.js usage: see react-svgr.com/docs/node-api/
- CLI usage: see react-svgr.com/docs/cli/
Try SVGR online before installing
If you want to see the output without installing anything, SVGR has an online playground. It is linked from the README and the documentation site.
- Open the playground at react-svgr.com/playground
- Paste an SVG and inspect the generated React component
What people use it for
- Turning a logo into a React component so it can be placed in a header or footer
- Converting a shared icon set into consistent React components for a team
- Replacing a hand-written JSX SVG with a generated component to avoid manual conversion
- Making icon colors follow the surrounding text color by replacing a fill with currentColor
Frequently asked questions
Is SVGR free to use?
Yes. SVGR is licensed under the MIT License, and the README states that it is an MIT-licensed open source project. The license text is in the project's LICENSE file.
What do I need to install SVGR?
The README lists Node.js as the prerequisite, and SVGR is installed with a package manager. You can also run the command-line tool without installing it by using npx @svgr/cli.
How do I convert an SVG to a React component?
Run npx @svgr/cli with your SVG file name after the double dash, as shown in the README example. The output is a React component that renders the SVG as JSX.
Can I use SVGR without React?
No, not in a useful way. SVGR's output is a React component, so it is meant for projects that use React. If you do not use React, SVGR is not the right tool for your case.
How does SVGR compare to svgo, react-svg-loader and vite-plugin-svgr?
The README does not compare these projects. Comparable projects listed for this tool are svgo, react-svg-loader and vite-plugin-svgr. Check each project's documentation to see which build setup and features fit your needs.
Why does my icon not change color when I use SVGR?
The README example shows how to replace a fixed color with currentColor using --replace-attr-values, so the icon follows the text color. If your icon keeps a fixed color, check that the original color value matches the one you pass to the flag.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
SVGR is a good choice for React developers and teams who import SVG icons or logos and want them as components, especially in Webpack or Node.js builds. It is not the right tool for non-React projects, for simply showing a static SVG file, or for editing SVG artwork.
Install options & downloads