如何扩展 antd 的 icon

2017-09-01

antd 自带的 icon 相信大家都会用了，<Icon type="team" /> 就搞定了，简直不能更方便了。

但是PM提需求了，team的图标要3个人的，现在是2个人。。。

所以这里教大家如何进行扩展。

打开 http://iconfont.cn/ 搜索 team，找到想要的图标，大家可以参考官方的使用方法生成想要的图标.
在选择代码的时候要选Unicode方式，因为 antd 用的就是这种方式，就像使用字体一样使用图标。

点击下面的复制代码，如下

@font-face {
  font-family: 'iconfont';  /* project id 403570 */
  src: url('//at.alicdn.com/t/font_403570_giurk9b0g3hxgvi.eot');
  src: url('//at.alicdn.com/t/font_403570_giurk9b0g3hxgvi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_403570_giurk9b0g3hxgvi.woff') format('woff'),
  url('//at.alicdn.com/t/font_403570_giurk9b0g3hxgvi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_403570_giurk9b0g3hxgvi.svg#iconfont') format('svg');
}

再添加字义字体的样式代码，同样在帮助中有，代码如下:

.iconfont {
  font-family: "iconfont" !important;
  font-size: 14px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

将以上代码放到你的 css 文件中，并引入项目。

之后就可以使用图标了:
1
<i class="iconfont"></i>
其中  就是你的图标名称。
注意 antd 的图标都有一个 anticon 的类，所以一般情况下你需要这样使用图标:
1
<i class="iconfont anticon"></i>
至此正常使用图标已经没有问题了

但是，我还有个特殊的情况，我的图标是在侧边导航，在点击折叠导航时图标的大小会变化，也就是font-size:从14px到16px，折叠的时候图标会变大，所以我的 css 样式还需要增加一行：
1
2
3
.ant-menu-inline-collapsed .iconfont {
font-size: 16px !important;
}
其中 ant-menu-inline-collapsed是折叠之后增加的类，所以这样设置就没有问题了。
搞定
希望可以帮助到大家。