{
 "slug": "icon",
 "curated": true,
 "mode": "scenarios",
 "examples": [
  {
   "id": "icon-ex-1",
   "title": "尺寸档位（关键字 + 任意 CSS 长度）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<section class=\"demo-block\" id=\"sec-size\">\n  <div class=\"row\" id=\"row-size\"></div>\n  <div class=\"row\" id=\"row-size-any\"></div>\n  <p class=\"demo-note\">size 只驱动 CSS 变量 --kole-icon-size（落地为 font-size），SVG 边长恒为 1em，故关键字与任意 CSS 长度走同一条路径。</p>\n</section>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      2
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      4
     ],
     [
      0,
      5
     ],
     [
      0,
      6
     ],
     [
      0,
      7
     ],
     [
      0,
      8
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<section class=\"demo-block\" id=\"sec-size\">\n  <div class=\"row\" id=\"row-size\"></div>\n  <div class=\"row\" id=\"row-size-any\"></div>\n  <p>size 只驱动 CSS 变量 --kole-icon-size（落地为 font-size），SVG 边长恒为 1em，故关键字与任意 CSS 长度走同一条路径。</p>\n</section>",
    "jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n  <KoleIcon name=\"search\" size=\"small\" label=\"搜索（small）\" />\n  <KoleIcon name=\"search\" size=\"default\" label=\"搜索（default）\" />\n  <KoleIcon name=\"search\" size=\"large\" label=\"搜索（large）\" />\n  <KoleIcon name=\"search\" size=\"xlarge\" label=\"搜索（xlarge）\" />\n  <KoleIcon name=\"search\" size=\"18px\" label=\"搜索（18px）\" />\n  <KoleIcon name=\"search\" size=\"2rem\" label=\"搜索（2rem）\" />\n</>",
    "vue3": "<template>\n  <KoleIcon name=\"search\" size=\"small\" label=\"搜索（small）\" />\n  <KoleIcon name=\"search\" size=\"default\" label=\"搜索（default）\" />\n  <KoleIcon name=\"search\" size=\"large\" label=\"搜索（large）\" />\n  <KoleIcon name=\"search\" size=\"xlarge\" label=\"搜索（xlarge）\" />\n  <KoleIcon name=\"search\" size=\"18px\" label=\"搜索（18px）\" />\n  <KoleIcon name=\"search\" size=\"2rem\" label=\"搜索（2rem）\" />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleIcon name=\"search\" size=\"small\" label=\"搜索（small）\" />\n    <KoleIcon name=\"search\" size=\"default\" label=\"搜索（default）\" />\n    <KoleIcon name=\"search\" size=\"large\" label=\"搜索（large）\" />\n    <KoleIcon name=\"search\" size=\"xlarge\" label=\"搜索（xlarge）\" />\n    <KoleIcon name=\"search\" size=\"18px\" label=\"搜索（18px）\" />\n    <KoleIcon name=\"search\" size=\"2rem\" label=\"搜索（2rem）\" />\n  </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleIcon }\n};\n</script>",
    "tsx": "import { KoleIcon } from 'kole-ui/react';\n\ntype IconSize = 'small' | 'default' | 'large' | 'xlarge' | '18px' | '2rem';\ninterface SizeSample {\n  size: IconSize;\n  label: string;\n}\n\nconst samples: ReadonlyArray<SizeSample> = [\n  { size: 'small', label: '搜索（small）' },\n  { size: 'default', label: '搜索（default）' },\n  { size: 'large', label: '搜索（large）' },\n  { size: 'xlarge', label: '搜索（xlarge）' },\n  { size: '18px', label: '搜索（18px）' },\n  { size: '2rem', label: '搜索（2rem）' },\n];\n\nexport default function KoleIconSizeDemo(): JSX.Element {\n  return (\n    <>\n      {samples.map((sample) => (\n        <KoleIcon key={sample.size} name=\"search\" size={sample.size} label={sample.label} />\n      ))}\n    </>\n  );\n}",
    "vue3ts": "<template>\n  <KoleIcon\n    v-for=\"sample in samples\"\n    :key=\"sample.size\"\n    name=\"search\"\n    :size=\"sample.size\"\n    :label=\"sample.label\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ntype IconSize = 'small' | 'default' | 'large' | 'xlarge' | '18px' | '2rem';\ninterface SizeSample {\n  size: IconSize;\n  label: string;\n}\n\nconst samples: ReadonlyArray<SizeSample> = [\n  { size: 'small', label: '搜索（small）' },\n  { size: 'default', label: '搜索（default）' },\n  { size: 'large', label: '搜索（large）' },\n  { size: 'xlarge', label: '搜索（xlarge）' },\n  { size: '18px', label: '搜索（18px）' },\n  { size: '2rem', label: '搜索（2rem）' },\n];\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleIcon\n      v-for=\"sample in samples\"\n      :key=\"sample.size\"\n      name=\"search\"\n      :size=\"sample.size\"\n      :label=\"sample.label\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ntype IconSize = 'small' | 'default' | 'large' | 'xlarge' | '18px' | '2rem';\ninterface SizeSample {\n  size: IconSize;\n  label: string;\n}\n\nexport default Vue.extend({\n  components: { KoleIcon },\n  data(): { samples: ReadonlyArray<SizeSample> } {\n    return {\n      samples: [\n        { size: 'small', label: '搜索（small）' },\n        { size: 'default', label: '搜索（default）' },\n        { size: 'large', label: '搜索（large）' },\n        { size: 'xlarge', label: '搜索（xlarge）' },\n        { size: '18px', label: '搜索（18px）' },\n        { size: '2rem', label: '搜索（2rem）' },\n      ],\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Icon.html:204 TIERS = ['small','default','large','xlarge'] 与 :216 fill('row-size', TIERS.map(...)) 的实参；:220 fill('row-size-any', ...) 给出任意 CSS 长度 18px / 2rem",
    "TS 形态依据 TS-VARIANTS.md：tsx 用 type IconSize 字面量联合 + ReadonlyArray 循环；vue3ts/vue2ts 用 <script lang=\"ts\"> + 局部 interface SizeSample；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）",
    "TS 形态依据 TS-VARIANTS.md：tsx 用 type IconSize 字面量联合 + ReadonlyArray 循环；vue3ts/vue2ts 用 <script lang=\"ts\"> + 局部 interface SizeSample；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
   ]
  },
  {
   "id": "icon-ex-2",
   "title": "语义色 tone",
   "titleSrc": "demo",
   "desc": "",
   "html": "<section class=\"demo-block\" id=\"sec-tone\">\n  <div class=\"row\" id=\"row-tone\"></div>\n  <div class=\"row\" id=\"row-tone-color\"></div>\n  <p class=\"demo-note\">语义色只改 color（图标描边/填充走 currentColor）；color 属性优先于 tone。图标不作为唯一信息载体：颜色变化一律伴随文字或 label。</p>\n</section>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      2
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      4
     ],
     [
      0,
      5
     ],
     [
      0,
      6
     ],
     [
      0,
      7
     ],
     [
      0,
      8
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<section class=\"demo-block\" id=\"sec-tone\">\n  <div class=\"row\" id=\"row-tone\"></div>\n  <div class=\"row\" id=\"row-tone-color\"></div>\n  <p>语义色只改 color（图标描边/填充走 currentColor）；color 属性优先于 tone。图标不作为唯一信息载体：颜色变化一律伴随文字或 label。</p>\n</section>",
    "jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n  <KoleIcon name=\"star\" tone=\"default\" label=\"收藏（default）\" />\n  <KoleIcon name=\"star\" tone=\"brand\" label=\"收藏（brand）\" />\n  <KoleIcon name=\"star\" tone=\"secondary\" label=\"收藏（secondary）\" />\n  <KoleIcon name=\"star\" tone=\"danger\" label=\"收藏（danger）\" />\n  <KoleIcon name=\"star\" tone=\"success\" label=\"收藏（success）\" />\n  <KoleIcon name=\"star\" tone=\"warning\" label=\"收藏（warning）\" />\n  <KoleIcon name=\"heart\" tone=\"brand\" color=\"var(--kole-color-error)\" label=\"喜欢（color 覆盖 tone）\" />\n</>",
    "vue3": "<template>\n  <KoleIcon name=\"star\" tone=\"default\" label=\"收藏（default）\" />\n  <KoleIcon name=\"star\" tone=\"brand\" label=\"收藏（brand）\" />\n  <KoleIcon name=\"star\" tone=\"secondary\" label=\"收藏（secondary）\" />\n  <KoleIcon name=\"star\" tone=\"danger\" label=\"收藏（danger）\" />\n  <KoleIcon name=\"star\" tone=\"success\" label=\"收藏（success）\" />\n  <KoleIcon name=\"star\" tone=\"warning\" label=\"收藏（warning）\" />\n  <KoleIcon name=\"heart\" tone=\"brand\" color=\"var(--kole-color-error)\" label=\"喜欢（color 覆盖 tone）\" />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleIcon name=\"star\" tone=\"default\" label=\"收藏（default）\" />\n    <KoleIcon name=\"star\" tone=\"brand\" label=\"收藏（brand）\" />\n    <KoleIcon name=\"star\" tone=\"secondary\" label=\"收藏（secondary）\" />\n    <KoleIcon name=\"star\" tone=\"danger\" label=\"收藏（danger）\" />\n    <KoleIcon name=\"star\" tone=\"success\" label=\"收藏（success）\" />\n    <KoleIcon name=\"star\" tone=\"warning\" label=\"收藏（warning）\" />\n    <KoleIcon name=\"heart\" tone=\"brand\" color=\"var(--kole-color-error)\" label=\"喜欢（color 覆盖 tone）\" />\n  </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleIcon }\n};\n</script>",
    "tsx": "import { KoleIcon } from 'kole-ui/react';\n\ntype IconTone = 'default' | 'brand' | 'secondary' | 'danger' | 'success' | 'warning';\ninterface ToneSample {\n  tone: IconTone;\n  label: string;\n}\n\nconst tones: ReadonlyArray<ToneSample> = [\n  { tone: 'default', label: '收藏（default）' },\n  { tone: 'brand', label: '收藏（brand）' },\n  { tone: 'secondary', label: '收藏（secondary）' },\n  { tone: 'danger', label: '收藏（danger）' },\n  { tone: 'success', label: '收藏（success）' },\n  { tone: 'warning', label: '收藏（warning）' },\n];\n\nexport default function KoleIconToneDemo(): JSX.Element {\n  return (\n    <>\n      {tones.map((sample) => (\n        <KoleIcon key={sample.tone} name=\"star\" tone={sample.tone} label={sample.label} />\n      ))}\n      <KoleIcon name=\"heart\" tone=\"brand\" color=\"var(--kole-color-error)\" label=\"喜欢（color 覆盖 tone）\" />\n    </>\n  );\n}",
    "vue3ts": "<template>\n  <KoleIcon\n    v-for=\"sample in tones\"\n    :key=\"sample.tone\"\n    name=\"star\"\n    :tone=\"sample.tone\"\n    :label=\"sample.label\"\n  />\n  <KoleIcon name=\"heart\" tone=\"brand\" color=\"var(--kole-color-error)\" label=\"喜欢（color 覆盖 tone）\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ntype IconTone = 'default' | 'brand' | 'secondary' | 'danger' | 'success' | 'warning';\ninterface ToneSample {\n  tone: IconTone;\n  label: string;\n}\n\nconst tones: ReadonlyArray<ToneSample> = [\n  { tone: 'default', label: '收藏（default）' },\n  { tone: 'brand', label: '收藏（brand）' },\n  { tone: 'secondary', label: '收藏（secondary）' },\n  { tone: 'danger', label: '收藏（danger）' },\n  { tone: 'success', label: '收藏（success）' },\n  { tone: 'warning', label: '收藏（warning）' },\n];\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleIcon\n      v-for=\"sample in tones\"\n      :key=\"sample.tone\"\n      name=\"star\"\n      :tone=\"sample.tone\"\n      :label=\"sample.label\"\n    />\n    <KoleIcon name=\"heart\" tone=\"brand\" color=\"var(--kole-color-error)\" label=\"喜欢（color 覆盖 tone）\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ntype IconTone = 'default' | 'brand' | 'secondary' | 'danger' | 'success' | 'warning';\ninterface ToneSample {\n  tone: IconTone;\n  label: string;\n}\n\nexport default Vue.extend({\n  components: { KoleIcon },\n  data(): { tones: ReadonlyArray<ToneSample> } {\n    return {\n      tones: [\n        { tone: 'default', label: '收藏（default）' },\n        { tone: 'brand', label: '收藏（brand）' },\n        { tone: 'secondary', label: '收藏（secondary）' },\n        { tone: 'danger', label: '收藏（danger）' },\n        { tone: 'success', label: '收藏（success）' },\n        { tone: 'warning', label: '收藏（warning）' },\n      ],\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Icon.html:205 TONES = ['default','brand','secondary','danger','success','warning'] 与 :225 fill('row-tone', TONES.map(...))；:229 fill('row-tone-color', ...) 的 color='var(--kole-color-error)' 覆盖 tone='brand'"
   ]
  },
  {
   "id": "icon-ex-3",
   "title": "旋转 spin",
   "titleSrc": "demo",
   "desc": "",
   "html": "<section class=\"demo-block\" id=\"sec-spin\">\n  <div class=\"row\" id=\"row-spin\"></div>\n  <p class=\"demo-note\">spin 表示「进行中」；样式表在 prefers-reduced-motion: reduce 下把动画置 none（不会旋转）。</p>\n</section>",
   "preview": {
    "show": [
     [
      0,
      4
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      2
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3
     ],
     [
      0,
      5
     ],
     [
      0,
      6
     ],
     [
      0,
      7
     ],
     [
      0,
      8
     ],
     [
      0,
      4,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<section class=\"demo-block\" id=\"sec-spin\">\n  <div class=\"row\" id=\"row-spin\"></div>\n  <p>spin 表示「进行中」；样式表在 prefers-reduced-motion: reduce 下把动画置 none（不会旋转）。</p>\n</section>",
    "jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n  <KoleIcon name=\"loading\" spin tone=\"brand\" label=\"加载中\" />\n  <span>正在同步数据…</span>\n  <KoleIcon name=\"refresh\" spin label=\"刷新中\" />\n</>",
    "vue3": "<template>\n  <KoleIcon name=\"loading\" spin tone=\"brand\" label=\"加载中\" />\n  <span>正在同步数据…</span>\n  <KoleIcon name=\"refresh\" spin label=\"刷新中\" />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleIcon name=\"loading\" spin tone=\"brand\" label=\"加载中\" />\n    <span>正在同步数据…</span>\n    <KoleIcon name=\"refresh\" spin label=\"刷新中\" />\n  </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleIcon }\n};\n</script>",
    "tsx": "import { KoleIcon } from 'kole-ui/react';\n\ntype SpinnerName = 'loading' | 'refresh';\ninterface SpinEntry {\n  name: SpinnerName;\n  label: string;\n  tone?: 'brand';\n}\n\nconst spinners: readonly [SpinEntry, SpinEntry] = [\n  { name: 'loading', label: '加载中', tone: 'brand' },\n  { name: 'refresh', label: '刷新中' },\n];\n\nexport default function KoleIconSpinDemo(): JSX.Element {\n  const [busy, idle] = spinners;\n  return (\n    <>\n      <KoleIcon name={busy.name} spin tone={busy.tone} label={busy.label} />\n      <span>正在同步数据…</span>\n      <KoleIcon name={idle.name} spin label={idle.label} />\n    </>\n  );\n}",
    "vue3ts": "<template>\n  <KoleIcon :name=\"busy.name\" spin :tone=\"busy.tone\" :label=\"busy.label\" />\n  <span>正在同步数据…</span>\n  <KoleIcon :name=\"idle.name\" spin :label=\"idle.label\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ntype SpinnerName = 'loading' | 'refresh';\ninterface SpinEntry {\n  name: SpinnerName;\n  label: string;\n  tone?: 'brand';\n}\n\nconst spinners: readonly [SpinEntry, SpinEntry] = [\n  { name: 'loading', label: '加载中', tone: 'brand' },\n  { name: 'refresh', label: '刷新中' },\n];\nconst [busy, idle] = spinners;\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleIcon :name=\"busy.name\" spin :tone=\"busy.tone\" :label=\"busy.label\" />\n    <span>正在同步数据…</span>\n    <KoleIcon :name=\"idle.name\" spin :label=\"idle.label\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ntype SpinnerName = 'loading' | 'refresh';\ninterface SpinEntry {\n  name: SpinnerName;\n  label: string;\n  tone?: 'brand';\n}\n\nexport default Vue.extend({\n  components: { KoleIcon },\n  data(): { spinners: readonly [SpinEntry, SpinEntry] } {\n    return {\n      spinners: [\n        { name: 'loading', label: '加载中', tone: 'brand' },\n        { name: 'refresh', label: '刷新中' },\n      ],\n    };\n  },\n  computed: {\n    busy(): SpinEntry {\n      return this.spinners[0];\n    },\n    idle(): SpinEntry {\n      return this.spinners[1];\n    },\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Icon.html:233 fill('row-spin', ...) 的两个实参：{ name:'loading', spin:true, tone:'brand', label:'加载中' } 与 { name:'refresh', spin:true, label:'刷新中' }"
   ]
  },
  {
   "id": "icon-ex-4",
   "title": "无障碍：label 有值 / 无值",
   "titleSrc": "demo",
   "desc": "",
   "html": "<section class=\"demo-block\" id=\"sec-a11y\">\n  <div class=\"row\" id=\"row-a11y-labelled\"></div>\n  <div class=\"row\" id=\"row-a11y-decorative\"></div>\n  <p class=\"demo-note\">同一张图标：有 label 时是「有语义的图」，无 label 时是装饰。判据只看 label 是否有值，与 name 无关。</p>\n</section>",
   "preview": {
    "show": [
     [
      0,
      5
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      2
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3
     ],
     [
      0,
      4
     ],
     [
      0,
      6
     ],
     [
      0,
      7
     ],
     [
      0,
      8
     ],
     [
      0,
      5,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<section class=\"demo-block\" id=\"sec-a11y\">\n  <div class=\"row\" id=\"row-a11y-labelled\"></div>\n  <div class=\"row\" id=\"row-a11y-decorative\"></div>\n  <p>同一张图标：有 label 时是「有语义的图」，无 label 时是装饰。判据只看 label 是否有值，与 name 无关。</p>\n</section>",
    "jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n  <KoleIcon name=\"check-circle\" tone=\"success\" label=\"校验通过\" />\n  <KoleIcon name=\"check-circle\" tone=\"success\" />\n</>",
    "vue3": "<template>\n  <KoleIcon name=\"check-circle\" tone=\"success\" label=\"校验通过\" />\n  <KoleIcon name=\"check-circle\" tone=\"success\" />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleIcon name=\"check-circle\" tone=\"success\" label=\"校验通过\" />\n    <KoleIcon name=\"check-circle\" tone=\"success\" />\n  </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleIcon }\n};\n</script>",
    "tsx": "import { KoleIcon } from 'kole-ui/react';\n\ninterface A11ySample {\n  key: 'with-label' | 'without-label';\n  label: string;\n}\n\nconst samples: ReadonlyArray<A11ySample> = [\n  { key: 'with-label', label: '校验通过' },\n  { key: 'without-label', label: '' },\n];\n\nexport default function KoleIconA11yDemo(): JSX.Element {\n  return (\n    <>\n      {samples.map((sample) => (\n        <KoleIcon key={sample.key} name=\"check-circle\" tone=\"success\" label={sample.label} />\n      ))}\n    </>\n  );\n}",
    "vue3ts": "<template>\n  <KoleIcon\n    v-for=\"sample in samples\"\n    :key=\"sample.key\"\n    name=\"check-circle\"\n    tone=\"success\"\n    :label=\"sample.label\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ninterface A11ySample {\n  key: 'with-label' | 'without-label';\n  label: string;\n}\n\nconst samples: ReadonlyArray<A11ySample> = [\n  { key: 'with-label', label: '校验通过' },\n  { key: 'without-label', label: '' },\n];\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleIcon\n      v-for=\"sample in samples\"\n      :key=\"sample.key\"\n      name=\"check-circle\"\n      tone=\"success\"\n      :label=\"sample.label\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ninterface A11ySample {\n  key: 'with-label' | 'without-label';\n  label: string;\n}\n\nexport default Vue.extend({\n  components: { KoleIcon },\n  data(): { samples: ReadonlyArray<A11ySample> } {\n    return {\n      samples: [\n        { key: 'with-label', label: '校验通过' },\n        { key: 'without-label', label: '' },\n      ],\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Icon.html:239 fill('row-a11y-labelled', ...) 有 label 与 :243 fill('row-a11y-decorative', ...) 无 label 的同一张 check-circle；判据只有 label 是否有值"
   ]
  },
  {
   "id": "icon-ex-5",
   "title": "图标名查找（core 层内联 + 别名折叠）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<section class=\"demo-block\" id=\"sec-lookup\">\n  <div class=\"row kole-icon-grid\" id=\"row-lookup\"></div>\n  <div class=\"row\" id=\"row-alias\"></div>\n  <div class=\"row\" id=\"row-miss\"></div>\n  <p class=\"demo-note\">查找只认注入表里的名字（别名在注入时已折叠成终态表）；查不到时用默认插槽兜底，不抛错、不显示错误图标。</p>\n</section>",
   "preview": {
    "show": [
     [
      0,
      6
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      2
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3
     ],
     [
      0,
      4
     ],
     [
      0,
      5
     ],
     [
      0,
      7
     ],
     [
      0,
      8
     ],
     [
      0,
      6,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<section class=\"demo-block\" id=\"sec-lookup\">\n  <div class=\"row kole-icon-grid\" id=\"row-lookup\"></div>\n  <div class=\"row\" id=\"row-alias\"></div>\n  <div class=\"row\" id=\"row-miss\"></div>\n  <p>查找只认注入表里的名字（别名在注入时已折叠成终态表）；查不到时用默认插槽兜底，不抛错、不显示错误图标。</p>\n</section>",
    "jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n  <KoleIcon name=\"search\" label=\"search\" />\n  <KoleIcon name=\"filter\" label=\"filter\" />\n  <KoleIcon name=\"view\" label=\"view\" />\n  <KoleIcon name=\"hide\" label=\"hide\" />\n  <KoleIcon name=\"edit\" label=\"edit\" />\n  <KoleIcon name=\"delete\" label=\"delete\" />\n  <KoleIcon name=\"copy\" label=\"copy\" />\n  <KoleIcon name=\"download\" label=\"download\" />\n  <KoleIcon name=\"upload\" label=\"upload\" />\n  <KoleIcon name=\"setting\" label=\"setting\" />\n  <KoleIcon name=\"bell\" label=\"bell\" />\n  <KoleIcon name=\"user\" label=\"user\" />\n  <KoleIcon name=\"mail\" label=\"mail\" />\n  <KoleIcon name=\"calendar\" label=\"calendar\" />\n  <KoleIcon name=\"folder\" label=\"folder\" />\n  <KoleIcon name=\"image\" label=\"image\" />\n  <KoleIcon name=\"cart\" label=\"cart\" />\n  <KoleIcon name=\"money\" label=\"money\" />\n  <KoleIcon name=\"clock\" label=\"clock\" />\n  <KoleIcon name=\"help-circle\" label=\"help-circle\" />\n  <KoleIcon name=\"warn\" tone=\"warning\" label=\"warn → warning\" />\n  <KoleIcon name=\"info\" tone=\"brand\" label=\"info → info-circle\" />\n  <KoleIcon name=\"date\" label=\"date → calendar\" />\n  <KoleIcon name=\"not-a-real-icon-name\" label=\"未命中回落插槽\"><strong>?</strong></KoleIcon>\n</>",
    "vue3": "<template>\n  <KoleIcon name=\"search\" label=\"search\" />\n  <KoleIcon name=\"filter\" label=\"filter\" />\n  <KoleIcon name=\"view\" label=\"view\" />\n  <KoleIcon name=\"hide\" label=\"hide\" />\n  <KoleIcon name=\"edit\" label=\"edit\" />\n  <KoleIcon name=\"delete\" label=\"delete\" />\n  <KoleIcon name=\"copy\" label=\"copy\" />\n  <KoleIcon name=\"download\" label=\"download\" />\n  <KoleIcon name=\"upload\" label=\"upload\" />\n  <KoleIcon name=\"setting\" label=\"setting\" />\n  <KoleIcon name=\"bell\" label=\"bell\" />\n  <KoleIcon name=\"user\" label=\"user\" />\n  <KoleIcon name=\"mail\" label=\"mail\" />\n  <KoleIcon name=\"calendar\" label=\"calendar\" />\n  <KoleIcon name=\"folder\" label=\"folder\" />\n  <KoleIcon name=\"image\" label=\"image\" />\n  <KoleIcon name=\"cart\" label=\"cart\" />\n  <KoleIcon name=\"money\" label=\"money\" />\n  <KoleIcon name=\"clock\" label=\"clock\" />\n  <KoleIcon name=\"help-circle\" label=\"help-circle\" />\n  <KoleIcon name=\"warn\" tone=\"warning\" label=\"warn → warning\" />\n  <KoleIcon name=\"info\" tone=\"brand\" label=\"info → info-circle\" />\n  <KoleIcon name=\"date\" label=\"date → calendar\" />\n  <KoleIcon name=\"not-a-real-icon-name\" label=\"未命中回落插槽\"><strong>?</strong></KoleIcon>\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleIcon name=\"search\" label=\"search\" />\n    <KoleIcon name=\"filter\" label=\"filter\" />\n    <KoleIcon name=\"view\" label=\"view\" />\n    <KoleIcon name=\"hide\" label=\"hide\" />\n    <KoleIcon name=\"edit\" label=\"edit\" />\n    <KoleIcon name=\"delete\" label=\"delete\" />\n    <KoleIcon name=\"copy\" label=\"copy\" />\n    <KoleIcon name=\"download\" label=\"download\" />\n    <KoleIcon name=\"upload\" label=\"upload\" />\n    <KoleIcon name=\"setting\" label=\"setting\" />\n    <KoleIcon name=\"bell\" label=\"bell\" />\n    <KoleIcon name=\"user\" label=\"user\" />\n    <KoleIcon name=\"mail\" label=\"mail\" />\n    <KoleIcon name=\"calendar\" label=\"calendar\" />\n    <KoleIcon name=\"folder\" label=\"folder\" />\n    <KoleIcon name=\"image\" label=\"image\" />\n    <KoleIcon name=\"cart\" label=\"cart\" />\n    <KoleIcon name=\"money\" label=\"money\" />\n    <KoleIcon name=\"clock\" label=\"clock\" />\n    <KoleIcon name=\"help-circle\" label=\"help-circle\" />\n    <KoleIcon name=\"warn\" tone=\"warning\" label=\"warn → warning\" />\n    <KoleIcon name=\"info\" tone=\"brand\" label=\"info → info-circle\" />\n    <KoleIcon name=\"date\" label=\"date → calendar\" />\n    <KoleIcon name=\"not-a-real-icon-name\" label=\"未命中回落插槽\"><strong>?</strong></KoleIcon>\n  </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleIcon }\n};\n</script>",
    "tsx": "import { KoleIcon } from 'kole-ui/react';\n\ntype CoreIconName =\n  | 'search' | 'filter' | 'view' | 'hide' | 'edit' | 'delete' | 'copy'\n  | 'download' | 'upload' | 'setting' | 'bell' | 'user' | 'mail'\n  | 'calendar' | 'folder' | 'image' | 'cart' | 'money' | 'clock'\n  | 'help-circle' | 'warn' | 'info' | 'date';\n\ninterface RegistryEntry {\n  name: CoreIconName;\n  label: string;\n  tone?: 'warning' | 'brand';\n}\n\nconst registry: ReadonlyArray<RegistryEntry> = [\n  { name: 'search', label: 'search' },\n  { name: 'filter', label: 'filter' },\n  { name: 'view', label: 'view' },\n  { name: 'hide', label: 'hide' },\n  { name: 'edit', label: 'edit' },\n  { name: 'delete', label: 'delete' },\n  { name: 'copy', label: 'copy' },\n  { name: 'download', label: 'download' },\n  { name: 'upload', label: 'upload' },\n  { name: 'setting', label: 'setting' },\n  { name: 'bell', label: 'bell' },\n  { name: 'user', label: 'user' },\n  { name: 'mail', label: 'mail' },\n  { name: 'calendar', label: 'calendar' },\n  { name: 'folder', label: 'folder' },\n  { name: 'image', label: 'image' },\n  { name: 'cart', label: 'cart' },\n  { name: 'money', label: 'money' },\n  { name: 'clock', label: 'clock' },\n  { name: 'help-circle', label: 'help-circle' },\n  { name: 'warn', label: 'warn → warning', tone: 'warning' },\n  { name: 'info', label: 'info → info-circle', tone: 'brand' },\n  { name: 'date', label: 'date → calendar' },\n];\n\nexport default function KoleIconRegistryDemo(): JSX.Element {\n  return (\n    <>\n      {registry.map((entry) => (\n        <KoleIcon key={entry.name} name={entry.name} tone={entry.tone} label={entry.label} />\n      ))}\n      <KoleIcon name=\"not-a-real-icon-name\" label=\"未命中回落插槽\"><strong>?</strong></KoleIcon>\n    </>\n  );\n}",
    "vue3ts": "<template>\n  <KoleIcon\n    v-for=\"entry in registry\"\n    :key=\"entry.name\"\n    :name=\"entry.name\"\n    :tone=\"entry.tone\"\n    :label=\"entry.label\"\n  />\n  <KoleIcon name=\"not-a-real-icon-name\" label=\"未命中回落插槽\"><strong>?</strong></KoleIcon>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ntype CoreIconName =\n  | 'search' | 'filter' | 'view' | 'hide' | 'edit' | 'delete' | 'copy'\n  | 'download' | 'upload' | 'setting' | 'bell' | 'user' | 'mail'\n  | 'calendar' | 'folder' | 'image' | 'cart' | 'money' | 'clock'\n  | 'help-circle' | 'warn' | 'info' | 'date';\n\ninterface RegistryEntry {\n  name: CoreIconName;\n  label: string;\n  tone?: 'warning' | 'brand';\n}\n\nconst registry: ReadonlyArray<RegistryEntry> = [\n  { name: 'search', label: 'search' },\n  { name: 'filter', label: 'filter' },\n  { name: 'view', label: 'view' },\n  { name: 'hide', label: 'hide' },\n  { name: 'edit', label: 'edit' },\n  { name: 'delete', label: 'delete' },\n  { name: 'copy', label: 'copy' },\n  { name: 'download', label: 'download' },\n  { name: 'upload', label: 'upload' },\n  { name: 'setting', label: 'setting' },\n  { name: 'bell', label: 'bell' },\n  { name: 'user', label: 'user' },\n  { name: 'mail', label: 'mail' },\n  { name: 'calendar', label: 'calendar' },\n  { name: 'folder', label: 'folder' },\n  { name: 'image', label: 'image' },\n  { name: 'cart', label: 'cart' },\n  { name: 'money', label: 'money' },\n  { name: 'clock', label: 'clock' },\n  { name: 'help-circle', label: 'help-circle' },\n  { name: 'warn', label: 'warn → warning', tone: 'warning' },\n  { name: 'info', label: 'info → info-circle', tone: 'brand' },\n  { name: 'date', label: 'date → calendar' },\n];\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleIcon\n      v-for=\"entry in registry\"\n      :key=\"entry.name\"\n      :name=\"entry.name\"\n      :tone=\"entry.tone\"\n      :label=\"entry.label\"\n    />\n    <KoleIcon name=\"not-a-real-icon-name\" label=\"未命中回落插槽\"><strong>?</strong></KoleIcon>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ntype CoreIconName =\n  | 'search' | 'filter' | 'view' | 'hide' | 'edit' | 'delete' | 'copy'\n  | 'download' | 'upload' | 'setting' | 'bell' | 'user' | 'mail'\n  | 'calendar' | 'folder' | 'image' | 'cart' | 'money' | 'clock'\n  | 'help-circle' | 'warn' | 'info' | 'date';\n\ninterface RegistryEntry {\n  name: CoreIconName;\n  label: string;\n  tone?: 'warning' | 'brand';\n}\n\nexport default Vue.extend({\n  components: { KoleIcon },\n  data(): { registry: ReadonlyArray<RegistryEntry> } {\n    return {\n      registry: [\n        { name: 'search', label: 'search' },\n        { name: 'filter', label: 'filter' },\n        { name: 'view', label: 'view' },\n        { name: 'hide', label: 'hide' },\n        { name: 'edit', label: 'edit' },\n        { name: 'delete', label: 'delete' },\n        { name: 'copy', label: 'copy' },\n        { name: 'download', label: 'download' },\n        { name: 'upload', label: 'upload' },\n        { name: 'setting', label: 'setting' },\n        { name: 'bell', label: 'bell' },\n        { name: 'user', label: 'user' },\n        { name: 'mail', label: 'mail' },\n        { name: 'calendar', label: 'calendar' },\n        { name: 'folder', label: 'folder' },\n        { name: 'image', label: 'image' },\n        { name: 'cart', label: 'cart' },\n        { name: 'money', label: 'money' },\n        { name: 'clock', label: 'clock' },\n        { name: 'help-circle', label: 'help-circle' },\n        { name: 'warn', label: 'warn → warning', tone: 'warning' },\n        { name: 'info', label: 'info → info-circle', tone: 'brand' },\n        { name: 'date', label: 'date → calendar' },\n      ],\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Icon.html:206-208 LOOKUP_NAMES 的 20 个名字与 :248 fill('row-lookup', LOOKUP_NAMES.map(...))；别名实参取自 :257 fill('row-alias', ...)、未命中回落默认插槽取自 :263 fill('row-miss', ...)",
    "TS 形态依据 TS-VARIANTS.md：tsx 用 type CoreIconName 字面量联合 + ReadonlyArray 循环（末项回落插槽单列）；vue3ts/vue2ts 用 <script lang=\"ts\"> + 局部 interface RegistryEntry；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）",
    "TS 形态依据 TS-VARIANTS.md：tsx 用 type CoreIconName 字面量联合 + ReadonlyArray 循环（末项回落插槽单列）；vue3ts/vue2ts 用 <script lang=\"ts\"> + 局部 interface RegistryEntry；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
   ]
  },
  {
   "id": "icon-ex-6",
   "title": "实际场景",
   "titleSrc": "demo",
   "desc": "",
   "html": "<section class=\"demo-block\" id=\"sec-scenarios\">\n  <div class=\"row\" id=\"row-buttons\"></div>\n  <div class=\"row\" id=\"row-sort\"></div>\n  <div class=\"row\" id=\"row-empty\"></div>\n  <p class=\"demo-note\">图标自身不是热区：按钮 / 排序表头由原生 button 提供键盘可达与焦点环，图标只负责图形语义。</p>\n</section>",
   "preview": {
    "show": [
     [
      0,
      7
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      2
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3
     ],
     [
      0,
      4
     ],
     [
      0,
      5
     ],
     [
      0,
      6
     ],
     [
      0,
      8
     ],
     [
      0,
      7,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<section class=\"demo-block\" id=\"sec-scenarios\">\n  <div class=\"row\" id=\"row-buttons\"></div>\n  <div class=\"row\" id=\"row-sort\"></div>\n  <div class=\"row\" id=\"row-empty\"></div>\n  <p>图标自身不是热区：按钮 / 排序表头由原生 button 提供键盘可达与焦点环，图标只负责图形语义。</p>\n</section>",
    "jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n  <button className=\"kole-icon-button kole-icon-primary\" type=\"button\" aria-label=\"新建\">\n    <KoleIcon name=\"add\" size=\"small\" />\n    新建\n  </button>\n  <button className=\"kole-icon-button\" type=\"button\" aria-label=\"导出\">\n    <KoleIcon name=\"download\" size=\"small\" />\n    导出\n  </button>\n  <button className=\"kole-icon-button\" type=\"button\" aria-label=\"设置\">\n    <KoleIcon name=\"setting\" size=\"small\" label=\"设置\" />\n  </button>\n  <button className=\"kole-icon-sort-head\" type=\"button\" aria-sort=\"ascending\">\n    名称\n    <KoleIcon name=\"arrow-up\" size=\"small\" label=\"名称排序\" />\n  </button>\n  <button className=\"kole-icon-sort-head\" type=\"button\" aria-sort=\"descending\">\n    更新时间\n    <KoleIcon name=\"arrow-down\" size=\"small\" label=\"更新时间排序\" />\n  </button>\n  <div className=\"kole-icon-empty\">\n    <KoleIcon name=\"folder\" size=\"xlarge\" tone=\"secondary\" label=\"暂无数据\" />\n    <strong className=\"kole-icon-title\">暂无数据</strong>\n    <span className=\"kole-icon-desc\">调整筛选条件后重试，或新建一条记录。</span>\n  </div>\n</>",
    "vue3": "<template>\n  <>\n    <button class=\"kole-icon-button kole-icon-primary\" type=\"button\" aria-label=\"新建\">\n      <KoleIcon name=\"add\" size=\"small\" />\n      新建\n    </button>\n    <button class=\"kole-icon-button\" type=\"button\" aria-label=\"导出\">\n      <KoleIcon name=\"download\" size=\"small\" />\n      导出\n    </button>\n    <button class=\"kole-icon-button\" type=\"button\" aria-label=\"设置\">\n      <KoleIcon name=\"setting\" size=\"small\" label=\"设置\" />\n    </button>\n    <button class=\"kole-icon-sort-head\" type=\"button\" aria-sort=\"ascending\">\n      名称\n      <KoleIcon name=\"arrow-up\" size=\"small\" label=\"名称排序\" />\n    </button>\n    <button class=\"kole-icon-sort-head\" type=\"button\" aria-sort=\"descending\">\n      更新时间\n      <KoleIcon name=\"arrow-down\" size=\"small\" label=\"更新时间排序\" />\n    </button>\n    <div class=\"kole-icon-empty\">\n      <KoleIcon name=\"folder\" size=\"xlarge\" tone=\"secondary\" label=\"暂无数据\" />\n      <strong class=\"kole-icon-title\">暂无数据</strong>\n      <span class=\"kole-icon-desc\">调整筛选条件后重试，或新建一条记录。</span>\n    </div>\n  </>\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <>\n      <button class=\"kole-icon-button kole-icon-primary\" type=\"button\" aria-label=\"新建\">\n        <KoleIcon name=\"add\" size=\"small\" />\n        新建\n      </button>\n      <button class=\"kole-icon-button\" type=\"button\" aria-label=\"导出\">\n        <KoleIcon name=\"download\" size=\"small\" />\n        导出\n      </button>\n      <button class=\"kole-icon-button\" type=\"button\" aria-label=\"设置\">\n        <KoleIcon name=\"setting\" size=\"small\" label=\"设置\" />\n      </button>\n      <button class=\"kole-icon-sort-head\" type=\"button\" aria-sort=\"ascending\">\n        名称\n        <KoleIcon name=\"arrow-up\" size=\"small\" label=\"名称排序\" />\n      </button>\n      <button class=\"kole-icon-sort-head\" type=\"button\" aria-sort=\"descending\">\n        更新时间\n        <KoleIcon name=\"arrow-down\" size=\"small\" label=\"更新时间排序\" />\n      </button>\n      <div class=\"kole-icon-empty\">\n        <KoleIcon name=\"folder\" size=\"xlarge\" tone=\"secondary\" label=\"暂无数据\" />\n        <strong class=\"kole-icon-title\">暂无数据</strong>\n        <span class=\"kole-icon-desc\">调整筛选条件后重试，或新建一条记录。</span>\n      </div>\n    </>\n  </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleIcon }\n};\n</script>",
    "tsx": "import { KoleIcon } from 'kole-ui/react';\n\ntype ToolbarIconName = 'add' | 'download' | 'setting';\ninterface ToolbarAction {\n  name: ToolbarIconName;\n  text: string;\n  iconLabel?: string;\n}\n\ntype SortOrder = 'ascending' | 'descending';\ninterface SortHead {\n  order: SortOrder;\n  name: 'arrow-up' | 'arrow-down';\n  text: string;\n  iconLabel: string;\n}\n\nconst primary: ToolbarAction = { name: 'add', text: '新建' };\nconst actions: ReadonlyArray<ToolbarAction> = [\n  { name: 'download', text: '导出' },\n  { name: 'setting', text: '设置', iconLabel: '设置' },\n];\n\nconst sortHeads: ReadonlyArray<SortHead> = [\n  { order: 'ascending', name: 'arrow-up', text: '名称', iconLabel: '名称排序' },\n  { order: 'descending', name: 'arrow-down', text: '更新时间', iconLabel: '更新时间排序' },\n];\n\nexport default function KoleIconScenarioDemo(): JSX.Element {\n  return (\n    <>\n      <button className=\"kole-icon-button kole-icon-primary\" type=\"button\" aria-label={primary.text}>\n        <KoleIcon name={primary.name} size=\"small\" label={primary.iconLabel} />\n        {primary.text}\n      </button>\n      {actions.map((action) => (\n        <button key={action.name} className=\"kole-icon-button\" type=\"button\" aria-label={action.text}>\n          <KoleIcon name={action.name} size=\"small\" label={action.iconLabel} />\n          {action.text}\n        </button>\n      ))}\n      {sortHeads.map((head) => (\n        <button key={head.order} className=\"kole-icon-sort-head\" type=\"button\" aria-sort={head.order}>\n          {head.text}\n          <KoleIcon name={head.name} size=\"small\" label={head.iconLabel} />\n        </button>\n      ))}\n      <div className=\"kole-icon-empty\">\n        <KoleIcon name=\"folder\" size=\"xlarge\" tone=\"secondary\" label=\"暂无数据\" />\n        <strong className=\"kole-icon-title\">暂无数据</strong>\n        <span className=\"kole-icon-desc\">调整筛选条件后重试，或新建一条记录。</span>\n      </div>\n    </>\n  );\n}",
    "vue3ts": "<template>\n  <button class=\"kole-icon-button kole-icon-primary\" type=\"button\" :aria-label=\"primary.text\">\n    <KoleIcon :name=\"primary.name\" size=\"small\" :label=\"primary.iconLabel\" />\n    {{ primary.text }}\n  </button>\n  <button\n    v-for=\"action in actions\"\n    :key=\"action.name\"\n    class=\"kole-icon-button\"\n    type=\"button\"\n    :aria-label=\"action.text\"\n  >\n    <KoleIcon :name=\"action.name\" size=\"small\" :label=\"action.iconLabel\" />\n    {{ action.text }}\n  </button>\n  <button\n    v-for=\"head in sortHeads\"\n    :key=\"head.order\"\n    class=\"kole-icon-sort-head\"\n    type=\"button\"\n    :aria-sort=\"head.order\"\n  >\n    {{ head.text }}\n    <KoleIcon :name=\"head.name\" size=\"small\" :label=\"head.iconLabel\" />\n  </button>\n  <div class=\"kole-icon-empty\">\n    <KoleIcon name=\"folder\" size=\"xlarge\" tone=\"secondary\" label=\"暂无数据\" />\n    <strong class=\"kole-icon-title\">暂无数据</strong>\n    <span class=\"kole-icon-desc\">调整筛选条件后重试，或新建一条记录。</span>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ntype ToolbarIconName = 'add' | 'download' | 'setting';\ninterface ToolbarAction {\n  name: ToolbarIconName;\n  text: string;\n  iconLabel?: string;\n}\n\ntype SortOrder = 'ascending' | 'descending';\ninterface SortHead {\n  order: SortOrder;\n  name: 'arrow-up' | 'arrow-down';\n  text: string;\n  iconLabel: string;\n}\n\nconst primary: ToolbarAction = { name: 'add', text: '新建' };\nconst actions: ReadonlyArray<ToolbarAction> = [\n  { name: 'download', text: '导出' },\n  { name: 'setting', text: '设置', iconLabel: '设置' },\n];\n\nconst sortHeads: ReadonlyArray<SortHead> = [\n  { order: 'ascending', name: 'arrow-up', text: '名称', iconLabel: '名称排序' },\n  { order: 'descending', name: 'arrow-down', text: '更新时间', iconLabel: '更新时间排序' },\n];\n</script>",
    "vue2ts": "<template>\n  <div>\n    <button class=\"kole-icon-button kole-icon-primary\" type=\"button\" :aria-label=\"primary.text\">\n      <KoleIcon :name=\"primary.name\" size=\"small\" :label=\"primary.iconLabel\" />\n      {{ primary.text }}\n    </button>\n    <button\n      v-for=\"action in actions\"\n      :key=\"action.name\"\n      class=\"kole-icon-button\"\n      type=\"button\"\n      :aria-label=\"action.text\"\n    >\n      <KoleIcon :name=\"action.name\" size=\"small\" :label=\"action.iconLabel\" />\n      {{ action.text }}\n    </button>\n    <button\n      v-for=\"head in sortHeads\"\n      :key=\"head.order\"\n      class=\"kole-icon-sort-head\"\n      type=\"button\"\n      :aria-sort=\"head.order\"\n    >\n      {{ head.text }}\n      <KoleIcon :name=\"head.name\" size=\"small\" :label=\"head.iconLabel\" />\n    </button>\n    <div class=\"kole-icon-empty\">\n      <KoleIcon name=\"folder\" size=\"xlarge\" tone=\"secondary\" label=\"暂无数据\" />\n      <strong class=\"kole-icon-title\">暂无数据</strong>\n      <span class=\"kole-icon-desc\">调整筛选条件后重试，或新建一条记录。</span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ntype ToolbarIconName = 'add' | 'download' | 'setting';\ninterface ToolbarAction {\n  name: ToolbarIconName;\n  text: string;\n  iconLabel?: string;\n}\n\ntype SortOrder = 'ascending' | 'descending';\ninterface SortHead {\n  order: SortOrder;\n  name: 'arrow-up' | 'arrow-down';\n  text: string;\n  iconLabel: string;\n}\n\nexport default Vue.extend({\n  components: { KoleIcon },\n  data(): {\n    primary: ToolbarAction;\n    actions: ReadonlyArray<ToolbarAction>;\n    sortHeads: ReadonlyArray<SortHead>;\n  } {\n    return {\n      primary: { name: 'add', text: '新建' },\n      actions: [\n        { name: 'download', text: '导出' },\n        { name: 'setting', text: '设置', iconLabel: '设置' },\n      ],\n      sortHeads: [\n        { order: 'ascending', name: 'arrow-up', text: '名称', iconLabel: '名称排序' },\n        { order: 'descending', name: 'arrow-down', text: '更新时间', iconLabel: '更新时间排序' },\n      ],\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Icon.html:268 fill('row-buttons', ...) 的三个按钮实参、:276 fill('row-sort', ...) 经 :210 sortHead(key,state,iconName) 的 arrow-up/arrow-down/sort、:281 fill('row-empty', ...) 的 folder + xlarge + secondary"
   ]
  },
  {
   "id": "icon-ex-7",
   "title": "历史兼容（icon 字形字符）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<section class=\"demo-block\" id=\"sec-compat\">\n  <div class=\"row\" id=\"row-compat\"></div>\n  <p class=\"demo-note\">既有 icon（字形字符，默认 ★）继续可用；name 有值时 name 优先，故旧调用点不破、新调用点用 name。</p>\n</section>",
   "preview": {
    "show": [
     [
      0,
      8
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      2
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3
     ],
     [
      0,
      4
     ],
     [
      0,
      5
     ],
     [
      0,
      6
     ],
     [
      0,
      7
     ],
     [
      0,
      8,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<section class=\"demo-block\" id=\"sec-compat\">\n  <div class=\"row\" id=\"row-compat\"></div>\n  <p>既有 icon（字形字符，默认 ★）继续可用；name 有值时 name 优先，故旧调用点不破、新调用点用 name。</p>\n</section>",
    "jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n  <KoleIcon icon=\"★\" label=\"收藏\" />\n  <KoleIcon name=\"star\" icon=\"★\" tone=\"brand\" label=\"收藏（name 生效）\" />\n</>",
    "vue3": "<template>\n  <KoleIcon icon=\"★\" label=\"收藏\" />\n  <KoleIcon name=\"star\" icon=\"★\" tone=\"brand\" label=\"收藏（name 生效）\" />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleIcon icon=\"★\" label=\"收藏\" />\n    <KoleIcon name=\"star\" icon=\"★\" tone=\"brand\" label=\"收藏（name 生效）\" />\n  </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleIcon }\n};\n</script>",
    "tsx": "import { KoleIcon } from 'kole-ui/react';\n\ntype Glyph = '★';\ninterface LegacySample {\n  key: string;\n  name?: 'star';\n  glyph: Glyph;\n  tone?: 'brand';\n  label: string;\n}\n\nconst legacy: ReadonlyArray<LegacySample> = [\n  { key: 'glyph-only', glyph: '★', label: '收藏' },\n  { key: 'name-wins', name: 'star', glyph: '★', tone: 'brand', label: '收藏（name 生效）' },\n];\n\nexport default function KoleIconLegacyDemo(): JSX.Element {\n  return (\n    <>\n      {legacy.map((sample) => (\n        <KoleIcon key={sample.key} name={sample.name} icon={sample.glyph} tone={sample.tone} label={sample.label} />\n      ))}\n    </>\n  );\n}",
    "vue3ts": "<template>\n  <KoleIcon\n    v-for=\"sample in legacy\"\n    :key=\"sample.key\"\n    :name=\"sample.name\"\n    :icon=\"sample.glyph\"\n    :tone=\"sample.tone\"\n    :label=\"sample.label\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ntype Glyph = '★';\ninterface LegacySample {\n  key: string;\n  name?: 'star';\n  glyph: Glyph;\n  tone?: 'brand';\n  label: string;\n}\n\nconst legacy: ReadonlyArray<LegacySample> = [\n  { key: 'glyph-only', glyph: '★', label: '收藏' },\n  { key: 'name-wins', name: 'star', glyph: '★', tone: 'brand', label: '收藏（name 生效）' },\n];\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleIcon\n      v-for=\"sample in legacy\"\n      :key=\"sample.key\"\n      :name=\"sample.name\"\n      :icon=\"sample.glyph\"\n      :tone=\"sample.tone\"\n      :label=\"sample.label\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ntype Glyph = '★';\ninterface LegacySample {\n  key: string;\n  name?: 'star';\n  glyph: Glyph;\n  tone?: 'brand';\n  label: string;\n}\n\nexport default Vue.extend({\n  components: { KoleIcon },\n  data(): { legacy: ReadonlyArray<LegacySample> } {\n    return {\n      legacy: [\n        { key: 'glyph-only', glyph: '★', label: '收藏' },\n        { key: 'name-wins', name: 'star', glyph: '★', tone: 'brand', label: '收藏（name 生效）' },\n      ],\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Icon.html:289 fill('row-compat', ...) 的两个实参：{ icon:'★', label:'收藏' } 与 { name:'star', icon:'★', tone:'brand', label:'收藏（name 生效）' }"
   ]
  }
 ]
}