svgr

SVGR is a tool that converts SVG image files into React components. SVG is a format for vector graphics (logos, icons, illustrations that stay sharp at any size), and React is a popular JavaScript library for building user interfaces. Normally, using an SVG inside a React app requires some manual work to make it fit the component model. SVGR automates that conversion entirely.

You point SVGR at an SVG file and it outputs a clean React component you can drop straight into your code. That component accepts the same props as any React element, so you can resize it, change its color, or wire it up to click handlers just like any other piece of your UI. The tool also runs the SVG through an optimizer first, stripping out unnecessary metadata and attributes that design tools like Sketch tend to leave behind.

SVGR can be used in several ways: as a command-line tool you run directly in a terminal, as a plugin for webpack (a common build tool for JavaScript projects), or as a Node.js library you call from your own scripts. There is also an online playground at react-svgr.com where you can paste an SVG and immediately see the React component output, without installing anything.

The project is MIT licensed and free to use. It was developed by Greg Berge and gained wider adoption after being included in create-react-app, a standard starter kit for React projects. It is supported through sponsorships on GitHub and OpenCollective.

If you are building a React application and want to include icons or illustrations as interactive components rather than static image tags, this library handles the conversion so you do not have to rewrite SVG markup by hand.