{"slug":"icon","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":"api-derived","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<KoleIcon />","vue3":"<template>\n  <KoleIcon />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleIcon />\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\nexport default { components: { KoleIcon } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"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":"api-derived","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<KoleIcon />","vue3":"<template>\n  <KoleIcon />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleIcon />\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\nexport default { components: { KoleIcon } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"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":"api-derived","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<KoleIcon />","vue3":"<template>\n  <KoleIcon />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleIcon />\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\nexport default { components: { KoleIcon } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"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":"api-derived","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<KoleIcon />","vue3":"<template>\n  <KoleIcon />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleIcon />\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\nexport default { components: { KoleIcon } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"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":"api-derived","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<KoleIcon />","vue3":"<template>\n  <KoleIcon />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleIcon />\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\nexport default { components: { KoleIcon } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"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":"api-derived","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<KoleIcon />","vue3":"<template>\n  <KoleIcon />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleIcon />\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\nexport default { components: { KoleIcon } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"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":"api-derived","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<KoleIcon />","vue3":"<template>\n  <KoleIcon />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleIcon />\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\nexport default { components: { KoleIcon } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}