使用svg图标的方法

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值