vant-Icon 图标

介绍

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

引入

代码演示

基础用法

`Icon` 的 `name` 属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例。

徽标提示

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

图标颜色

`Icon` 的 `color` 属性用来设置图标的颜色。

图标大小

`Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。

使用本地字体文件

Icon 组件默认引用 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置 `url-loader`。

> Tips: 从 2.10.13 版本开始，Vant 会默认使用 woff2 格式的本地字体文件，只有在不支持 woff2 字体的低端浏览器上才会加载 CDN 的网络图标。

自定义图标

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

API

Props

Events