Icon圖標，大家肯定都不陌生，我們會在開發過程中大量使用。之前我們都是將小圖標切成小圖片，如果小圖標過多的話，為了減少請求，會將所有的小圖標做成CSSSprites精靈，但是這樣做非常不易維護，把以把這些小圖片做成Icon圖標，既能減少請求，又易於維護。Vant封裝了一部分小圖標，我們要以拿來就用，很方便。如果這些小圖標還不能滿足我們的話，我們還可以在此基礎上自定義屬於我們自己的圖標，使用方法不變。
準備工作：
創建一個頁面: Icon.vue在router.js裡配置 Icon頁面的路由{ path: '/icon', name: 'icon', component: () => import('./views/Icon.vue') }
在index.vue裡添加一項<a href="javascript:void(0)" @click="$router.push('/icon')"> <van-col span="6"> <van-icon name="records" /> <div>Icon圖標</div> </van-col></a>
至今為止呢，我們的首頁顯示的樣式子是這樣滴不知道不覺間我們已經學完了5個組件了！如果想看更多的內容，歡迎關注我，每天都有更新哈。
代碼演示Icon圖標：
基本用法：
<van-icon name="photo" info="2" color="#ccc" />
name: 圖標名稱。如果是vant自帶的圖標，則可以官網上查找對應的名稱；
info: 圖標右上角的數字提示；
color：圖標的顏色值，即可以是十六進位值也可以是顏色名。
我們上句話所呈現的樣式圖為：
通常官網上提供的只是一些基本圖標，並不能夠我們多樣化的圖標需求，需要我們自定義我們自定義的圖標。
自定義圖標的步驟：
首先是構建自己的圖標庫
1.在我們經常使用的iconfont資源上下載相應的圖標。我經常去的網站是阿里巴巴的iconfont，選擇適合自己的圖標加入購物車。
2.點擊購物車，將購物車裡的圖標添加至項目中
3.進入項目界面後下載到本地
接下來來看看我們是如何使用這些自定義的圖標的：
1.將文件夾裡的tff文件放入assets文件夾裡，將css樣式貼到頁面內
2.設置自定義圖標的font-face以及路徑（剛才我們放進去的文件夾的路徑），將自定義的font-face合併到vant基礎的icon庫中。
@font-face {font-family: 'iconfont'; src: url('../assets/iconfont.ttf') format('truetype');//我們只針對手機端，所以用ttf就可以}.van-icon { //將自定義的font-face合併到vant基礎的icon庫中 font-family: 'vant-icon', 'iconfont' !important;}
3.將第二步貼進去的css樣式前加一個前綴：van-icon-，如圖：
4.我們可以直接在頁面裡應用這個圖標了。記得在DOM裡圖名稱前不加前綴的哈。
<van-icon name="icon-feiji" info="1" color="green" />
今天就到這裡啦。休息休息一會兒吧明天繼續加油噢！加油