用antd或者zarm实现自定义icon

最新推荐文章于 2024-05-10 18:43:40 发布

sakuraxiaoyu

最新推荐文章于 2024-05-10 18:43:40 发布

阅读量910

点赞数 2

分类专栏： web前端文章标签： react.js web app

本文链接：https://blog.csdn.net/qq_40830369/article/details/119994856

版权

78 篇文章 2 订阅

订阅专栏

在前端项目中，尤其是移动端，经常需要用到各种各样的icon。然而实际情况是已有的组件库并不一定有我们需要的icon。这是后就往往需要自定义。

网上也有很多自定义的方法，我选一个自己使用的较为简单的。

首先在阿里矢量库里面，iconfont-阿里巴巴矢量图标库，新建一个项目，把你需要用到的icons全放在一个项目里面。类似这样。

在这里插入图片描述

需要新增的代码也不是很多

首先是要引入库。

import { Icon } from 'zarm';

不论是antd还是zarm,都会有提供自定义的一个函数。

这个createFromIconfont()里面填的代码就是在矢量库里面自动生成的。
在这里插入图片描述


  const CostomIcon = Icon.createFromIconfont(
    '这里的代码根据自己矢量库里面的来复制',
  );

引用这个icon也不难，一行代码的事情。
在这里插入图片描述

//这个type="",里面填写的是每个icon的名称。
<CostomIcon type="icon-chaxun" size="lg" />

关注