更新记录

1.1.0（2026-10-12） 下载此版本

首次上传

平台兼容性

uni-app(3.8.5)

uni-app x(3.8.5)

其他

vant-icon 图标

基于 Vant 官方图标字体（250+ 字形）与图片地址的轻量图标组件。字体资源随组件内置并自托管于 /static/fonts；线框风格以 -o 后缀区分（如 home-o / star-o）。

引入

<vant-icon /> 经 easycom 自动注册，无需 import。

代码演示

基础用法

<template>
  <vant-icon name="success" />
  <vant-icon name="cross" />
  <vant-icon name="star" />
  <vant-icon name="loading" />
</template>

颜色与尺寸

<template>
  <vant-icon name="success" color="#0fbc38" :size="40" />
  <vant-icon name="star" color="#ee0a24" />
</template>

红点与徽标

<template>
  <vant-icon name="star" dot />
  <vant-icon name="star" :badge="5" />
  <vant-icon name="star" badge="NEW" badge-color="#1989fa" />
</template>

图片图标

<template>
  <vant-icon src="/static/logo.png" :size="48" />
</template>

Vant 官方图标字体

组件内置 Vant 官方图标字体（250+ 字形），直接传图标名即可。线框风格以 -o 后缀区分：

<template>
  <vant-icon name="home-o" />
  <vant-icon name="star-o" />
  <vant-icon name="add" />
  <vant-icon name="arrow" />
  <vant-icon name="cross" />
</template>

API

Props

Events

Slots

主题定制

通过 color / size / badgeColor 覆盖外观；红点与徽标底色默认取 $uni-color-error，徽标文字取 $uni-text-color-inverse。

常见问题

• Q：内置图标不够用怎么办？ A：组件已内置 Vant 官方图标字体（250+ 字形），直接传字体图标名（如 name="home-o"、name="add"）即可；也可用 src 传图片地址，两者原生支持。线框风格用 -o 后缀（如 star-o），实底风格不加后缀（如 star）。
• Q：loading 图标不转？ A：确认 name="loading" 或 name="spinner"，旋转动画由组件内置 @keyframes 驱动。