# Icon Font Skill

> Generate local Ant Design iconfont assets from SVG files using iconfont-js-cli. Use when a frontend project needs to replace an iconfont.cn scriptUrl, keep createFromIconfontCN and IconFont type usage, generate public/iconfont-js/iconfont.js, or create a visual preview of generated iconfont icons.

- Skill: `migoxlab/icon-font-skill` (Agent Skill, multi-file: 19 files)
- Install (CLI): `npx skillmds@latest add migoxlab/icon-font-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/migoxlab/icon-font-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: migoxlab (https://skillmd.com/u/migoxlab)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/migoxlab/icon-font-skill

---


# Icon Font Skill

Use this skill to generate a local `iconfont.js` from project SVG icons while preserving Ant Design usage:

```ts
import { createFromIconfontCN } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: '/iconfont-js/iconfont.js',
});

export default IconFont;
```

## Workflow

1. Locate the frontend project root and SVG icon directory.
2. Generate the local iconfont runtime:

```bash
npx iconfont-js-cli generate --input <svg-dir> --visualize
```

3. If the project uses a different public directory, pass it explicitly:

```bash
npx iconfont-js-cli generate --input <svg-dir> --output <project-public-dir>/iconfont-js --visualize
```

4. Update `createFromIconfontCN({ scriptUrl })` to the generated public path, usually:

```ts
scriptUrl: '/iconfont-js/iconfont.js'
```

5. Open or report the generated preview:

```text
public/iconfont-js/preview.html
```

## CLI Rules

- `--input` is required.
- Default output is `public/iconfont-js/iconfont.js`.
- Icon types are generated from filenames:
  - `add-user.svg` -> `icon-add-user`
  - `user_profile.svg` -> `icon-user-profile`
- SVG files over `50 KiB` are included with warnings.
- SVG files over `100 KiB` are skipped by default.
- Raise the hard limit only when the project intentionally uses complex SVG icons:

```bash
npx iconfont-js-cli generate --input <svg-dir> --max-size-kb 200 --visualize
```

- Duplicate generated icon types are fatal. Rename source SVG files before regenerating.
- Use a custom prefix when the project expects a different `type` namespace:

```bash
npx iconfont-js-cli generate --input <svg-dir> --prefix app --visualize
```

## Visualization

Generate a preview from an existing generated script:

```bash
npx iconfont-js-cli visualize --input public/iconfont-js/iconfont.js
```

The preview is a standalone `preview.html` that works from `file://` and shows type, source filename, size, and warning state for each icon.

## Verification

After generation:

1. Check CLI output for skipped files and warnings.
2. Inspect `preview.html` and search for expected icon types.
3. Confirm the frontend imports the generated script from the public path.
4. Use `<IconFont type="icon-example" />` with a known generated type in the app.

Do not reimplement SVG scanning or sprite generation inline. Use `iconfont-js-cli` as the source of truth.