SVGR

SVGR converts SVG files into React components. It is used in React and Next.js projects so that icons and illustrations can be imported like any other component.

You give SVGR an SVG file and it returns a React component that renders the same graphic. You can use it in the online playground, from the command line, in Node.js or as a webpack plugin. Options let you change the output, and custom plugins can handle special cases that the built-in settings do not cover.

• Convert SVG files into React components
• Online playground to preview the output
• Command line, Node.js and webpack options
• Custom plugins for special SVG cases

React developers who want SVG icons as components, teams using Next.js or Create React App, and build engineers who manage assets in a bundler.

SVGR is free and open source under the MIT license. It runs in Node.js, and the playground runs in the browser. Complex SVG files may need custom settings, so test the output in your app before you ship it.