iview 3.x 升級指南 —— Icon 篇

iview 在今年 7 月 28 號發佈了 3.0.0 版本，大版本升級每每意味着功能、接口的大變動。 雖然官網已經有長長的更新日誌，但看起來仍是有些抽象了， 因此我決定作個新舊版本的比較，盤點新版本到底爲咱們帶來了什麼新特性。

這是系列文章的第一篇，講的是最簡單的組件 —— Icon，但願能給你們帶來幫助

結論

新版本 Icon 有以下變化點：

1. 新版本的 Icon 組件支持更多圖標類型
2. 新舊版本的圖標名有些差別，升級時務必注意
3. Icon 組件支持自定義圖標，可經過 custom 屬性傳遞類名
4. Button、Avatar、Rate 組件也支持自定義圖標，可經過 custom-icon 屬性傳遞類名

有時間的朋友，也歡迎看看下面的詳細解讀：

基礎升級

新版 Icon 組件 最大的變化，是升級圖標庫 ionicons 到 3.x 版本，可用的圖標類型從 730 增長至 866。奇怪的是，目前ionicons提供的版本已是 4.2.5 iview 卻只用了其 3.x 版本。

升級後的圖標庫，功能更強大了，但卻爲舊版本升級帶來了一個坑：

具體是那些圖標名稱發生變化了呢？官網沒有明說，ionicons也沒有明說，找來找去也沒找着可信的說明，建議你們在升級的時候仔細測試全部 Icon 調用。

支持自定義圖標

除了ionicons庫的變化以外，新版 Icon 還支持 經過 custom 傳入圖標 class 名，實現自定義圖標功能，舉個例子：

<Icon custom="fa fa-user" />
<!-- 等同於： -->
<i class="ivu-icon fa fa-user">
複製代碼

這真是一個很方便的功能，由於 iview 提供的圖標是不可能覆蓋全部應用場景的，實際開發中通常都會自行引入其餘圖標庫，在舊版本中引入的圖標庫與 iview 之間是割裂的，無法複用 icon 的行爲邏輯，好比 Button 中圖標的 loading 效果。 在新版本中終於能夠大膽使用自定義圖標了，好比 下面的例子，我在 Button 組件中使用 font-awesome 的 fa-user 圖標，但在 loading 態中，仍是會保留原來的轉菊花效果。

<div id="app">
  <i-button custom-icon="fa fa-user">Custom icon</i-button>
  <i-button custom-icon="fa fa-user" :loading="true">
    Loading effect
  </i-button>
</div>
複製代碼

尷尬的是，目前僅有 Button、Avatar、Rate 三個組件支持 customIcon 屬性，其餘組件，諸如 Tab、Input、Alert 等尚不支持，官方也沒有給出明確的計劃，因此也很差揣測。

代碼

新舊版本 Icon 組件代碼差異不大，我將差別點抽出來：

<script> export default { props: { ... custom: { type: String, default: '' } }, computed: { classes () { return [ `${prefixCls}`, { [`${prefixCls}-${this.type}`]: this.type !== '', [`${this.custom}`]: this.custom !== '', } ]; } ... } }; </script>
複製代碼

能夠看到，區別有兩點，一是支持 custom 屬性；二是基於 type、custom 兩個 props 計算 classes 值。Icon 組件很簡單，這裏只有一個小小建議： 對 type 值作個校驗！ 既然 type 屬性只能傳入 ionicons 支持的圖標，爲何不作個 in 校驗呢？爲了性能？新版的 ionicons 有 866 圖標，確實可能會影響一丟丟性能，但實際上是能夠在 process.env.NODE_ENV ==='development' 環境下作校驗呀，多多少少也是能夠擋住一些問題。