react项目里如何使用阿里字体图标

1.首先我们看一下Ant Design官方文档的使用示例： 我们主要关注两个地方 ★★★★★

① createFromIconfontCN方法中scriptUrl的属性值，对应的就是我们自定义使用的字体图标的js路径。
② 字体图标的名字

2.去阿里矢量图官网，挑选需要的字体图标加入购物车，然后新建项目，将购物图标加入项目。

3.点击资源管理，点击进入我的项目，就可以看到我们新建的项目以及我们加入项目中的字体图标。在Symbol下，查看在线链接即可获得当前项目图标库的阿里CDN托管目录路径参数值。就是对应的1中的createFromIconfontCN方法中scriptUrl的属性值;图标中文名下的icon-xxxx对应的就是1中的图标的名称。

4.对应的我们的react实现代码和项目实现效果

import React from 'react';
import { createFromIconfontCN } from '@ant-design/icons';
import style from './style.less';

export const index = () => {
  const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_2541040_t1n2jp55tam.js',
  });
  return (
    <div className={style.contentContainer}>
      <IconFont type="icon-aixin" />
      <IconFont type="icon-daka" />
      <IconFont type="icon-dayin" />
      <IconFont type="icon-gaishuai" />
      <IconFont type="icon-gerenshezhi" />
      <IconFont type="icon-jiaoxue" />
      <IconFont type="icon-rili" />
      <IconFont type="icon-tuandui" />
      <IconFont type="icon-xinjian" />
      <IconFont type="icon-yiduyoujian" />
      <IconFont type="icon-zixun" />
    </div>
  );
};

export default index;