preface

The Iconfont icon library is popular, but each update is very troublesome, and involves the following six steps:

  1. Open the iconfont login page and enter the account password to log in
  2. Find the icon library details page you want to download
  3. Click the Download button and wait for the download to complete
  4. Unzip the downloaded package and rename it as the iconfont folder
  5. Delete the iconFONT folder in the project directory
  6. Drag the decompressed and renamed iconFont folder to the project directory

To reduce this kind of meaningless repeated operation, we can use the tool iconfont-manager to solve the problem. Iconfont -manger is a tool to manage all iconfont icon library updates.

The installation

npm install iconfont-manager -g
Copy the code

function

1. Initialize the project

Usage scenario: Install iconfont manager for the first time

Operation steps:

  1. The inputIconfont websiteMobile phone number and password (currently does not support GitHub account authorization login, after all, not scientific access to the Internet, GitHub from time to time. If you have a GitHub account before, just bind it to your mobile number.
  2. Automatically execute crawler script to crawl all iconfont icon library information of the account and store it inUser directorythe.iconfontrcFiles (different platformsUser directoryThe configuration file location cannot be changed at will.
  3. Modify the.iconfontrcOf the filefilePathProperty to set the corresponding save address for each icon libraryAn absolute path), you can also set the parameters through Function 5 GUI management.
iconfont-manager init <phoneNumber> <password>
Copy the code

.iconfontrcThe format is as follows:

{
  "projects": [{"id": "2936807"."name": "Warehouse System"."user": "18812345678"."password": "abc123"."filePath": "After initialization, this field is empty. You need to manually set the absolute path to save the icon."
    },
    {
      "id": "2291089"."name": "Portal"."user": "18812345678"."password": "abc123"."filePath": "/Users/wupeng/project/warehouse/src/assets"}}]Copy the code

2. View all icon libraries

Usage scenario: View all the saved icon libraries and quickly copy the iD of the icon library to update the icon library

Basic principle: read the user directory. Iconfontrc file, all icon library information through the form of a list.

iconfont-manager ls
Copy the code

3. Update a single icon library

Use scenario: To update the icon library, just enter an icon library ID (you can use function 2 to print it first and copy the ID you need)

iconfont-manager update <projectId>
Copy the code

4. Update multiple icon libraries

Usage scenario: Update multiple icon libraries at the same time. Multiple ids are separated by Spaces

iconfont-manager update <projectId... >Copy the code

5. GUI management

Usage scenario: A graphical management page is displayed. On this page, you can modify the icon library information and perform operations such as update. After function 1 is initialized, you can also use this command to open a graphical interface. In this interface, add the path to save filePath. Remember to click the “Save All” button.

iconfont-manager ui
Copy the code

6. Update temporary projects

Usage scenario: If the icon library does not exist in the. Iconfontrc file, you can use this command to temporarily download an icon library. The information will not be saved to the. Iconfontrc file

iconfont-manager updateOne <id> <name> <user> <password> <filePath>
Copy the code

7. New projects

Usage scenario: a new project comes in, download the icon library to the project directory. The project information will be written to the. Iconfontrc file, and the last parameter can be used to select whether to update the icon library immediately. This parameter is false by default, if true, the information will be saved to the configuration file and the icon library will be automatically updated.

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

added

Multiple users are supported and can be modified. The iconfontrc file can be configured as shown in the following example: The mobile phone numbers of the two users are different. For example, if you have two mobile phone numbers, both users’ data can be stored in the same profile.

{
  "projects": [{"id": "2936807"."name": "Warehouse System"."user": "18812345678"."password": "abc123"."filePath": "/Users/wupeng/project/warehouse/src/assets"
    },
    {
      "id": "2291089"."name": "Another user"."user": "18866668888"."password": "abc456"."filePath": "/Users/wupeng/project/official-website/src/assets"}}]Copy the code

The project address

GitHub:github.com/gaoxiaosi/i…

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

If you find the project interesting or helpful, please go to GitHub and give it a Star, thank you!

The core technology is to save the icon library information in a local configuration file, use Node. js to read the local configuration file, execute different commands, and then use puppeteer to climb the iconfont official website and download the icon library, decompress the downloaded files and save them in a specified directory. In the next article I will cover the whole function design and detailed code implementation!