用antd或者zarm实现自定义icon
在前端项目中,尤其是移动端,经常需要用到各种各样的icon。然而实际情况是已有的组件库并不一定有我们需要的icon。这是后就往往需要自定义。
网上也有很多自定义的方法,我选一个自己使用的较为简单的。
首先在阿里矢量库里面,iconfont-阿里巴巴矢量图标库,新建一个项目,把你需要用到的icons全放在一个项目里面。类似这样。
需要新增的代码也不是很多
首先是要引入库。
import { Icon } from 'zarm';
不论是antd还是zarm,都会有提供自定义的一个函数。
这个createFromIconfont()里面填的代码就是在矢量库里面自动生成的。
const CostomIcon = Icon.createFromIconfont(
'这里的代码根据自己矢量库里面的来复制',
);
引用这个icon也不难,一行代码的事情。
//这个type="",里面填写的是每个icon的名称。
<CostomIcon type="icon-chaxun" size="lg" />