Icon 图标

介绍

基于字体的图标集， 可以通过 Icon 组件使用，也可以在其他组件中通过icon属性引用

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "van-icon": "@vant/weapp/icon/index"
}

代码演示

基础用法

Icon的name属性支持传入图标名称或图片链接

<van-icon name="close" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标

<van-icon name="chat" dot />
<van-icon name="chat" info="9" />
<van-icon name="chat" info="99+" />

图标颜色

设置color属性来控制图标颜色

<van-icon name="chat" color="red" />

图标大小

设置size属性来控制图标大小

<van-icon name="chat" size="50px" />

常见问题

开发者工具上提示 Faild to load font 是什么情况？

这个是开发者工具本身的问题，可以忽略，具体可以查看微信小程序文档注意第 5 条

API

Props

Events

外部样式类