The introduction of third-party icon library, and a list of icons in the foreground

At present the introduction of a third party vector icon library in the project has become a very common requirement. This is because the vector not only small, but when you zoom in without distortion, color can be easily modified. Compared to the traditional way to load a lot of pictures (assuming you do not use the "Sprite map" combination of images), it can save a lot of times http requests to web performance a huge improvement.

Here we introduce how to look together to project a third-party icon library, and how the icon list to the front page.

The introduction of third-party icon library

We have the most popular Ali Baba vector icon library as an example to introduce. First you need to log in Alibaba vector icon library official website: Alibaba vector icon library , you can use your github account or microblogging account login. Select the "My Project" under the icon management after logging:

In my project page click on the right side of the "New Project" icon to create a new project:


Here the most important thing is FontClass Font Family and these two values, the value is the icon of FontClass prefix library of icons, such as where the prefix written icon-, then you can use icon-xxx referenced icon icon library in the project. Font Family is the name of the chart library, by default, class i a label must be with the class name before you can apply icons to the icon library, but you can modify the prefix as the file generated iconfont.css icon library logo, which we'll come back.

After the project is created, you can go to the Search icon in the icon library you need, or able to do so can do it yourself. There will be three options put the mouse on the icon, select the first cart to add storage:

You can add as many icons to your cart, then back to "my project", slide down, you can see to the following figure:

click the shopping cart, select Add to project:

Okay, now that you've built your own third-party icon library. Then there is the need to introduce it into the project.

First select the Font class, then click download to a local, you can get a download.zip compression package, then extract the archive, open to the innermost layer, you can see all the relevant icon library files.

Generally we only need these files. In public / assets under the project to create a new folder (if no webpack project management, it can be placed anywhere, as long as the need to introduce the icon library can be referenced by the HTML tag to link to style file iconfont.css ), such as the icon, and then put a few paste the entire file.

Finally, only we need to introduce iconfont.css in HTML:

<link rel="stylesheet" type="text/css" href="./assets/icon/iconfont.css">

Now you can use the <i class = "iconfont icon-xxx"> in the form of a reference to the icon in the icon library. Note that, by default, this must be put on iconfont, that is, your name icon library, it can find the corresponding icon library. However, we can modify iconfont.css to avoid this "extra" class name.

Open iconfont.css, you can see the following configuration:

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

This is an icon in the specified class name has iconfont, all use our iconfont icon library, we can replace it with the following code:

[class^="icon-"], [class*=" icon-"] {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Must pay attention, class * = "icon" icon here in front of a space. The implication is that such class = "icon-xxx" or class = "xxx icon-xxx" class name in this format, should be cited after iconfont the icon library, so this modification, you do not need the class icon a name written iconfont. I.e. be used <i class = "icon-xxx"> to reference an icon.

If you need to introduce more icon library in the project, then you need to ensure that these Font Family icon libraries can not be repeated. If the icon library to use the same prefix, then you will not be able to identify as above icon library by the prefix, and the need to press the default format, plus the library name in the class icon, icon library to prevent conflict. If they are not the same prefix, then you can still configure class, use the prefix as an icon library logo.

Listed on the page icon

If you want users to see the current icon library support which icons, or let the user selects an icon library icon, then you need to be able to list all of the icons on the page. You can read by parsing the compressed package comes with all the icons iconfont.json class name:

font_class here is our icon name, but you need to prefix in front of mosaic and add the library name iconfont this icon can display icons ,which is:

<i class="iconfont icon-zujiansheji"></i>

If the icon is now the library is updated, only a few need to replace the above-mentioned document, the page listed in the icon will change immediately.

In addition to this way, we can also resolve the presentation documents demo_index.html accompanying the icon and class names, as follows:

this.$axios.get("./assets/linkIcon/demo_index.html").then(res => {
  try{
    let parser = new DOMParser();   //使用原生的DOMParser解析HTML文档
    let innerDocument = parser.parseFromString(res.data, "text/html");
    //查询该HTML中罗列的图标
    let target = innerDocument.querySelectorAll(".content.font-class li.dib");   
    //遍历查询结果，把每个图标数据保存在变量中
    target.forEach((item, index) => {
      let className = item.querySelector("span").className;
      let iconName = item.querySelector(".name").textContent;
      let iconCode = item.querySelector(".code-name").textContent;
	  
      this.$set(this.iconGroup, index,{
        className: className,
        iconName: iconName,
        iconCode: iconCode
      })
    })
  } catch(e){
    console.log(e);
  }
})

Now we got a local variable iconGroup every object icon icon library, you can list them in any form, and i just want to class label is set to className here, you can immediately display the picture, it does not require additional splicing operation.

In fact written here is a very simple front-end crawler, it captures an HTML page, parses the data and structure. Since this is in the front-end environment, parse the HTML file it is very simple. If you are using a node or python, then you need to use the relevant tools library to parse HTML files.