Icon

General component. This page is the API reference, generated from the source code. Usage guidance and live examples are on the Chinese page.

HeadlessStylesVueReactWeb Components

Anatomy

Parts in bold are required.

data-scope="icon": root · glyph

API reference

Descriptions of individual props, events and slots are written in Chinese and appear on the Chinese page.

Artifacts

Layer	Value
Custom element	<xh-icon>
Vue components	XhIcon
Composable	useIcon
State machine	None: connect computes attributes from props directly
Skin	@xihan-ui/styles/icon.css

Props

Prop	Type	Required
flip	IconFlip
frame	ActionVariant
icon	IconRecord
label	string
rotate	IconRotate | string
size	IconSize
tone	Tone
weight	IconWeight

connect API

getXxxProps() returns the host attributes of the matching part.

Member	Type
label	string | undefined
decorative	boolean
nodes	readonly IconNode[]
content	IconRecord | undefined
getRootProps	() => T['element']
getGlyphProps	() => T['element']

Accessibility

Keyboard

Specification: W3C APG. Each row is a stable behavior id that the conformance tests cover; the conditions and effects are described on the Chinese page.

No keyboard interaction: the component takes no focus, or focus behavior comes entirely from native elements.

ARIA

These attributes are produced by connect.

Part	Attribute	Value
root	aria-hidden	'true' | undefined
root	aria-label	props.label | undefined
root	role	undefined | 'img'

Style reference

Skin

@xihan-ui/styles/icon.css is written against [data-scope="icon"][data-part="root"] part selectors; the published build uses the mount class .xh-scope-icon in place of data-scope (same specificity) and sits in the xihan.components layer. Put overrides in xihan.overrides; the part selectors work as usual.

Data attributes

Produced by connect; valueless attributes are omitted while their condition does not hold.

Part	Attribute	Value
root	data-flip	props.flip
root	data-frame	props.frame
root	data-icon	icon?.name
root	data-rotate	rotateAttr(props.rotate)
root	data-size	props.size
root	data-tone	props.tone
root	data-weight	props.weight

CSS variables

The public override slots, generated from what the standalone skin actually consumes.

Variable	Part	CSS property	State	Default from
--xh-icon-fg	root	color	default frame=ghost frame=outline frame=solid frame=subtle tone	--xh-_tone-fg --xh-_tone-on --xh-fg-default --xh-fg-on-brand currentColor
--xh-icon-frame-bg	root	background	frame=solid frame=subtle tone	--xh-_tone --xh-_tone-subtle --xh-bg-brand --xh-bg-subtle
--xh-icon-frame-border	root	border-color	frame=outline tone	--xh-_tone-border --xh-border-default
--xh-icon-frame-glyph-size	root	padding	frame size=lg size=sm	--xh-_icon-glyph-step --xh-glyph-size-lg --xh-glyph-size-sm
--xh-icon-frame-radius	root	border-radius	frame	--xh-shape-circle
--xh-icon-frame-shadow	root	box-shadow	frame=solid tone	--xh-_highlight-brand --xh-_highlight-tone
--xh-icon-frame-size	root	block-size inline-size padding	frame size=lg size=sm	--xh-_icon-frame-step --xh-control-h-lg --xh-control-h-sm
--xh-icon-shift	root	vertical-align	default	--xh-glyph-baseline-shift
--xh-icon-size	autoplay-trigger branch-error branch-indicator branch-loading branch-trigger cancel-trigger caps-lock-indicator clear-trigger close-trigger column-header comment-trigger condition-delete-trigger control decrement-trigger dismiss-trigger edit-trigger ellipsis-trigger expand-trigger first-trigger flip-horizontal-trigger flip-vertical-trigger group-delete-trigger increment-trigger indicator item item-close-trigger item-delete-trigger item-indicator item-preview last-trigger line-content line-fold-trigger loading move-down-trigger move-up-trigger next-trigger next-year-trigger overflow-trigger path path-item prev-trigger prev-year-trigger reset-trigger root rotate-left-trigger rotate-right-trigger scroll-to-end-trigger separator sort-trigger status submit-trigger to-source-trigger to-target-trigger toolbar trend trigger trigger-indicator truncation viewport visibility-trigger window-state-trigger zoom-in-trigger zoom-out-trigger	block-size column-gap inline-size	@media (min-width: 640px) default direction empty error folded has(> [data-part='unread-count']:only-child) is([data-part='edit-trigger'], [data-part='submit-trigger'], [data-part='cancel-trigger']) mode=send mode=stop not([data-part='status']) not([data-variant='dot']) preset=toast size=2xl size=3xl size=4xl size=lg size=md size=sm size=text size=xl sort=asc sort=desc state=completed state=paused state=running state=visible variant=dot	--xh-_color-swatch-picker-mark --xh-glyph-size-2xl --xh-glyph-size-3xl --xh-glyph-size-4xl --xh-glyph-size-lg --xh-glyph-size-md --xh-glyph-size-sm --xh-glyph-size-text --xh-glyph-size-xl
--xh-icon-stroke	root	stroke-width	default weight=bold weight=light	--xh-glyph-stroke-bold --xh-glyph-stroke-light --xh-glyph-stroke-regular