ant design使用本地IconFont文件

文章介绍了如何将IconfontCN的网络引用改为本地引用,以适应无外网环境。通过下载js文件并保存到public目录,然后修改Icon组件的scriptUrl为本地文件路径,即可实现图标库的本地引用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先参考这个官网的示例 :
官网示例:通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段, 可以使用 iconfont.cn 项目中的图标。
在iconfont.cn网站使用symbol方式生成在线链接。
在iconfont.cn网站使用symbol方式生成在线链接

但官网的说明有个问题,就是全部使用的是网络引用,有时候我们需要的环境可能并不是一个有外网的环境。所以我们需要将网络引用改为本地引用。

改为本地引用的方法也很简单。
//at.alicdn.com/t/font_xxx.js 这个文件下载下来,放在public 目录下面,例如存为font_xxx.js 然后

import { Icon } from 'antd';

const IconFont = Icon.createFromIconfontCN({
  // scriptUrl: '//at.alicdn.com/t/font_xxx.js'
   scriptUrl: 'font_xxx.js'
});

export default IconFont;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值