Vant使用 van-icon自定义图标以及其他组件设置icon属性

Vant使用 van-icon自定义图标以及其他组件设置icon属性

背景：

使用微信开发者工具，开发微信小程序的时候需要使用到大量的图标，Vant 自带的图标库不太够用，于是探索使用阿里巴巴矢量图标库（https://www.iconfont.cn/）里面的图标。

开发环境：

macOS + 微信开发者工具

主要记录3个问题：

1. 如何引入这个矢量库？
2. 如何在 Vant 的 van-icon 组件中使用？
3. 如何在其他的组件的 icon 属性中使用？

引入矢量库

这一步较为简单，可自行百度，大致步骤如下：

1. 登录阿里巴巴矢量图标库（https://www.iconfont.cn/）注册账号，挑选图标加入购物车，并导入项目
   

2. 生成代码
   

3. 将页面代码粘贴到项目中

   建议根目录新建一个文件夹，新建iconfont.wxss文件，代码贴里面。
   我新建的文件目录为：/static/icons/iconfont.wxss

4. app.wxss引入iconfont.wxss文件
   打开根目录文件app.wxss第一行添加语句（视自己文件地址修改url）

   @import '/static/icons/iconfont.wxss';
   

van-icon 中使用图标

引入完成后直接使用组件就行，默认使用规则如下

<van-icon class="iconfont" class-prefix="icon" name="kongqiwendu" size="50rpx"></

如果自己配置了项目设置，那么相应的修改 class=" "和class-prefix=" "就行，注意不要多加空格

其他组件使用 icon 属性

有两种方法：

<van-grid column-num="3" clickable icon-size="50rpx">
      <van-grid-item text="空气温度">
        <view slot="icon">
          <van-icon class="iconfont" class-prefix="icon" name="kongqiwendu" size="50rpx"></van-icon>
        </view>
      </van-grid-item>
      <van-grid-item icon-prefix="iconfont icon" icon="shidu" text=" 空气湿度" />
</van-grid>

OK，到此本文结束，希望能帮助到你，有疑问欢迎关注私信！