Components
Icon
The inkwell: a standard box that keeps any inline svg at its optical measure and in the text's own ink — the icon carries no pigment and no size of its own. Bring a glyph through `glyph` (a direct registry import), through `name` from the whitelisted registry, or bring your own; the well renders either.
#Basic usage
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>
#Props
#Icon
| Prop | Type | Default | Description |
|---|---|---|---|
size | String | "inherit" | Size steps follow the surrounding font size; inherit is the default — one em of the text the icon sits in. |
label | String | undefined | The accessible name. Without it the icon is presentation-only and hidden from the accessibility tree. |
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 | A registry name — only the whitelisted set the wrappers draw themselves. Ignored when glyph or a default slot is given. |