组件
图标 Icon
Icon：图标容器。用一个标准盒子让 inline svg 保持光学尺寸，并继承文字颜色；图标本身不携带颜色和尺寸。可以通过 `name` 从注册表取图标，也可以传入自定义图标。
#基础用法
The stroke falls where the light leaves it and the line goes on.
<script setup lang="ts">
import { Icon } from "@bysages/vue";
</script>
<template>
<p class="m-0">
The stroke falls where the light leaves it
<Icon label="Ink drop">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2.5c3.5 4.4 6.5 8.2 6.5 11.4a6.5 6.5 0 1 1-13 0C5.5 10.7 8.5 6.9 12 2.5Z" />
</svg>
</Icon>
and the line goes on.
</p>
</template>
Moonlight fills the vessel and the page keeps still.
<script setup lang="ts">
import { Icon } from "@bysages/vue";
</script>
<template>
<!-- `inherit` takes its measure from the type it sits in. -->
<h2 class="m-0 font-serif text-xl">
Moonlight fills the vessel
<Icon label="Ink drop">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2.5c3.5 4.4 6.5 8.2 6.5 11.4a6.5 6.5 0 1 1-13 0C5.5 10.7 8.5 6.9 12 2.5Z" />
</svg>
</Icon>
and the page keeps still.
</h2>
</template>
<script setup lang="ts">
import { Icon } from "@bysages/vue";
</script>
<template>
<p class="m-0 flex items-center gap-4">
<Icon size="sm" label="Small drop">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2.5c3.5 4.4 6.5 8.2 6.5 11.4a6.5 6.5 0 1 1-13 0C5.5 10.7 8.5 6.9 12 2.5Z" />
</svg>
</Icon>
<Icon size="md" label="Medium drop">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2.5c3.5 4.4 6.5 8.2 6.5 11.4a6.5 6.5 0 1 1-13 0C5.5 10.7 8.5 6.9 12 2.5Z" />
</svg>
</Icon>
<Icon size="lg" label="Large drop">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2.5c3.5 4.4 6.5 8.2 6.5 11.4a6.5 6.5 0 1 1-13 0C5.5 10.7 8.5 6.9 12 2.5Z" />
</svg>
</Icon>
</p>
</template>
#属性
#Icon
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
size | String | "inherit" | 尺寸档位随周围字号变化；默认为 inherit，即图标所在文本的 1em |
label | String | undefined | 无障碍名称；未设置时图标仅用于呈现，并从无障碍树中隐藏 |
glyph | Object | undefined | A glyph from the registry, imported directly. Ignored when a default slot is given — an explicit glyph always wins. |
name | String | undefined | 图标库中的字形；提供默认插槽时忽略该属性，插槽内容优先于图标库 |