Skip to content
Transform SVGs into React components 🦁
JavaScript
Branch: master
Clone or download

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore(opencollective): Loadable -> SVGR Jan 20, 2020
__fixtures__ feat: add typescript option Mar 22, 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: fix typescript types (ref, title) (#419) Mar 26, 2020
public docs(website): upgrade & make it standalone Dec 24, 2019
resources chore: smooth-code -> gregberge Dec 24, 2019
website doc(website): add new typescript option Mar 22, 2020
.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: fix linting issues Dec 18, 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 feat: drop Node.js v8 support Dec 18, 2019
BACKERS.md docs: change amount of open collective Apr 22, 2019
CHANGELOG.md v5.3.0 Mar 22, 2020
CODE_OF_CONDUCT.md chore: smooth-code -> gregberge Dec 24, 2019
CONTRIBUTING.md docs: update contributors link (#394) Feb 2, 2020
LICENSE chore: add license Dec 20, 2017
README.md refactor: migrate to import * as React from 'react' (#401) Feb 23, 2020
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.3.0 Mar 22, 2020
netlify.toml docs(website): upgrade & make it standalone Dec 24, 2019
now.json chore(now): cors Dec 24, 2019
package.json chore: upgrade dependencies Mar 22, 2020
yarn.lock chore: upgrade dependencies Mar 22, 2020

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 react-svgr.com 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 * 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>
)

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.