图标块 icon-wrapper

通用组件。三层同源：无头内核给出解剖与状态机，Vue 组件与自定义元素只是它的两层外壳，行为完全一致。

示例

基础用法

定直径的圆底座，图元在正中；底座换档时里面的图元跟着一起换

<script setup lang="ts">
import { XhIcon, XhIconWrapper } from "@xihan-ui/vue";

const BellIcon = {
  name: "bell",
  viewBox: "0 0 24 24",
  attrs: {
    "fill": "none",
    "stroke": "currentColor",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
  },
  nodes: [
    { tag: "path", attrs: { d: "M6 9a6 6 0 0 1 12 0c0 4 1 5.5 2 6.5H4c1-1 2-2.5 2-6.5Z" } },
    { tag: "path", attrs: { d: "M10 19a2 2 0 0 0 4 0" } },
  ],
} as const;
</script>

<template>
  <XhIconWrapper>
    <XhIcon :icon="BellIcon" />
  </XhIconWrapper>
</template>

形态

四种形态只决定底色、描边与前景怎么用，直径与形状一个字不动

<script setup lang="ts">
import { XhIcon, XhIconWrapper } from "@xihan-ui/vue";

const variants = ["solid", "subtle", "outline", "ghost"];

const CheckIcon = {
  name: "check",
  viewBox: "0 0 24 24",
  attrs: {
    "fill": "none",
    "stroke": "currentColor",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
  },
  nodes: [{ tag: "path", attrs: { d: "M4 12.5L9.5 18L20 6.5" } }],
} as const;
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <XhIconWrapper v-for="v in variants" :key="v" :variant="v">
      <XhIcon :icon="CheckIcon" />
    </XhIconWrapper>
  </div>
</template>

语气

换一族颜色只改 tone，形态那一轴一个字不动

<script setup lang="ts">
import { XhIcon, XhIconWrapper } from "@xihan-ui/vue";

const tones = ["brand", "neutral", "success", "warning", "danger", "info"];

const StarIcon = {
  name: "star",
  viewBox: "0 0 24 24",
  attrs: {
    "fill": "none",
    "stroke": "currentColor",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
  },
  nodes: [
    { tag: "path", attrs: { d: "M12 3.5L14.7 9.2L21 10.1L16.5 14.5L17.6 20.7L12 17.8L6.4 20.7L7.5 14.5L3 10.1L9.3 9.2Z" } },
  ],
} as const;
</script>

<template>
  <div style="display: grid; gap: 12px">
    <div style="display: flex; align-items: center; gap: 12px">
      <XhIconWrapper v-for="t in tones" :key="t" variant="solid" :tone="t">
        <XhIcon :icon="StarIcon" />
      </XhIconWrapper>
    </div>

    <div style="display: flex; align-items: center; gap: 12px">
      <XhIconWrapper v-for="t in tones" :key="t" variant="subtle" :tone="t">
        <XhIcon :icon="StarIcon" />
      </XhIconWrapper>
    </div>
  </div>
</template>

尺寸

三档同时换底座直径与图元直径；改形状、改直径都留了槽位

<script setup lang="ts">
import { XhIcon, XhIconWrapper } from "@xihan-ui/vue";

const sizes = ["sm", "md", "lg"];

const FolderIcon = {
  name: "folder",
  viewBox: "0 0 24 24",
  attrs: {
    "fill": "none",
    "stroke": "currentColor",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
  },
  nodes: [
    { tag: "path", attrs: { d: "M3 7.5A1.5 1.5 0 0 1 4.5 6H9l2 2.5h8.5A1.5 1.5 0 0 1 21 10v7.5A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5Z" } },
  ],
} as const;
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <XhIconWrapper v-for="s in sizes" :key="s" :size="s" variant="subtle" tone="brand">
      <XhIcon :icon="FolderIcon" />
    </XhIconWrapper>

    <!-- 方底座：形状与直径各留了一个槽位，写在节点上就换掉 -->
    <XhIconWrapper
      variant="subtle"
      tone="brand"
      style="--xh-icon-wrapper-radius: var(--xh-radius-lg); --xh-icon-wrapper-size: 48px; --xh-icon-wrapper-glyph-size: 24px"
    >
      <XhIcon :icon="FolderIcon" />
    </XhIconWrapper>
  </div>
</template>

产物

层	值
自定义元素	<xh-icon-wrapper>
Vue 组件	XhIconWrapper
状态机	无，connect 直接由 props 算属性
皮肤	@xihan-ui/styles/icon-wrapper.css

解剖

部件名即 data-part 属性值，也是皮肤的选择器。加粗的是必备部件，不渲染它组件不工作（Web Components 适配器会在诊断通道上报 wc.missing-part）。

data-scope="icon-wrapper"：root

Props

属性	类型	必填	说明
size	Size		尺寸：sm / md / lg，决定底座直径与里面图元的直径。
tone	Tone		语气：brand / neutral / success / warning / danger / info，决定用哪族颜色。
variant	ActionVariant		形态：solid / subtle / outline / ghost，决定底色、描边与前景怎么用。

connect API

connect 产出的对象。getXxxProps() 铺到对应部件的宿主元素上，其余是可读状态与操作入口。

成员	类型	说明
getRootProps	() => T['element']

键盘

规格出处：W3C APG

无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。