在ui组件中引入iconfont

https://shimo.im/docs/XcdrxKQCGKTVGcgP/ 《在ui组件中引入iconfont》，可复制链接后用石墨文档 App 或小程序打开

如何在vant 组件中使用自定义icon

1.创建项目

 

2.将图标加入购物车

3.点击购物车将购物车图标添加到项目中

4.选择font class,生成代码

5.点击链接获取代码

6.在public文件中建css文件,建icon.css,将获取的代码复制到文件中

7.App中引入icon.css

import '../public/css/icon.css'

8.app.vue中使用1:

<van-icon class="iconfont percy-icon-shangchuan"/>

9.在vant组件中使用

 <!-- 方法一 -->
    <van-icon class="iconfont my-icon-chengzi"/>
    <!-- 方法二 -->
     <van-field  name="username"  placeholder="用户名" left-icon="">
        <template #left-icon>
          <van-icon class="iconfont my-icon-chengzi"></van-icon>
        </template>
      </van-field>

彩色图标

1.在原来的基础上,点击sybol

和css一样复制到一个文件中

怎么格式化都报eslint错误,加上让eslint忽略该文件内容

/* eslint-disable */

在app.vue中引入js文件

import '../public/css/icon.js'
import '../public/css/icon.css'

使用:在templat中使用svg容器

<svg class="iconfont" aria-hidden="true">
    <use xlink:href="#my-icon-chengzi"></use>
</svg>

在图标名字前要加# 号