iconfont-local

1.0.9 • Public • Published

iconfont-local

自动化获取最新的在线 iconfont,支持本地化渲染。

原理

通过 shell 脚本进行模拟请求生成 iconfont.json 文件,对比时间进行覆盖更新。

使用方法

Step 1 安装

# Yarn
yarn add iconfont-local --dev

# Npm
npm install iconfont-local --save-dev

Step 2 生成配置文件

npx iconfont-local-init

此时项目根目录会生成 iconfontConfig.json 文件:

{
  "url": "iconfont 请求网址",
  "cookie": "iconfont 请求头 cookie",
  "referer": "iconfont 请求头 referer"
}

打开你的 iconfont 主页并开启控制台 -> 网络

url

找到请求网址为 'https://www.iconfont.cn/api/project/detail.json?pid=xxxx' 的请求 -> 复制请求网址地址

cookie

找到请求标头里的 cookie 并复制

referer

找到请求标头里的 referer 并复制

Step 3 生成 iconfont.json 文件

npx iconfont-local-build

运行后会在根目录生成 iconfont.json 文件

用法

  1. Vue 可参考 And Design Vue 提供的 createFromIconfontCN 方法
  2. React 可参考 Ant Design 提供的 createFromIconfontCN 方法

例:

在线方法:

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)
})

Package Sidebar

Install

npm i iconfont-local

Weekly Downloads

1

Version

1.0.9

License

MIT

Unpacked Size

13.1 kB

Total Files

13

Last publish

Collaborators

  • chaterv