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.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.
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.
-
1.在项目中使用svg的好处： ① 不失真, 放大缩小图像都很清晰； ② SVG文件是纯粹的XML, 也是一种DOM结构，可以在svg文件中删减一些无用的写死大小的代码，然后在引入svg的 时候通过css自定义其大小颜色，提高复用率。 ③ 文件比一般的jpg.png图片较小。 2.用法 1.安装svgr-webpack npm install @svgr/webpack --save-dev //
-
1.安装svgr的依赖 npm install @svgr/webpack --save-dev cnpm install @svgr/webpack yarn add @svgr/webpack 总有一款命令适合你可以安装成功 2.建立源文件夹和目标文件夹 一般可以在src目录下分别建立两个文件夹assets和icons,分别用于存放.svg的svg源图标文件，和生成的React组件文件，其目