Skip to content
Transform SVGs into React components 🦁
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github docs(funding): add neoziro Oct 6, 2019
__fixtures__ docs: update all documentations Nov 4, 2018
deprecated-packages/svgr chore: various fixes Jun 12, 2018
examples/webpack chore: upgrade example Jun 12, 2018
packages v4.3.3 Sep 24, 2019
resources docs(website): upgrade website Sep 27, 2019 docs: move website to svgr repo (#251) Dec 12, 2018
website docs: fix docs missing variable Oct 2, 2019
.babelrc refactor: remove @babel/plugin-proposal-object-rest-spread Sep 3, 2018
.eslintignore docs: move website to svgr repo (#251) Dec 12, 2018
.eslintrc.json chore: upgrade deps Apr 11, 2019
.gitignore docs: new docs website (#238) Nov 22, 2018
.prettierignore docs: move website to svgr repo (#251) Dec 12, 2018
.prettierrc Prepare for publishing Sep 2, 2017
.travis.yml chore: remove cache from travis Jul 15, 2019 docs: change amount of open collective Apr 22, 2019 v4.3.3 Sep 24, 2019 feat: move to a Lerna project Jun 12, 2018 docs: add issue templates & contributing Sep 16, 2018
LICENSE chore: add license Dec 20, 2017 docs: add contributing guidelines section (#330) Aug 6, 2019
babel.config.js feat: move to a Lerna project Jun 12, 2018
jest.config.js feat: add parcel plugin (#235) Nov 24, 2018
lerna.json v4.3.3 Sep 24, 2019
netlify.toml docs: upgrade website (#299) Apr 23, 2019
now.json chore(now): add public: true (#276) Feb 14, 2019
package.json chore: upgrade dependencies Jul 15, 2019
yarn.lock chore: upgrade dependencies Jul 15, 2019


Transform SVGs into React components 🦁

License Donate npm package npm downloads Build Status Code Coverage Code style Dependencies DevDependencies

Try it out online!

Watch the talk at React Europe

SVGR transforms SVG into ready to use components. It is part of create-react-app and makes SVG integration into your React projects easy.


See the documentation at for more information about using svgr!

Quicklinks to some of the most-visited pages:


Take an icon.svg:

<?xml version="1.0" encoding="UTF-8"?>
  viewBox="0 0 48 1"
  <!-- Generator: Sketch 46.2 (44496) - -->
  <title>Rectangle 5</title>
  <desc>Created with Sketch.</desc>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      transform="translate(-129.000000, -156.000000)"
      <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>


npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" icon.svg


import 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" />

export default SvgComponent

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:

Gold Sponsors

Gold Sponsors are those who have pledged $100/month and more to SVGR.



Check out the contributing guidelines


Licensed under the MIT License, Copyright Β© 2017-present Smooth Code.

See LICENSE for more information.


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.

You can’t perform that action at this time.