React中使用iconfont的svg图标

React中使用iconfont的svg图标

1. 选择iconfont字体图标，并且导入到项目中

• 选择symbol类型
  
• 点击或者复制地址，页面进行跳转，复制页面中的代码
  
• 项目中新建一个文件，用来存放复制的代码
  
• 之后在项目的入口文件index.jsx导入

// 引入 svg 的字体图标
import "@/assets/styles/iconfont-svg"

2. 使用

1. 这里封装了一个组件，用来专门渲染svg的图标

import Reactfrom 'react'

/** 自定义的菜单 icon  */
const CustomIconCom = ({ iconPath }) => {
  return (
    <svg className="icon custom-svg" aria-hidden="true">
      <use xlinkHref={`#${iconPath}`}></use>
    </svg>
  )
}

export default CustomIconCom

2. 使用方式和其他组件的使用方式一样

import Reactfrom 'react'
import CustomIconCom from '@/components/CustomIcon'

/** 自定义的菜单 icon  */
const TextCom = () => {
  return (
    <CustomIconCom iconPath='icon-zhizhuxia'/>
  )
}

export default TextCom 

3. 效果

也可以设置宽高来设置大小