GitHub - smooth-code/svgr: Transform SVG into React components ?
source link: https://github.com/smooth-code/svgr
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Transform SVGs into React components
Watch the talk at React Europe
SVGR is an universal tool to transform SVG into React components.
SVGR takes a raw SVG and transforms it into a ready-to-use React component.
Docs
See the documentation at react-svgr.com for more information about using svgr
!
Quicklinks to some of the most-visited pages:
Example
Take a 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
Get an optimized React component
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:
Learn more about supporting SVGR.
Contributing
Check out the contributing guidelines
License
Licensed under the MIT License, Copyright © 2017-present Greg Bergé.
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK