vue+vant中引入iconfont字體圖標的問題

 使用的是iconfont的圖標，下載至本地使用的，圖標比較少，使用的文件中引入，使用import或者css的@import都不行，一直報錯最后被逼無奈，在main.js中引入的圖標

 

 這不是我本意，后續有時間繼續探討在指定文件引入字體圖標的問題
使用的時候是van-field的組件中使用的，該組件自帶了后綴圖標的引入方法：

  <van-field
    v-model="value1"
    label="文本"
    left-icon="smile-o"
    right-icon="warning-o"
    placeholder="顯示圖標"
  />

　　其中left-icon表示在左側插入圖標，right-icon表示在右側插入圖標，但是直接使用iconfont的方法寫入不生效

　　最后解決辦法是在van-field的組件中插入van-icon的組件結合slot的方法插入，代碼如下

　　

<van-field 
          v-model='textarea' 
          rows='2'
          maxlength = '200'
          label='請輸入留言'
          show-word-limit
          placeholder='可以點擊語音輸入文字'
          @click-right-icon='getSpeak'>
          <van-icon class='iconfont' class-prefix='icon' slot='right-icon' name='yuyin'></van-icon>
</van-field>

　　其中class-prefix=‘icon’的寫法固定，暫時未找到其原因，slot='right-icon'表示插入到van-field中的right-icon中，最后呈現效果