阿裡巴巴矢量圖標庫（Iconfont）-利於UI和前端的搭配

　　　　前端時間，做一個小網站的時候，需要用到很多小圖標，UI設計好之後不知道如何使用，如果使用圖片那會很麻煩，相信一些前端更喜歡iconfont這樣的標簽直接調用，這樣包括顏色和大小以及使用都更方便快捷，於是我們經過交流之後決定使用阿裡巴巴適量圖標庫，這是我們第一次使用，也順便把經驗分享給大家，希望可以對一些前端有所幫助。

　　　　首先我們需要找到這個網站https://www.iconfont.cn/ 打開之後看到的首頁大概是這個樣子：

　　　　裡面有搜索框，首先先是UI來找圖標設計，裡面圖標大都是免費的，而且樣式多種多樣，打個比方我們搜索一個首頁的圖標。

　　　　在這裡我們找到需要的合適的圖標，將滑鼠放上去的時候會出現三個按鈕，就像這樣

 之後作為UI可以下載直接使用，當然為了團隊，也需要收藏，加入項目，這裡可以自己新建一個項目，用來存放自己設計時用到的圖標，之後再拉前端進入這個項目。

　　　　　接下來就可以看到UI設計時使用的所有圖標了

　　　　使用它的方法也非常簡單，我們首先需要引入上面的就js，這個js是阿裡巴巴專門為你的項目生成的，每一個項目的地址都不一樣，而且包括這個項目里圖標變動也會影響地址需要更新，所以一旦確定使用之後儘量避免更改，之後我們在複製一段css放到頁面上

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

　　　　之後我們就可以正常使用icon了，使用方法可以調用

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

　　　　當然不只是這一種方法，個人覺得這種方法更好用，詳細說明請參考網站：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code