使用svgr将svg图标转为React组件

1.安装svgr的依赖

npm install @svgr/webpack --save-dev
cnpm install @svgr/webpack
yarn add @svgr/webpack

总有一款命令适合你可以安装成功

2.建立源文件夹和目标文件夹

一般可以在src目录下分别建立两个文件夹assets和icons,分别用于存放.svg的svg源图标文件，和生成的React组件文件，其目录结构如下：

src/
-- index.js
-- App.js
-- assets/
----Twitter.svg
-- icons/
----暂时是空的

3.在package.json中添加新的npm脚本

  "scripts": {
   "svgr": "svgr -d src/icons/ src/assets/", // 第一个参数为存放.js的目标文件夹，第二个为存放.svg的源文件夹
   "analyze": "ANALYZE=true yarn build",
   "dev": "next dev",
   "build": "next build",
   "start": "next start",
   // ....
}

4.运行npm run svgr脚本进行转换

每次在assets中添加了新的svg文件后，都需要运行svgr脚本进行转换

npm run svgr

此时icons就会多出一个```Twitter.js``文件,包含该组件。

src/
-- index.js
-- App.js
-- assets/
----Twitter.svg
-- icons/
----Twitter.js

5.使用

//在任何需要使用svg组件的Component或者Page中可以使用
import TwitterIcon from '@/icons/Twitter.js';
export default function MyComponent(){
   return (
   		<>
   			<TwitterIcon width="40px" height="40px"/>
   		</>
   	)
}

可以给Icon添加宽高等props.