vant自定义引入iconfont图标以及字体

因为vantUI给的图标非常少，为了满足自己的需求，必须自定义图标，这里分享一种vant引入阿里的iconfont矢量图库中的图标的方法

第一步：去阿里矢量库下载图标

点击资源管理—>我的项目 —>新建项目

 在首页搜索需要的图标添加至自己的项目中

 第二步：把项目下载到本地，解压，然后把iconfont.css复制到项目的assets/css文件夹中（并且修改代码路径），iconfont.ttf，iconfont.woff，iconfont.woff2放到新建的fonts文件夹中。并且在main.js中引入

 

 ！！！！ 修改iconfont.css里面的路径（全部要改，这里只是展示改完和未改的区别）

 第三步：使用（只需要到iconfont.css中找到你需要的图标class名复制！！！要复制iconfont和你需要的图标）在main.js中引入

import './assets/css/common/iconfont.css'

<div>
   <i class="iconfont wticon-riqi"></i>
</div>

图标已展示 

！！！最后说两句，每次在项目里面新添加图标，项目包下载下来记得替换iconfont.css，iconfont.ttf，iconfont.woff，iconfont.woff2这三个文件，修改iconfont.css里面的路径以上的

以上的方法出现在浏览器上图标是黑色的，如果需要彩色的图标

在main.js中导入iconfont.js文件

import './assets/js/iconfont.js'

代码方式不能是span，div，i等标签，而是有专属的标签

    <div>
     //黑白色的图标
      <i class="iconfont wticon-riqi"></i>

     //彩色的图标
     //svg下的class名是iconfont，use下的class名是#+图标名
      <svg class="iconfont">
         <use xlink:href="#wticon-riqi"></use>
      </svg>
    </div>

在vant组件中使用图标

替换vant图库中的图标，需要用到插槽

原本写法

<van-form @submit="onSubmit">
      <van-field
        v-model="username"
        left-icon="smile-o"
        name="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="password"
        name="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>

添加图标插槽的写法

<van-form @submit="onSubmit">
      <van-field
        v-model="username"
        left-icon="smile-o"
        name="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写手机号' }]"
      >
      <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field
        v-model="password"
        name="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
      <i slot="left-icon" class="toutiao toutiao-jiesuo"></i>
      </van-field>
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>