自动化获取最新的在线 iconfont,支持本地化渲染。
通过 shell 脚本进行模拟请求生成 iconfont.json 文件,对比时间进行覆盖更新。
# Yarn
yarn add iconfont-local --dev
# Npm
npm install iconfont-local --save-dev
npx iconfont-local-init
此时项目根目录会生成 iconfontConfig.json
文件:
{
"url": "iconfont 请求网址",
"cookie": "iconfont 请求头 cookie",
"referer": "iconfont 请求头 referer"
}
打开你的 iconfont 主页并开启控制台 -> 网络
找到请求网址为 'https://www.iconfont.cn/api/project/detail.json?pid=xxxx' 的请求 -> 复制请求网址地址
找到请求标头里的 cookie 并复制
找到请求标头里的 referer 并复制
npx iconfont-local-build
运行后会在根目录生成 iconfont.json 文件
例:
在线方法:
import { createFromIconfontCN } from "@ant-design/icons-vue";
import iconfontConfig from "iconfont.json";
// 此方法需要保证你的 iconfont 更新后,手动更新了在线链接
const IconFont = createFromIconfontCN({
scriptUrl: iconfontConfig.data.font.js_file // 替换为你的 iconfont.json 路径
})
离线方法:
// 此方法无需手动更新在线链接,即是 iconfont 在线链接维护也可正常使用(前提是 json 文件可正常获取)
import {createFromIconfontCN} from "@ant-design/icons-vue";
import compileIcon from "iconfont-local/build/script/compileIcon";
import iconfontConfig from "iconfont.json"; // 替换为你的 iconfont.json 路径
const IconFont = createFromIconfontCN({
scriptUrl: compileIcon(iconfontConfig.data.icons)
})