Ant Design(antd)4.X引入阿里iconfont.cn图标(Icon)

Ant Design(antd)4.X引入阿里iconfont.cn图标(Icon)

官方的Demo是这么给的:

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

const IconFont = createFromIconfontCN({
          
   
  scriptUrl: //at.alicdn.com/t/font_8d5l8fzk5b87iudi.js,
});

ReactDOM.render(
  <div className="icons-list">
    <IconFont type="icon-tuichu" />
    <IconFont type="icon-facebook" />
    <IconFont type="icon-twitter" />
  </div>,
  mountNode,
);

哦对，装的最新版的antd,Icon组件从antd中剥离了，得单独下载安装npm install --save @ant-design/icons

然后从包里拿一下createFromIconfontCN组件，const一个变量，用来接收组件创建的对象，创建对象时可以设置一个scriptUrl，这个东西很好玩。

先去里逛逛想要的图标。 登陆后把喜欢的图标通通加入购物车。 加购的图标都会放在右侧的小车车里。 点进小车车，新建个项目，把这些图标存进去。 加入项目后会跳转这个页面，点击生成代码。 鼠标放到图标上,可以进入编辑每个图标的界面。 编辑完,保存就好了。 点下更新代码， Symbol下,会生成.js链接，粘走。 自己的scriptUrl就生成好了，设置进去。

const IconFont = createFromIconfontCN({
          
   
  scriptUrl: //at.alicdn.com/t/font_1947315_1nsfq3v3p8x.js,
});

然后再写标签，标签中直接设置type，拿自己做的图标就OK啦。<Icon type="icon-arrow_right" /> emmmm…蓝箭头就出来了。 非常方便，非常好用en,