2.0.0 • Published 6 years ago

svgr v2.0.0

Weekly downloads
3,858
License
MIT
Repository
github
Last release
6 years ago

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.

@rafibarash/react-scriptselectron-react-tools@infinitebrahmanuniverse/nolb-svgr@everything-registry/sub-chunk-2859svgr.macrovwi-react-scriptsrmark-react-scriptsshakacode-react-scriptssass-and-stuff-react-scriptsrestartallkill-react-scriptsswt-divi-scriptsuwebpackventura-react-scripts@spiffdog/react-scriptsmkl-custom-react-scriptsmnulayer2-react-scriptshalvbra-react-scriptshexes-react-scriptshugohammarstrom-react-scriptsmdebugkai-react-scripts-nextkk-react-scriptshsiaokang-react-scriptshottab-react-scriptshoodies-react-scriptsgymbro-react-scriptsjzkit-react-scriptslab-react-scriptsgkb-react-scriptsmongodb-react-scriptsmarkmarcelo-react-scriptsluke-cranohbdy-react-scriptsorchard-react-scriptspipe-automateroezy-scriptsmy-unicodelabs-react-scriptsphotosynthesisphantom-test-react-scriptsreact-galeriste-scriptsreact-good-inputreact-scripts-extreact-scripts-appierreact-scripts-brady-nextreact-scripts-add-genreact-scripts-codefevernew-react-scriptsqianyue-react-scriptsradtsreact-app-rewire-svgrreact-scripts-redux-sassreact-scripts-rynosterreact-scripts-scratch-integrationreact-scripts-materialreact-scripts-modulesreact-scripts-publishreact-scripts-openseadragonreact-scripts-test-nextreact-scripts-webextreact-scripts-ts-magiscssreact-scripts-ts-nsredux-scriptsrs-tsgqlrs-tsqqlsimpals-react-scriptssowhatdoido-react-scriptsttdebugtizentv-react-scripts@arpijakab/react-scripts@aragon/react-scripts@akomkov/react-scripts@blbradley/react-scripts@brunolemos/react-scripts-ts@bthegit/bespoke-react-scripts@brianhpedersen/react-scripts@brandonjcreek/react-scriptsyeti-scriptstruongpx-react-scriptszesty-react-scripts@e_labs/generic-components@halvbra/react-scripts@iamturns/react-scripts@eglaost/react-scripts@grandrounds/react-scripts@infiniteluke/react-scripts@leandro.demartini/react-scripts@lepetitbloc/creact-scripts@michael-lefebvre/react-scripts@faqta/react-scripts@merchantlabs/react-scripts@jason0x43/react-scripts@jahdaic/react-scripts@juan-saavedra/react-scripts@indream/react-scripts@ofm/build-tool@qshan/react-scripts@ristic/react-scripts@strothj/react-scripts@phenax/custom-react-scripts
2.0.0

6 years ago

1.10.0

6 years ago

1.9.2

7 years ago

1.9.1

7 years ago

1.9.0

7 years ago

1.8.1

7 years ago

1.8.0

7 years ago

1.7.0

7 years ago

1.6.0

7 years ago

1.5.0

7 years ago

1.4.0

7 years ago

1.3.0

7 years ago

1.2.0

7 years ago

1.1.0

7 years ago

1.0.0

7 years ago

0.5.0

7 years ago

0.4.0

7 years ago

0.3.0

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.0

7 years ago

0.0.0

7 years ago