Icon Font Skill

Icon Font Skill

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

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:

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

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

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:

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

5. Open or report the generated preview:

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:

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:

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

Visualization

Generate a preview from an existing generated script:

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.