iview 在今年 7 月 28 号发布了 3.0.0 版本，大版本升级往往意味着功能、接口的大变更。
虽然官网已经有长长的更新日志，但看起来还是有些抽象了，
所以我决定做个新旧版本的比较，盘点新版本到底为我们带来了什么新特性。这是系列文章的第一篇，讲的是最简单的组件 —— Icon，希望能给大家带来帮助
先看结论
新版本 Icon 有如下变化点：
- 新版本的 Icon 组件支持更多图标类型
- 新旧版本的图标名有些差异，升级时务必注意
- Icon 组件支持自定义图标，可通过
custom属性传递类名 - 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' 环境下做校验呀，多多少少也是可以挡住一些问题。
