1 - 创建一个JS文件,图标组件名大写字母开头
icon -
- Add.js
2 - 在JS文件中导入react,并创建一个箭头函数,将<svg>格式图片复制进来,之后导出这个组件
注意:有可能会提示fill-rule和clip-rule书写格式不对,按照eslint提示的格式修改也可以使用
import React from 'react'
const AddIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://....//svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="...."/>
</svg>
)
export {AddIcon}
3 - 在需要用到这个图标组件的地方进行导入使用即可
//导入图标组件
import {AddIcon} from './icon/Add.js'
const XXX = () => {
return (
....
//可以使用单标签
<AddIcon/>
....
)
export XXX