Initial Commit

src/components/Icon.astro

@@ -0,0 +1,47 @@
+---
+/**
+ * Icon.astro
+ * ---------------------------------------------------------------------------
+ * Inline mdi (Material Design Icons) renderer. Pulls icon path data at build
+ * time from `@iconify-json/mdi/icons.json` and emits a single inline <svg>, so
+ * there is no runtime icon library and no extra requests. The svg inherits
+ * `currentColor`, so color is controlled via text-* utilities or inline style.
+ *
+ * The spec calls for mdi icons everywhere instead of emojis; all spec emoji
+ * references are mapped to mdi names at the call sites.
+ *
+ * Usage:  <Icon name="briefcase" class="h-6 w-6" />
+ */
+import mdi from '@iconify-json/mdi/icons.json';
+
+interface Props {
+  /** mdi icon name WITHOUT prefix, e.g. "briefcase". */
+  name: string;
+  /** Accessible label. Set when the icon conveys meaning alone (not decorative). */
+  title?: string;
+  class?: string;
+  /** Override default 1em sizing (rarely needed; prefer class utilities). */
+  size?: number | string;
+  style?: string;
+}
+
+const { name, title, class: className, size, style } = Astro.props;
+
+const icon = (mdi as { icons: Record<string, { body: string }> }).icons[name];
+if (!icon) {
+  // Surface missing-icon names during dev so typos are caught immediately.
+  console.warn(`[Icon] unknown mdi icon: "${name}"`);
+}
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size ?? '1em'}
+  height={size ?? '1em'}
+  viewBox="0 0 24 24"
+  class={className}
+  style={style}
+  aria-hidden={title ? undefined : 'true'}
+  role={title ? 'img' : undefined}
+  set:html={(title ? `<title>${title}</title>` : '') + (icon?.body ?? '')}
+/>