Icon 图标

介绍

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

引入

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

  1. "usingComponents": {
  2.   "van-icon": "path/to/@vant/weapp/dist/icon/index"
  3. }

代码演示

基础用法

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

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

提示信息

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

  1. <van-icon name="chat" dot />
  2. <van-icon name="chat" info="9" />
  3. <van-icon name="chat" info="99+" />

图标颜色

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

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

图标大小

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

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

API

Props

参数说明类型默认值版本
name图标名称或图片链接string--
dot是否显示图标右上角小红点booleanfalse-
info图标右上角文字提示string | number--
color图标颜色stringinherit-
size图标大小，如 20px，2em，默认单位为pxstring | numberinherit-
custom-style自定义样式string--
class-prefix类名前缀stringvan-icon-

Events

事件名说明参数
bind:click点击图标时触发-

外部样式类

类名说明
custom-class根节点样式类

Icon 图标 - 图1