react项目引入本地iconfont图标_react 图标本地化

场景： 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;
1
2
3
4
5
6
7
8

使用：

import SuperIcon from "@/components/icon";
// ...
 <SuperIcon type="message" style={{ color: "#54C3F1" }} />
1
2
3