场景:
ant design
的iconfont
字体是调用的阿里的CDN地址,对于一些内网的应用,或者被屏蔽的站点,下载的字体或图标就不生效时,或需要使用本地的icon文件。
解决方法: 下载图标库,本地引入。
1.首先在iconfont
上下载图标库到本地
2.解压下载的压缩包,将js文件放在项目文件夹下
3.引入(尽量使用import
方式来引入url,避免相对路径由于打包造成路径丢失的问题)
import { Icon } from "antd";
import icon from "./iconfont"; // 引入的inconfont文件
const SuperIcon = Icon.createFromIconfontCN({
scriptUrl: { icon }, // 关键
});
export default SuperIcon;
使用:
import SuperIcon from "@/components/icon";
// ...
<SuperIcon type="message" style={{ color: "#54C3F1" }} />