来源：https://ui.docs.xihanfun.com/en/components/icon
# Icon
General component. This page is the API reference, generated from the source code. Usage guidance and live examples are on the [Chinese page](/components/icon).
## 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 | `` |
| 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](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/). 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` |