gregberge/svgr

★ 11,029TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((svgr))
    What it does
      SVG to React convert
      Prop-ready output
      SVG optimization
    Usage modes
      CLI tool
      Webpack plugin
      Node.js library
    Use cases
      Icon components
      Illustration reuse
      Build automation
    Audience
      React developers
      Frontend designers
      Build engineers

mindmap root((svgr)) What it does SVG to React convert Prop-ready output SVG optimization Usage modes CLI tool Webpack plugin Node.js library Use cases Icon components Illustration reuse Build automation Audience React developers Frontend designers Build engineers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Convert a folder of SVG icons into reusable React components you can resize and recolor with props

USE CASE 2

Use the SVGR webpack plugin to automatically convert imported SVG files during your JavaScript build

USE CASE 3

Run SVGR from the terminal as a CLI tool to transform individual SVG files into React components

USE CASE 4

Use the online playground at react-svgr.com to preview the React component output without installing anything

Tech stack

TypeScriptNode.jswebpack

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1

Show me how to use the SVGR CLI to batch-convert a folder of SVG icons into React components

Prompt 2

How do I configure the SVGR webpack plugin so all SVG imports in a project automatically become React components?

Prompt 3

How do I make an SVGR-generated React component accept a size and fill color as props?

Prompt 4

Show me how to use SVGR as a Node.js library in a build script to convert SVGs programmatically

Prompt 5

What cleanup does SVGR apply to SVG files exported from Sketch or Figma before converting them?

Open on GitHub → Explain another repo

← gregberge on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.