引入第三方圖標庫，並在前臺羅列圖標

目前在項目中引入一個第三方矢量圖標庫已經成爲了非常常見的需求。這是因爲矢量圖不僅體積小，而且在放大時不會失真，顏色也可以輕鬆修改。相比於傳統的方式去加載大量的圖片（假設你沒有用“雪碧圖”組合圖片），它還可以節省很多次http請求，給網頁性能帶來巨大的提升。

下面我們就一起來看如何往項目中引入一個第三方圖標庫，以及如何把圖標羅列到前端頁面中。

引入第三方圖標庫

我們以最流行的阿里巴巴矢量圖標庫爲例來介紹。首先你需要登錄阿里巴巴矢量圖標庫官網：阿里巴巴矢量圖標庫，可以使用你的github賬號或者微博賬號登錄。登錄之後選擇圖標管理下的“我的項目”：

在我的項目頁面點擊右側“新建項目”圖標新建一個項目：


這裏最重要的是FontClass和Font Family這兩個值，FontClass的值是該圖標庫中圖標的前綴，比如這裏的前綴寫成了icon-，那麼你在項目中就可以使用icon-xxx來引用圖標庫中的圖標。Font Family是圖表庫的名字，默認情況下，一個i標籤的class中必須要帶這個類名，才能引用到該圖標庫中的圖標，不過你可以通過修改生成的iconfont.css文件來以前綴作爲圖標庫標識，這個我們後面會講到。

項目創建完成後，你就可以去圖標庫中搜索你需要的圖標，或者有條件的話可以自己做。鼠標放到圖標上時會有三個選項，選擇第一個購物車即可添加入庫：

你可以將任意多的圖標添加到購物車，然後回到“我的項目”，向下滑動，可以看到下圖：

點擊這個購物車，選擇添加至項目：

好的，現在你已經構建了自己的第三方圖標庫。接下來就是需要把它引入到項目中。

首先選擇Font class，然後點擊下載至本地，就可以得到一個download.zip壓縮包，然後把壓縮包解壓，打開至最內層，就可以看到所有相關的圖標庫文件。

一般來說我們只需要這幾個文件即可。在項目的public/assets下新建一個文件夾（如果沒有使用webpack進行項目管理，可以將其放在任意位置，只要在需要引入圖標庫的HTML中可以用link標籤引用到iconfont.css樣式文件即可），如icon，然後把這幾個文件全部粘貼進去。

最後只需要在HTML中這樣引入iconfont.css：

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

現在你就可以使用<i class=“iconfont icon-xxx”>的形式來引用圖標庫中的圖標了。注意，默認情況下，這裏必須要帶上iconfont，也就是你的圖標庫名，它才能找到對應的圖標庫。不過我們可以通過修改iconfont.css來避免這個“多餘”的類名。

打開iconfont.css，可以看到下面的配置：

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

這是在指定具有iconfont類名的圖標，全部使用我們的iconfont圖標庫，我們可以把它替換成下面的代碼：

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

一定要注意，class*=" icon"這裏的icon前面有一個空格。這裏的含義是，諸如class="icon-xxx"或者class="xxx icon-xxx"這種格式的類名，都要引用iconfont這個圖標庫，所以這樣修改之後，你就不需要在圖標的類名中寫iconfont了。也就是可以使用<i class=“icon-xxx”>來引用圖標。

假如你需要在項目中引入多個圖標庫，那麼你需要保證這些圖標庫的Font Family不能重複。如果這些圖標庫使用相同的前綴，那麼你就不可以像上面一樣通過前綴來標識圖標庫，而需要按默認的格式，在class中加上圖標庫名，防止圖標庫衝突。如果它們的前綴各不相同，那麼你仍然可以配置class，用前綴作爲圖標庫標識。

在頁面中羅列圖標

假如你想讓用戶看到當前圖標庫支持哪些圖標，或者想讓用戶選擇圖標庫裏的圖標，那麼你就需要能夠把圖標全部羅列到頁面上。你可以通過解析壓縮包中附帶的iconfont.json來讀取所有圖標的類名：

這裏的font_class就是我們的圖標名，不過你需要在前面拼接前綴，並且加上iconfont這個圖標庫名纔可以顯示圖標，即：

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

現在如果圖標庫有更新，只需要重新替換上述幾個文件，頁面中所羅列的圖標立即就會變化。

除了這種方式，我們還可以從附帶的介紹文件demo_index.html中解析出圖標名和類名，代碼如下：

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);
  }
})

現在我們本地的iconGroup變量就拿到了圖標庫中每一個圖標對象，你可以以任意的形式羅列它們，並且只需要把i標籤的class設置爲這裏的className，立即就可以顯示該圖片，不需要進行額外的拼接操作。

實際上這裏所寫的就是一個極其簡單的前端爬蟲，它抓取一個HTML頁面，解析其中的結構和數據。由於這是在前端環境下，因此解析HTML文件非常簡單。如果使用的是node或者python，那麼就需要使用相關的工具庫來解析HTML文件。