Skip to content
Transform SVGs into React components 🦁
Branch: master
Clone or download
Latest commit 5a90553 Feb 22, 2020
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore(opencollective): Loadable -> SVGR Jan 20, 2020
__fixtures__ feat: add Svg prefix to exports that starts with a number (#383) Jan 18, 2020
api chore: fix now Dec 25, 2019
deprecated-packages/svgr chore: smooth-code -> gregberge Dec 24, 2019
examples feat(parcel-plugin): replace `parcel-bundler` with `parcel` (#387) Jan 28, 2020
packages fix: verify that `svgoConfig.plugins` is an array (#397) Feb 16, 2020
public docs(website): upgrade & make it standalone Dec 24, 2019
resources chore: smooth-code -> gregberge Dec 24, 2019
website docs: update CLI options + small website fix (#393) Feb 3, 2020
.babelrc refactor: remove @babel/plugin-proposal-object-rest-spread Sep 3, 2018
.eslintignore docs: move website to svgr repo (#251) Dec 12, 2018
.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 feat: drop Node.js v8 support Dec 18, 2019 docs: change amount of open collective Apr 22, 2019 v5.1.0 Jan 20, 2020 chore: smooth-code -> gregberge Dec 24, 2019 docs: update contributors link (#394) Feb 2, 2020
LICENSE chore: add license Dec 20, 2017 docs(readme): fix website url Dec 24, 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 v5.1.0 Jan 20, 2020
netlify.toml docs(website): upgrade & make it standalone Dec 24, 2019
now.json chore(now): cors Dec 24, 2019
package.json chore: fix now Dec 25, 2019
yarn.lock chore(deps-dev): bump codecov from 3.6.1 to 3.6.5 (#399) Feb 22, 2020


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.