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>
在图标名字前要加# 号