react 引入阿里矢量图标库并封装

阿里矢量图库
阿里矢量图标库是国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能，是阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。

在很多项目中，我们会使用到大量的小图标，这种情况下，使用字体来实现图标就有很多优势：字体文件小； 容易编辑和维护，尺寸和颜色可以用css来控制。

使用形式分为三种：unicode引用、font-class引用、symbol引用
其中前两种引用，都不支持多色图标，因此我们着重介绍symbol引用

symbol引用的优点

1. 支持多色图标了，不再受单色限制。
2. 支持像字体那样通过font-size,color来调整样式。
3. 支持 ie9+
4. 可利用CSS实现动画。
5. 减少HTTP请求。
6. 矢量，缩放不失真

使用步骤

1. 登录:http://www.iconfont.cn/

图标管理->我的项目->然后新建项目

搜索所需要的图标添加入库，点击购物车图标选择将所选图标添加至应用的项目

添加之后，项目详细信息如下，在这里可对图标颜色进行调整，调整好后下载至本地

下载解压后文件。如下

我们将icon文件夹添加至项目静态资源目录

然后封装Icon组件。Icon.jsx 

import '@/assets/icon/iconfont'

 
export default function Icon(props) {
  return (
    <svg className="icon" aria-hidden="true">
      <use xlinkHref={`#${props.type}`} />
      <style jsx>{`
        .icon {
               width: 1em; height: 1em;
               vertical-align: -0.15em;
               fill: currentColor;
               overflow: hidden;
           }
      `}</style>
    </svg>
  )
}

 
至此，Icon组件封装完成，调用如下

import Icon from '@/components/Icon'

<Icon type="typename"></Icon>

注意，这里的typename为项目图标下面对应的名称，对应写入即可。例如‘iconhuiyi’

原文链接：在react项目中使用阿里iconfont字体库的svg图标_ant-design-react使用iconfont.cn图标svg代码,图标颜色跟随字体颜色-CSDN博客