53 lines
853 B
Svelte
53 lines
853 B
Svelte
<script lang="ts">
|
|
import Icon from "@iconify/svelte";
|
|
|
|
let {
|
|
name,
|
|
label,
|
|
size = "md",
|
|
}: {
|
|
name?: string;
|
|
label?: string;
|
|
size?: "sm" | "md" | "lg";
|
|
} = $props();
|
|
</script>
|
|
|
|
<span
|
|
class="icon-glyph"
|
|
data-size={size}
|
|
data-icon-name={name}
|
|
aria-label={label}
|
|
aria-hidden={label ? undefined : "true"}
|
|
>
|
|
{#if name}
|
|
<Icon icon={name} />
|
|
{/if}
|
|
</span>
|
|
|
|
<style>
|
|
.icon-glyph {
|
|
display: inline-grid;
|
|
width: 2.35rem;
|
|
height: 2.35rem;
|
|
place-items: center;
|
|
border: var(--ui-border);
|
|
background: #050605;
|
|
color: currentColor;
|
|
line-height: 1;
|
|
}
|
|
|
|
.icon-glyph :global(svg) {
|
|
width: 1.35rem;
|
|
height: 1.35rem;
|
|
}
|
|
|
|
.icon-glyph[data-size="sm"] {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
}
|
|
|
|
.icon-glyph[data-size="lg"] {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
</style>
|