Vant 使用第三方矢量图标

由于Vant官方提供的矢量图标数量实在是太少了，不能满足我的开发需要，所以得使用第三方库来解决这个问题。首先想到的是~~大名鼎鼎~~（臭名昭著）的 fontawesome 看了一下 Font Awesome 4 的矢量图标发现发现也比较少，似乎没我想要的，又看到他们在宣传5，就点进去看了看，不错！我要的几乎都有，那么就装上试试吧！

下面是我的最终效果

fontawesome是要数量不要质量，连个大小的不能保持一致！垃圾！对于前端小白也太不友好了。fontawesome我是不想用了，再见！

找了一下发现Google的Material Icons https://fonts.google.com/icons?selected=Material+Icons看起来还不错，至少大小能一致！

安装Material Icons（可能需要梯子）

npm i material-design-icons

在Vue中引入Material Icons，main.js 中添加

import 'material-design-icons/iconfont/material-icons.css'

参考 Vant 的文档引入Icon, 在man.js 中添加

import { Icon } from 'vant';
Vue.use(Icon);

之后，我们就可以在vue组件中使用了，例如

<van-field  v-model="text" label="操作系统"  input-align="right">
     <van-icon class="material-icons" slot='left-icon'>settings</van-icon>
</van-field>

注意：这里使用了 slot 将van-icon 和 van-field 进行整合。简单明了，一目了然！下面是简单写的一个页面：

可以看出，google这套图比fontawesome不知道要高到哪里去了。

Vant