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

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,
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

先去Iconfont里逛逛想要的图标。
登陆后把喜欢的图标通通加入购物车。

加购的图标都会放在右侧的小车车里。

点进小车车，新建个项目，把这些图标存进去。


加入项目后会跳转这个页面，点击生成代码。

鼠标放到图标上,可以进入编辑每个图标的界面。

编辑完,保存就好了。

点下更新代码，

Symbol下,会生成.js链接，粘走。

自己的scriptUrl就生成好了，设置进去。

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

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

非常方便，非常好用en,