图标 Icon

基础 · 展示组件

受控图标与自定义资源

按需导入wbbb-ui/components/icon

基础用法

<script setup lang="ts">
import { WbbbIcon } from 'wbbb-ui/components/icon'
import 'wbbb-ui/styles/icon'
</script>

<template>
  <WbbbIcon />
</template>

真实移动端预览新窗口打开 ↗

状态与交互

以下状态均可在右侧的真实 Playground 中操作与验收。

默认内容态

API 参考

属性（Props）

属性	说明	类型	默认值	必填
`code`	直接渲染字体图标时提供字形码点。	`string`	`''`	否
`color`	设置主要显示颜色。	`string`	`''`	否
`fontFamily`	设置直接字体图标使用的字体族。	`string`	`''`	否
`fontSet`	选择已注册的 Iconfont 图标集。	`string`	`''`	否
`name`	提供项目名称或唯一标识。	`string`	`''`	否
`size`	设置组件尺寸。	`WbbbNumeric`	`32`	否
`src`	设置资源的 URL 或本地路径。	`string`	`''`	否

事件（Events）

无

插槽（Slots）

无

双向绑定

不支持 v-model。

平台说明

构建验证：H5、App Vue、微信小程序、支付宝小程序与抖音小程序。

运行时差异：H5 支持键盘焦点与减弱动效；小程序端使用等价触控交互。上传、日期选择和服务弹层应在目标端再次验收。

使用提示：支持 64 个内置 Lucide 子集图标、图片 src、直接 fontFamily + code，以及注册式 fontSet + name。

图标 Icon ​

基础用法 ​

状态与交互 ​

API 参考 ​