【Vant4】Vant4使用自定义图标(阿里图标)

Vant4使用自定义图标(阿里图标)

前言

阿里图标官网
备用地址： https://www.iconfont.cn/

添加图标

1. 进入官网添加图标，如箭头所示
   

---

2. 点击右上方小车
   

---

3. 添加至项目
   

---

4. 进入我的项目，点击项目设置

---

5. 设置图标前缀，设为什么都行，我这里的是icon-与iconfont
   

6. 点击下载到本地
   

7. 复制如图选中的文件，粘贴项目中的src/assets/icon_font/目录下
   

---

8. 在main.js引入图标css

// 引入自定义图标
import '@/assets/icon_font/iconfont.css';

9. 使用
   

<!-- 单色图标 -->
<van-icon class="iconfont" class-prefix='icon' name='grouping' />
<van-icon class="iconfont" class-prefix='icon' name='aite' />


<!-- 多色图标 -->
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-aite"></use>
</svg>

• class 阿里设置的Font Family名称，注意class，图标没效果时务必加上
• class-prefix 图标前缀
• name 图标名称

如icon-grouping

• icon 就是前缀
• grouping 才是图标名称
  

最终效果

---

end

---

2022/12/28 一改

---

2023/3/17 二改