@okcy/iconfont-sync

自动将 iconfont 字体图标资源同步到本地的工具包。

安装

pnpm add @okcy/iconfont-sync

配置

在项目根目录创建 .iconfont-sync.json：

[
  {
    "url": "//at.alicdn.com/t/c/font_xxx.css",
    "outDir": "iconfont",
    "prefix": "icon-",
    "fontFamily": "iconfont"
  }
]

支持同时同步多个项目：

[
  {
    "url": "//at.alicdn.com/t/c/font_xxx.css",
    "outDir": "iconfont"
  },
  {
    "url": "//at.alicdn.com/t/c/font_xxx.css",
    "outDir": "iconfont-mp",
    "prefix": "mp-",
    "fontFamily": "iconfont-mp"
  }
]

配置项

| 字段 | 必填 | 默认值 | 说明 | | ------------ | ---- | ------------ | ------------------------------------------------------------------------- | | url | 是 | — | iconfont CDN CSS 地址 | | outDir | 否 | "iconfont" | 资源输出目录 | | prefix | 否 | "icon-" | CSS class 前缀，替换 CDN 原始前缀 | | fontFamily | 否 | "iconfont" | @font-face 中的 font-family 名称，多个项目时设为不同值可避免冲突 | | fontSize | 否 | 不输出 | .iconfont 类的 font-size 值，如 "14px"，未设置时生成 CSS 不含该属性 |

使用

CLI

# 首次运行自动生成 .iconfont-sync.json 模板
npx iconfont-sync

# 编辑配置文件后再次运行即可同步
npx iconfont-sync

API

import { sync } from "@okcy/iconfont-sync";

// 同步所有配置的 iconfont 资源
await sync();

// 指定配置文件路径
await sync({ configPath: "./path/to/.iconfont-sync.json" });

输出结构

执行后会在 outDir 目录生成以下文件：

iconfont/
├── iconfont.css          # CSS 样式文件（字体引用已替换为本地文件）
├── iconfont.js           # SVG 精灵 JS
├── iconfont.json         # 图标元数据（名称、unicode 等）
├── iconfont.woff2        # 字体文件
├── iconfont.woff
├── iconfont.ttf
├── index.ts              # 图标名称映射（含 JSDoc 注释）
├── svg.ts                # SVG 模块统一导入入口
└── svg/
    └── *.svg             # 独立 SVG 图标文件

index.ts 图标映射

export default {
  /**
   * @name sousuo
   * @description 搜索
   */
  sousuo: "icon-sousuo",

  /**
   * @name duijie
   * @description 对接
   */
  duijie: "icon-duijie",
  // ...
};

svg.ts SVG 导入

/**
 * @name sousuo
 * @description 搜索
 */
export { default as IconSvgSousuo } from "./svg/sousuo.svg";

/**
 * @name duijie
 * @description 对接
 */
export { default as IconSvgDuijie } from "./svg/duijie.svg";