feat: build dashboard design system

src/lib/ui/components/IconGlyph.svelte

@@ -0,0 +1,53 @@
+<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>