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

NameTypeDefaultDescription
iconrequiredstring-

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 from an installed Iconify collection, local:name from the plugin's iconDir, and a bare name that normalises to local: — never to a provider set. It must be a static literal: the build scans source for whole names, so lucide:${status} resolves in dev and is missing in production.

See example
labelstring | undefined-

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
ptPtMap<"root", never> | undefined-

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

pt:rootPtValue | undefined-
sizenumber | ({ size?: any; } & string) | keyof Sizes | undefined"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

Changes from v2

Props removed or renamed in 3.0. If you are coming from v2, the answer is here.

  • colorremovedfails silently
  • typeiconfails silently