Vue - Vant uses Ali vector graphics and Field components

Vant comes with fewer icons, which sometimes cannot meet the business needs of the Field component. At this time, we can use a third-party font library for use;

1, first download to the local

Ali vector library official website: https://www.iconfont.cn/

Select the icon you want and click 购物车the button to put it in your shopping cart. When everything you want is selected, you can click 下载代码the button to download it;

2. After the download is complete, place it in the static folder of the project

After downloading and decompressing, place it under src/assets or other places. Demonstration files such as demo.html and demo.css can be selectively deleted.

3. Import

Introduce iconfont.css in the vue components that need to be used, or multiple ones can be introduced in main.js;

// 引入阿里字体
import "@/assets/aliIconFont/meetAbout/iconfont.css";

4. Use

Finally use <van-icon>:

 <van-icon @click="firstSearch" class="iconfont icon-sousuo" />

The point is to have class="iconfont icon-sousuo"this part; iconfont is a must, and icon-sousuo is the class name of the icon you downloaded; you can see it in iconfont.css:

2. Used in Vant components

Taking Field as an example, Field supports the use of slots to customize icons:

code show as below:

 		 <!-- 第一个输入框 -->
          <div class="searchLocation top">
            <van-field
              v-model="form.address"
              left-icon="location-o"
              placeholder="请输入会议地址"
            >
              <template #button>
               <!-- 正常使用 阿里字体 -->
                <van-icon  class="iconfont icon-sousuo" />
              </template>
            </van-field>
          </div>
          
		  <!-- 第二个输入框  下面使用了slot 插槽-->
          <div class="searchLocation bottom">
            <van-field
              v-model="form.meetAddress"
              placeholder="请输入会议详细地址"
            >
              <!-- 插槽使用 阿里字体 icon- dingwei-->
              <van-icon class="iconfont icon-zhiyuandizhi3" slot="left-icon" />
            </van-field>
          </div>

The renderings are as follows:

END；