Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
Transform SVGs into React components
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.svgOutput
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 SvgComponentSupporting 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.
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.
![@dependabot[bot]](https://web.archive.org/web/20210811125817im_/https://avatars.githubusercontent.com/in/29110?v=4){kind=small}
