如何在React中引入阿里图标库的图标

一、周所周知

• 在 Antd Design 中也有一些图标，但是要找到自己想要的图标不是很方便，需要一个一个的找。而且提供的图标数量也不是很多！
• 而阿里图标库可以通过搜索找到自己想要的图标，图标的数量和样式都比较的多，非常的方便快捷。那问题来了，如何在React中引入阿里图标库的图标！

二、如何引入

• 在 Antd Design 的 Icon图标 给了我们答案
  

• 而我们可以把这个封装成一个组件，方便在其他组件中使用，代码如下：

• #IconFont.jsx

import { createFromIconfontCN } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
	scriptUrl: '//at.alicdn.com/t/font_2235432_bfzmqr9xg9h.js',
    // scriptUrl的值是从阿里图标库中复制过来的，每次添加了图标都要重新复制新的链接
});

export default IconFont;

• scriptUrl怎么来的

• 把想要的图标都加入到项目库之后
  

• 如何使用呢

• 在需要的组件中引入，传入 type

import IconFont from './../components/IconFont';
// 路径写自己的
// 使用组件  type也是从图标库复制过来的
<IconFont type = "icon-order" />

• #####type从哪里来
  • 鼠标 hover 的时候就可以点击复制代码了
    

三、话又说回来

• 其实这样做虽然可以找到更多的图标，但是，每次要额外从图标库加一个图标时都要重新复制那个链接。 而 Antd Design 直接复制过来就像是一个组件的样子了。
• 大家各取所需把，选择自己想要的方式，或者说两个一起使用