vant自定義引入iconfont圖標及字體的方法步驟

更新時間：2023年09月22日 16:48:47 作者：我媽已經三天沒打我了

因為vantUI給的圖標非常少,為了滿足自己的需求,就應該找到一種方法來向vant添加自己自定義的圖標,對于自定義圖標我第一時間想到的就是阿里的iconfont矢量圖庫,這篇文章主要給大家介紹了關于vant自定義引入iconfont圖標及字體的方法步驟,需要的朋友可以參考下

第一步：去阿里矢量庫下載圖標

點擊資源管理—>我的項目 —>新建項目

在首頁搜索需要的圖標添加至自己的項目中

第二步：把項目下載到本地，解壓

然后把 iconfont.css 復制到項目的 assets/css 文件夾中（并且修改代碼路徑），iconfont.ttf，iconfont.woff，iconfont.woff2放到新建的fonts文件夾中。并且在main.js中引入

?。。?！修改 iconfont.css里面的路徑（全部要改，這里只是展示改完和未改的區(qū)別）

第三步：使用（只需要到 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" rel="external nofollow" ></use>
      </svg>
    </div>

在vant組件中使用圖標

替換vant圖庫中的圖標，需要用到插槽

原本寫法

<van-form @submit="onSubmit">
      <van-field
        v-model="username"
        left-icon="smile-o"
        name="用戶名"
        placeholder="用戶名"
        :rules="[{ required: true, message: '請?zhí)顚懯謾C號' }]"
      />
      <van-field
        v-model="password"
        name="密碼"
        placeholder="密碼"
        :rules="[{ required: true, message: '請?zhí)顚戲炞C碼' }]"
      />
      <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: '請?zhí)顚懯謾C號' }]"
      >
      <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field
        v-model="password"
        name="密碼"
        placeholder="密碼"
        :rules="[{ required: true, message: '請?zhí)顚戲炞C碼' }]"
      >
      <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>