Icon 图标 - Vant 4
🎨 Icon 图标
🎯 介绍
Icon 组件就像是界面的魔法师 ✨，提供基于字体的图标集，让你的应用瞬间变得生动有趣！无论是通过 Icon 组件直接使用，还是在其他组件中通过 icon 属性引用，都能让界面焕发活力。丰富的图标库就像一个百宝箱，让你的设计创意无限延伸！
📦 引入
通过以下方式来全局注册组件，更多注册方式请参考组件注册。
import { createApp } from'vue'; import { Icon } from'vant'; const app = createApp(); app.use(Icon);🎯 代码演示
🔧 基础用法
通过 name 属性来指定需要使用的图标，就像点名一样简单！Vant 内置了一套精美的图标库（见右侧示例），直接传入对应的名称就能召唤出你想要的图标。
🖼️ 使用图片 URL
想要使用自己的图标？没问题！你可以直接在 name 属性中传入一个图片 URL，让你的个性化图标闪亮登场。
🔴 徽标提示
想要吸引用户注意？设置 dot 属性后，会在图标右上角展示一个小红点，就像消息提醒一样醒目；设置 badge 属性后，会在图标右上角展示相应的徽标数字，让重要信息一目了然！
🌈 图标颜色
通过 color 属性来设置图标的颜色，让你的图标变得五彩斑斓！支持任何有效的 CSS 颜色值。
📏 图标大小
通过 size 属性来设置图标的尺寸大小，可以指定任意 CSS 单位。从迷你到巨大，随心所欲！
🎨 自定义图标
如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。这就像给你的图标库添加新成员一样简单！
/* 引入第三方或自定义的字体图标样式 */@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'; }API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 图标名称或图片链接 | string | - |
| dot | 是否显示图标右上角小红点 | boolean | false |
| badge | 图标右上角徽标的内容 | *number | string* |
| badge-props | 自定义徽标的属性，传入的对象会被透传给 Badge 组件的 props | BadgeProps | - |
| color | 图标颜色 | string | inherit | | size | 图标大小，如 20px``2em，默认单位为 px | number | string | inherit | | class-prefix | 类名前缀，用于使用自定义图标 | string | van-icon | | tag | 根节点对应的 HTML 标签名 | string | i |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击图标时触发 | event: MouseEvent |
类型定义
组件导出以下类型定义：
importtype { IconProps } from'vant';主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --van-icon-font-family | 'van-icon' | - |
📚 相关文档
🎨 设计与主题
- Badge 徽标 - 徽标组件，为图标添加提示信息
- ConfigProvider 全局配置 - 全局配置组件，统一管理主题样式
📱 交互组件
- Button 按钮 - 按钮组件，常与图标搭配使用
- NavBar 导航栏 - 导航栏组件，图标是导航的重要元素
🖼️ 媒体组件
- Image 图片 - 图片组件，与图标形成完美的视觉搭配
- ImagePreview 图片预览 - 图片预览组件
🛠️ 开发指南
- Advanced Usage 进阶用法 - 进阶用法指南
- Theme 主题定制 - 主题定制指南