<h1 align="center" <img src="https://raw.githubusercontent.com/gregberge/svgr/master/resources/svgr-logo.png" alt="svgr" title="svgr" width="300" </h1 <p align="center" style="font-size: 1.2rem;"Transform SVGs into React components 🦁</p
Try it out online!
Watch the talk at React Europe
SVGR is an universal tool to transform SVG into React components.
SVGR takes a raw SVG and transforms it into a ready-to-use React component.
Docs
See the documentation at react-svgr.com for more information about using svgr!
Quicklinks to some of the most-visited pages:
- Playground
- Getting started
- CLI usage
- Webpack usage
- Node.js usage
Example
Take a SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg
width="48px"
height="1px"
viewBox="0 0 48 1"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Rectangle 5</title>
<desc>Created with Sketch.</desc><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" <g id="19-Separator" transform="translate(-129.000000, -156.000000)" fill="#063855" <g id="Controls/Settings" transform="translate(80.000000, 0.000000)" <g id="Content" transform="translate(0.000000, 64.000000)" <g id="Group" transform="translate(24.000000, 56.000000)" <g id="Group-2" <rect id="Rectangle-5" x="25" y="36" width="48" height="1"</rect </g </g </g </g </g </g </svg
**Run SVGR**
npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" -- icon.svg
**Get an optimized React component**
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 )