Skip to content

Renders an icon either from the local icon folder or from a provider.

import { BbIcon } from 'bitboss-ui';

On this page

Props

NameDescription
icon requiredType: string

Name of a registered icon to use, or a full raw <svg> string (e.g. an SVG file imported with ?raw).

Three forms: provider:name, local:name from the plugin's iconDir, and a bare name, which means local:. Write it as a complete literal: lucide:${status} is not bundled and draws the missing-icon placeholder unless listed in iconWhitelist. An unknown name never throws; a missing icon (v2’s type) does.

See example
label Type: string

Label of the icon for accessibility.

Set it only when the icon is the only thing carrying the information. Beside its own text an icon should stay unlabelled, so assistive tech does not announce the same fact twice. It produces no title, so it never shows a tooltip — use v-bb-tooltip for that.

See example
pt Type: PtMap<"root", never>

Passthrough, object form: { root: '…' }. See the pt:<part> row.

pt:<part> Type: PtValue

Passthrough, attribute form: one attribute per part, pt:<part>. Parts: root.

See example
size Type: number | CssSize | keyof SizesDefault"md"

Defines the component size. Accepted values: - A key from the provided size map (keyof T), e.g. 'sm' | 'md' | 'lg' - A custom CSS size string (e.g. '20px', '1.5rem', '2em') - A number, typically interpreted as pixels by size parsers

The named keys come from the scale BbAvatar and every icon-bearing component share, so they can be retuned library-wide through the plugin's iconDefaultSizes. A hard pixel number opts out of that. An unparseable value warns and falls back to md.

See example

Renamed and removed

Names from v2 and from earlier 3.0 betas that no longer work, and what to write instead.

  • colorremovedfails silently
  • typeicon