iconfont-js-cli

Generate an Ant Design createFromIconfontCN compatible iconfont.js from local SVG files.

Usage

npx iconfont-js-cli generate --input ./src/assets/icons --visualize

Default output:

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

Use it in a frontend project:

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

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

export default IconFont;

Render icons by generated type:

<IconFont type="icon-add-user" />

Commands

iconfont-js-cli generate --input <svg-dir> [--output public/iconfont-js] [--visualize]
iconfont-js-cli visualize --input <iconfont-js-file>

Options:

• --input <path>: required SVG directory for generate, required JS file for visualize.
• --output <dir>: output directory. Defaults to public/iconfont-js.
• --file <name>: output filename. Defaults to iconfont.js for generate and preview.html for visualize.
• --prefix <prefix>: icon type prefix. Defaults to icon.
• --warn-size-kb <n>: warn when an SVG is larger than this. Defaults to 50.
• --max-size-kb <n>: skip when an SVG is larger than this. Defaults to 100.
• --visualize: generate preview.html after generate.

Size Policy

SVG files over 50 KiB are included with warnings. SVG files over 100 KiB are skipped by default. Raise the limit only when complex SVG icons are intentional:

iconfont-js-cli generate --input ./icons --max-size-kb 200 --visualize

Type Naming

Icon types are generated from filenames:

• add-user.svg -> icon-add-user
• user_profile.svg -> icon-user-profile

Duplicate generated types fail the command so runtime symbols are not overwritten.