一键生成图标字体：icon-font-generator 使用指南
告别繁琐的图标管理，用命令行将SVG图标转化为轻量级Web字体
为什么需要图标字体？
在Web开发中，图标管理常面临挑战：
- 多分辨率适配问题
- 大量小图片增加HTTP请求
- 颜色/大小调整需重新导出
- 多色图标管理复杂
图标字体完美解决这些问题：矢量缩放、CSS控制、单请求加载所有图标。今天介绍的神器icon-font-generator只需两行命令即可生成全套解决方案！
极速入门
全局安装工具
npm install -g icon-font-generator
如果下载极慢或者根本无法下载，请看更改NPM镜像源 | 硬核鸡博客 - Semple HTJi Blog
生成图标字体
icon-font-generator C:\icons\*.svg -o dist
这条命令将：
- 读取
C:\icons目录所有SVG文件 - 生成字体文件（TTF/WOFF/WOFF2/EOT/SVG）
- 输出到
dist目录并自动创建CSS/HTML预览
核心参数详解
icon-font-generator [svg路径] -o [输出目录] [选项]
常用配置示例：
icon-font-generator assets/icons/*.svg \
-o public/fonts \
--name "app-icons" \
--prefix "ico-" \
--types "woff2,woff" \
--normalize \
--height 1000
关键参数说明：
| 参数 | 说明 | 默认值 |
|---|---|---|
-o, --out |
必填！输出目录 | - |
--name |
字体名称（影响文件名） | icons |
--css |
是否生成CSS文件 | true |
--html |
是否生成预览HTML | true |
--prefix |
CSS类名前缀 (.prefix-icon) |
icon |
--types |
生成字体格式 | svg,ttf,woff,woff2,eot |
--normalize |
统一图标尺寸 | false |
--mono |
生成等宽字体 | false |
--height |
固定字体高度（解决对齐问题） | - |
视频讲解：
BiliBili 中文:创建一个自己的Font Awesome | 硬核鸡_哔哩哔哩_bilibili
YouTube 塑料英语:https://www.youtube.com/watch?v=i9py32xYRLA
博客:一键生成字体图标：用 icon-font-generator 提升前端效率 | 硬核鸡博客 - Semple HTJi Blog
