前言

iconfont图标库是比较受欢迎的，但每一次的更新都非常麻烦，大概需要以下6个步骤：

打开iconfont登录页，输入账号密码，登录
找到需要下载的图标库详情页
点击下载按钮，等待下载完成
将下载好的压缩包解压并重命名为iconfont文件夹
删除项目目录中的iconfont文件夹
将解压重命名后的iconfont文件夹拖到项目目录为减少这种无意义的重复操作，我们可以使用iconfont-manager这个工具来解决。iconfont-manger是一个可以管理所有iconfont图标库更新的工具。

安装

npm install iconfont-manager -g

功能

1. 初始化项目

使用场景：第一次安装iconfont-manager

操作步骤：

输入iconfont官网的手机号和密码（目前不支持GitHub账号授权登录，毕竟不科学上网的话，GitHub时不时会抽风。若之前是GitHub账号，绑定手机号即可）。
自动执行爬虫脚本，将账号的所有iconfont图标库信息爬取并存储在用户目录的.iconfontrc文件（不同平台的用户目录不同，注意查看命令执行之后的提示，如下图所示），目前这个配置文件的位置不能随意更改。
修改.iconfontrc文件的filePath属性，设置各个图标库对应的保存地址（请使用绝对路径），也可通过功能5图形化界面管理进行设置。

iconfont-manager init <phoneNumber> <password>

.iconfontrc格式如下：

{
  "projects": [
    {
      "id": "2936807",
      "name": "仓库系统",
      "user": "18812345678",
      "password": "abc123",
      "filePath": "初始化后，这个字段是空的，需要手动设置图标保存的绝对路径"
    },
    {
      "id": "2291089",
      "name": "门户网站",
      "user": "18812345678",
      "password": "abc123",
      "filePath": "/Users/wupeng/project/warehouse/src/assets"
    }
  ]
}

2. 查看所有图标库

使用场景：查看保存的所有图标库，可以快速复制图标库id，执行更新图标库任务

基本原理：读取用户目录下的.iconfontrc文件，将所有的图标库信息通过列表的形式展现。

iconfont-manager ls

3. 更新单个图标库

使用场景：更新图标库，只需输入一个图标库id（可以使用功能2先打印出来，复制你需要的id）

iconfont-manager update <projectId>

4. 更新多个图标库

使用场景：同时更新多个图标库，多个id空格隔开

iconfont-manager update <projectId...>

5. 图形化界面管理

使用场景：浏览器打开一个图形化管理界面，可在这个界面修改图标库信息，执行更新等操作；其实功能1初始化之后也可以通过这个命令打开一个图形化界面，在这个界面补充好filePath保存路径，记得点击“全部保存”按钮。

iconfont-manager ui

6. 更新临时项目

使用场景：如果.iconfontrc文件中没有这个图标库，可以使用这个命令临时下载一个图标库，信息将不会保存到.iconfontrc中

iconfont-manager updateOne <id> <name> <user> <password> <filePath>

7. 新增项目

使用场景：来了一个新项目，把要图标库下载到项目目录中。项目信息会写入.iconfontrc文件中，同时最后一个参数可以选择是否立即更新图标库，该参数默认是false，如果是true，信息保存进配置文件同时，也会自动更新图标库。

iconfont-manager add <id> <name> <user> <password> <filePath> [immediately]

补充说明

支持多用户，可以修改.iconfontrc文件配置即可，如下图例子两个用户手机号不同。比如，如果你有两个手机号，两个用户的数据可以存储在同一个配置文件中。

{
  "projects": [
    {
      "id": "2936807",
      "name": "仓库系统",
      "user": "18812345678",
      "password": "abc123",
      "filePath": "/Users/wupeng/project/warehouse/src/assets"
    },
    {
      "id": "2291089",
      "name": "另一个用户",
      "user": "18866668888",
      "password": "abc456",
      "filePath": "/Users/wupeng/project/official-website/src/assets"
    }
  ]
}

项目地址

GitHub：github.com/gaoxiaosi/i…

NPM：www.npmjs.com/package/ico…

如果您觉得项目有趣或对您有所帮助，请到GitHub给个Star，谢谢！

技术核心是将图标库的信息保存在本地配置文件，通过node.js读取本地配置文件，执行不同的指令，再通过puppeteer去爬取iconfont官网并下载图标库，再将下载好的文件解压保存在指定目录。下一篇文章我会讲整个的功能设计和详细的代码实现！

一个自动更新iconfont的工具：iconfont-manager

前言

安装

功能