Icon图标，大家肯定都不陌生，我们会在开发过程中大量使用。之前我们都是将小图标切成小图片，如果小图标过多的话，为了减少请求，会将所有的小图标做成CSSSprites精灵，但是这样做非常不易维护，把以把这些小图片做成Icon图标，既能减少请求，又易于维护。Vant封装了一部分小图标，我们要以拿来就用，很方便。如果这些小图标还不能满足我们的话，我们还可以在此基础上自定义属于我们自己的图标，使用方法不变。

准备工作：

1.创建一个页面: Icon.vue

2.在router.js里配置 Icon页面的路由

{
 path: '/icon',
 name: 'icon',
 component: () => import('./views/Icon.vue')
 }

3.在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/icon')">
 <van-col span="6" class="marb20">
 <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" />

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油