来源：https://ui.docs.xihanfun.com/components/icon-wrapper # IconWrapper 图标块为图标提供统一的背景容器。

Headless Styles Vue React Web Components

## 用法显示带背景的图标 ```vue ``` ```html

``` ## 组件结构加粗的是必需部件。 `data-scope="icon-wrapper"`：**`root`** ## 示例 ### 变体设置背景和边框样式 ```vue ``` ```html

``` ### 颜色使用语义颜色 ```vue ``` ```html

``` ### 尺寸设置图标块大小 ```vue ``` ```html

``` ## 设计指引 ### 何时使用 - 突出功能入口、状态或分类图标。 - 统一一组图标的视觉尺寸。 ### 何时不用 - 只需显示图标时，使用[图标](./icon)。 - 显示人物或组织形象时，使用[头像](./avatar)。 ### 特性 - 支持三档尺寸。 - 支持四种变体和六种语义颜色。 ### 组合 - 通常与[图标](./icon)、[空状态](./empty-state)或[列表](./list)组合使用。 ### 最佳实践 - 同组图标块使用一致的尺寸和变体。 - 图标块不承载交互；可点击操作使用[按钮](./button)。 ### 反模式 - 不要用图标块替代[徽标](./badge)显示计数。 ## API 参考 ### 产物 | 层 | 值 | | --- | --- | | 自定义元素 | `` | | Vue 组件 | `XhIconWrapper` | | 状态机 | 无，`connect` 直接由 props 算属性 | | 皮肤 | `@xihan-ui/styles/icon-wrapper.css` | ### Props | 属性 | 类型 | 必填 | 说明 | | --- | --- | --- | --- | | `size` | `Size` | | 尺寸：sm / md / lg。 | | `tone` | `Tone` | | 颜色：brand / neutral / success / warning / danger / info。 | | `variant` | `ActionVariant` | | 变体：solid / subtle / outline / ghost。 | ### connect API `getXxxProps()` 返回对应部件的宿主属性。 | 成员 | 类型 | 说明 | | --- | --- | --- | | `getRootProps` | `() => T['element']` | | ## 无障碍 ### 键盘规格出处：[W3C APG](https://www.w3.org/WAI/ARIA/apg/) 无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。 ## 样式参考 ### 皮肤 `@xihan-ui/styles/icon-wrapper.css` 使用 `[data-scope="icon-wrapper"][data-part="root"]` 部件选择器，位于 `xihan.components` 层。覆盖样式使用 `xihan.overrides`。 ### 数据属性由 `connect` 生成；条件不成立时不输出无值属性。 | 部件 | 属性 | 值 | | --- | --- | --- | | `root` | `data-size` | props.size | | `root` | `data-tone` | props.tone | | `root` | `data-variant` | props.variant | ### CSS 变量本组件公开覆盖槽由独立皮肤的实际消费位生成；默认来源、作用部件和状态均与 CSS 同源。 | 变量 | 部件 | CSS 属性 | 状态 | 默认来源 | 说明 | | --- | --- | --- | --- | --- | --- | | `--xh-icon-wrapper-bg` | `root` | `background` | `default` | `--xh-bg-subtle` | icon-wrapper 的 root 部件 background 覆盖槽。 | | `--xh-icon-wrapper-fg` | `root` | `color` | `default` | `--xh-fg-default` | icon-wrapper 的 root 部件 color 覆盖槽。 | | `--xh-icon-wrapper-glyph-size` | `root` | `--xh-icon-size` | `default`
`size=lg`
`size=sm` | `--xh-glyph-size-lg`
`--xh-glyph-size-md`
`--xh-glyph-size-sm` | icon-wrapper 的 root 部件 --xh-icon-size 覆盖槽。 | | `--xh-icon-wrapper-radius` | `root` | `border-radius` | `default` | `--xh-shape-circle` | icon-wrapper 的 root 部件 border-radius 覆盖槽。 | | `--xh-icon-wrapper-shadow` | `root` | `box-shadow` | `variant=solid` | `--xh-_icon-wrapper-highlight` | icon-wrapper 的 root 部件 box-shadow 覆盖槽。 | | `--xh-icon-wrapper-size` | `root` | `block-size`
`inline-size` | `default`
`size=lg`
`size=sm` | `--xh-control-h-lg`
`--xh-control-h-md`
`--xh-control-h-sm` | icon-wrapper 的 root 部件 block-size、inline-size 覆盖槽。 | ### 动效本组件皮肤不含过渡与关键帧，也没有脚本驱动的动效：状态一变，外观立即到位。