Icon 图标

Basic · Display component

Controlled icons and custom sources.

On-demand importwbbb-ui/components/icon

Basic Usage

Example code

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

<template>
  <WbbbIcon />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultContent

API Reference

Props

Property	Description	Type	Default	Required
code	Provides the glyph code when rendering a font icon directly.	string	''	No
color	Sets the primary display color.	string	''	No
fontFamily	Sets the font family used for a direct font icon.	string	''	No
fontSet	Selects a registered Iconfont set.	string	''	No
name	Provides the item name or identifier.	string	''	No
size	Sets the component size.	WbbbNumeric	32	No
src	Sets the source URL or local path of the resource.	string	''	No

Events

None

Slots

None

Two-way binding

Does not support v-model.

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Supports the 64-icon Lucide subset, image src, direct fontFamily + code, and registered fontSet + name sources.