Skip to content
Transform SVGs into React components 🦁
JavaScript
Branch: master
Clone or download
Permalink
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
svgr.now.sh 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
BACKERS.md docs: change amount of open collective Apr 22, 2019
CHANGELOG.md v4.3.3 Sep 24, 2019
CODE_OF_CONDUCT.md feat: move to a Lerna project Jun 12, 2018
CONTRIBUTING.md docs: add issue templates & contributing Sep 16, 2018
LICENSE chore: add license Dec 20, 2017
README.md 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

README.md

svgr

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.

Docs

See the documentation at smooth-code.com/open-source/svgr for more information about using svgr!

Quicklinks to some of the most-visited pages:

Example

Take an icon.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>
  <defs></defs>
  <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

Output

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" />
  </svg>
)

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.

gold-sponsors

Contributing

Check out the contributing guidelines

License

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

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.

You can’t perform that action at this time.