mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-11-07 14:32:08 +08:00
Icon 图标
引入
在app.json或index.json中引入组件,默认为ES6版本,ES5引入方式参见快速上手
"usingComponents": {
"van-icon": "path/to/vant-weapp/dist/icon/index"
}
代码演示
基础用法
Icon的name属性支持传入图标名称或图片链接
<van-icon name="close" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
显示徽标
<van-icon name="chat" info="9" />
<van-icon name="chat" info="99+" />
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 图标名称或图片链接 | string | - |
| info | 图标右上角文字提示 | string | number | - |
| color | 图标颜色 | string | inherit |
| size | 图标大小,如 20px,2em |
string | inherit |
| custom-style | 自定义样式 | string | - |
| class-prefix | 类名前缀 | string | van-icon |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| bind:click | 点击图标时触发 | - |
外部样式类
| 类名 | 说明 |
|---|---|
| custom-class | 根节点样式类 |