antd项目Icon组件使用自定义iconfont

antd的Icon组件可以使用自定的的 iconfont ^-^

具体使用:

  • 1 进入iconfont (https://www.iconfont.cn/)图标管理-我的项目中,Symbol下点击生成代码,如果暂时没有项目,右侧有新建项目按钮,想使用什么图标直接添加进去即可
image.png

点击上图中的生成代码 ,代码生成~~~


image.png
  • 2 写入通用js,scriptUrl的值就是刚刚生成的链接

export const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_393108_********.js', // 在 iconfont.cn 上生成
});

调用的时候,用法跟Icon组件使用一致,写入对应的type值,图标库中hover会有复制代码,复制以后写入type

image.png
import {MyIcon} from './common'
<Link to=''>
   <MyIcon type='icon-shangpin'></MyIcon>
   <span>商品分类</span>
</Link>
image.png

结束啦~~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容