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" />

自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 app.wxss 文件中引入。

/* 引入第三方或自定义的字体图标样式 */
@font-face {
  font-family: 'my-icon';
  src: url('./my-icon.ttf') format('truetype');
}
.my-icon {
  font-family: 'my-icon';
}
.my-icon-extra::before {
  content: '\e626';
}

<!-- 通过 class-prefix 指定类名为 my-icon -->
<van-icon class-prefix="my-icon" name="extra" />

API

Props

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

Events

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

外部样式类

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

常见问题

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

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