SVGR

Transform SVGs into React components

ReactSVG
gregberge/svgrreact-svgr.com@svgr/core

README

svgr

Transform SVGs into React components 🦁

License Donate npm package npm downloads CI Code Coverage

[Try it out online!](https://react-svgr.com/playground)

[Watch the talk at React Europe](https://www.youtube.com/watch?v=geKCzi7ZPkA)

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](https://react-svgr.com/playground/)
- [Getting started](https://react-svgr.com/docs/getting-started/)
- CLI usage
- Webpack usage
- Node.js usage

Example


Take a SVG:

  1. ``` html
  2. ?xml version="1.0" encoding="UTF-8"?>
  3. <svg
  4.   width="48px"
  5.   height="1px"
  6.   viewBox="0 0 48 1"
  7.   version="1.1"
  8.   xmlns="http://www.w3.org/2000/svg"
  9.   xmlns:xlink="http://www.w3.org/1999/xlink"
  10. >
  11.   
  12.   <title>Rectangle 5</title>
  13.   <desc>Created with Sketch.</desc>
  14.   <defs></defs>
  15.   <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  16.     <g
  17.       id="19-Separator"
  18.       transform="translate(-129.000000, -156.000000)"
  19.       fill="#063855"
  20.     >
  21.       <g id="Controls/Settings" transform="translate(80.000000, 0.000000)">
  22.         <g id="Content" transform="translate(0.000000, 64.000000)">
  23.           <g id="Group" transform="translate(24.000000, 56.000000)">
  24.             <g id="Group-2">
  25.               <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>
  26.             </g>
  27.           </g>
  28.         </g>
  29.       </g>
  30.     </g>
  31.   </g>
  32. </svg>
  33. ```

Run SVGR

  1. ```sh
  2. npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" -- icon.svg
  3. ```

Get an optimized React component

  1. ``` js
  2. import * as React from 'react'

  4. const SvgComponent = (props) => (
  5.   <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
  6.     <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
  7.   </svg>
  8. )

  10. export default SvgComponent
  11. ```

Supporting SVGR


SVGR is a MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome backers. If you'd like to join them, please consider:

- Sponsor me on GitHub
- Become a backer or sponsor on OpenCollective

Learn more about supporting SVGR.

Contributing


Check out the contributing guidelines

License


Licensed under the MIT License, Copyright © 2017-present Greg Bergé.

See LICENSE for more information.

Acknowledgements


This project has been popularized by Christopher Chedeau and it has been included in create-react-app thanks to Dan Abramov. We would like to thanks Sven Sauleau for his help and its intuition.