我做了一个 Iconfont 一键下载工具：支持收藏页批量导出 SVG / PNG

最近做了一个自己会用到的小工具：Iconfont 一键下载。

它的目标很直接：

• 在 iconfont.cn 收藏详情页里
• 一键把当前图标批量导出出来
• 支持 SVG ZIP、PNG ZIP、SVG + PNG ZIP
• 如果页面有懒加载，还可以先做一次 整页收集 再导出

GitHub：github.com/BZSH2/iconf…

为什么会做这个工具

平时在用 iconfont 的时候，经常会碰到几个麻烦点：

1. 收藏页图标多，逐个下载很慢
2. 有时候只想快速拿一批 SVG / PNG 做开发或交付
3. 页面有懒加载，当前视口之外的图标不一定一次性都能拿到
4. 下载下来的文件格式，最好还能尽量贴近直接下载版，后面进工程更省事

所以就做了这个 Chrome 扩展，专门解决“收藏页批量导出”这件事。

现在支持什么

目前这个工具支持：

• SVG ZIP 导出
• PNG ZIP 导出
• SVG + PNG ZIP 一起导出
• 整页收集：自动滚动页面，尽量把懒加载图标也收进来
• 自定义文件名前缀
• PNG 尺寸选择：128 / 256 / 512 / 1024
• 三种入口：
  • 左键扩展图标
  • 右键扩展快捷菜单
  • 页面右下角浮动面板

一个我比较在意的点：导出的 SVG 代码格式

这次我专门把批量导出的 SVG 做了几轮调整，目标不是只“能显示”，而是尽量往 iconfont 直接下载版 的代码风格去靠。

目前导出的 SVG 已经尽量做到：

• 补齐更像原始下载版的根节点信息
• width / height、class、p-id 等风格尽量贴近直接下载版
• 颜色尽量从 rgb(...) 收口回更常见的 #HEX
• 避免无意义的空 defs
• 减少页面样式快照带来的多余默认属性

也就是说，这个工具导出的文件，不只是“看起来对”，而是更适合继续进前端项目里用。

怎么用

1. 安装扩展

目前先通过源码方式安装：

1. 打开 chrome://extensions/
2. 开启 开发者模式
3. 选择 加载已解压的扩展程序
4. 选择项目目录 iconfont-download

2. 打开 iconfont 收藏详情页

支持：

• https://iconfont.cn/collections/detail*
• https://www.iconfont.cn/collections/detail*

3. 导出图标

最常用的流程是：

1. 打开收藏页
2. 点击扩展图标
3. 如果想尽量收全，先点一次 整页收集
4. 再选择导出：
   • SVG ZIP
   • PNG ZIP
   • SVG + PNG ZIP

使用截图

下面两张图，基本就是这个工具最常用的一套使用方式：

1. 使用流程

2. 弹窗界面预览

适合什么场景

我觉得比较适合这些情况：

• 前端开发要快速拿一批 iconfont 图标
• 设计 / 产品要整理素材包
• 运营 / 文档同学需要一批 PNG 做展示
• 已经在用 iconfont 收藏页，但不想一个个手动点下载

项目地址

GitHub：github.com/BZSH2/iconf…

如果你刚好也在用 iconfont 收藏页，欢迎试试。

如果你有更想要的导出格式或者工作流，也欢迎提 issue。