目前在項目中引入一個第三方矢量圖示庫已經成為了非常常見的需求。這是因為矢量圖不僅體積小，而且在放大時不會失真，顔色也可以輕松修改。相比于傳統的方式去加載大量的圖檔（假設你沒有用“雪碧圖”組合圖檔），它還可以節省很多次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：
現在你就可以使用<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這個圖示庫名才可以顯示圖示，即：
現在如果圖示庫有更新，隻需要重新替換上述幾個檔案，頁面中所羅列的圖示立即就會變化。
除了這種方式，我們還可以從附帶的介紹檔案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檔案。