前言
在寫前端頁面時，我們經常會用到一些小圖示之類的圖檔，如果使用圖檔的話代碼寫起來比較麻煩，最近發現一個友善實用的方法，直接引用就可以了。
一、引入圖檔操作方法
首先我們輸入網址：
https://www.iconfont.cn/可以百度搜尋：阿裡巴巴矢量圖，就會出來這個網址
以下我推薦兩種比較常用也是比較友善的方法。
方法1：font-class引用
- 相容性良好，支援ie8+，及所有現代浏覽器。
- 因為使用class來定義圖示，是以當要替換圖示時，隻需要修改class裡面的圖檔名稱引用。
- 不過因為本質上還是使用的字型，是以多色圖示還是不支援的。
第一步： 進入網站我們可以看到一個搜尋框，直接輸入你想要的圖示名稱，也可以在圖示庫找。
第二步：然後加入購物車。
第三步：點選購物車建立一個新項目，确定，如果同一個項目後面要追加圖檔就不需要再重新建立了。
第四步：接下來就會出現以下這個頁面，複制代碼，引用到代碼的文檔。
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js"> 第五步：引入代碼切記加上“ http: ”。
第六步：挑選相應圖示并擷取類名複制粘貼，使用 class="iconfont 後面複制圖檔名稱，應用于頁面即可實作效果。
<body>
<i class\="iconfont icon-xxx"></i>
</body> 方法2: symbol引用
- 是一種全新的使用方式，也是目前推薦的用法。網站也有相關介紹可以參考，與上面方法1相比具有如下特點：
- 支援多色圖示了，不再受單色限制。
- 通過一些技巧，支援像字型那樣，通過font-size,color來調整樣式。
- 相容性較差，支援 ie9+,及現代浏覽器。
- 浏覽器渲染svg的性能一般，還不如png。
第一步：一個項目如果要用到多個圖示，也可以把要用的圖示一起選好加入到購物車，再點選更新代碼，再更新代碼引用連接配接，這個方法需要下載下傳到本地。
第二步：下載下傳好後可以看到檔案夾裡面到一些檔案，在代碼頁面引入js檔案。
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
<script src="iconfont.js"></script> 第三步：把檔案包放在項目到同一個目錄下，這樣引用到圖示才能生效。
第四步：同樣到方法，我們在需要引用到圖示下方複制粘貼圖檔名稱在svg裡，更換 href="更換名稱"。
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-079aiqing"></use>
</svg> 第五步：在代碼頁面我們需要引入以上兩個檔案位址以外，還需要引入一段style代碼。
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style> 以下是全部代碼作為參考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>阿裡巴巴矢量圖</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
<script src="iconfont.js"></script>
</head>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<body>
<input type="text" placeholder="搜尋">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-079aiqing"></use>
</svg>
</body>
</html> 代碼效果：
總結：
第一種方法，直接引入就可以用，快捷友善，不需要下載下傳，使用起來比較友善，缺點隻能單一使用，不支援顔色。
第二種方法，支援多色，以及多個圖檔引入效果也會比較好，缺點需要下載下傳到本地檔案包，并且一定要放在同一個目錄下才能使用。
總體來說阿裡巴巴矢量圖對前端開發者還是非常有幫助，而且還是免費使用，以上方法大家可以根據自己到需求使用。
作者：湯清麗
日期：2019-12-29
微信：lenat666