一键生成字体图标：用 icon-font-generator 提升前端效率

一键生成图标字体：icon-font-generator 使用指南

告别繁琐的图标管理，用命令行将SVG图标转化为轻量级Web字体

为什么需要图标字体？

在Web开发中，图标管理常面临挑战：

• 多分辨率适配问题
• 大量小图片增加HTTP请求
• 颜色/大小调整需重新导出
• 多色图标管理复杂

图标字体完美解决这些问题：矢量缩放、CSS控制、单请求加载所有图标。今天介绍的神器icon-font-generator只需两行命令即可生成全套解决方案！

极速入门

1️⃣ 全局安装工具

npm install -g icon-font-generator

如果下载极慢或者根本无法下载，请看https://semple.osfc.org.cn/index.php/archives/5/

2️⃣ 生成图标字体

icon-font-generator C:\icons\*.svg -o dist

这条命令将：

1. 读取C:\icons目录所有SVG文件
2. 生成字体文件（TTF/WOFF/WOFF2/EOT/SVG）
3. 输出到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

关键参数说明：