Icon.astro

---
interface Props {
  name: string;
  size?: number;
  class?: string;
}
const { name, size = 22, class: className } = Astro.props;
const paths: Record<string, string> = {
  telegram: 'm22 3-4 18-6-5-4 4v-7L2 10 22 3ZM8 13 22 3M12 16l5-9',
  github:
    'M9 19c-4.3 1.3-4.3-2.2-6-2.7M15 22v-3.9a3.4 3.4 0 0 0-.9-2.6c3-.3 6.2-1.5 6.2-6.9A5.4 5.4 0 0 0 18.8 5a5 5 0 0 0-.1-3.6S17.5 1 14.8 2.8a13.4 13.4 0 0 0-7 0C5.1 1 3.9 1.4 3.9 1.4A5 5 0 0 0 3.8 5a5.4 5.4 0 0 0-1.5 3.7c0 5.4 3.2 6.6 6.2 6.9a3.4 3.4 0 0 0-.9 2.6V22',
  mail: 'M3 5h18v14H3V5Zm0 0 9 8 9-8',
  code: 'm8 6-6 6 6 6m8-12 6 6-6 6m-3-15-2 18',
  community:
    'M16 21v-3a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v3m20 0v-3a4 4 0 0 0-3-3.9M9 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8-7.8a4 4 0 0 1 0 7.6',
  arrow: 'M4 12h16m-6-6 6 6-6 6',
  northeast: 'M6 18 18 6M6 6h12v12',
  sun: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0-6v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5',
  moon: 'M21 13a9 9 0 1 1-10-10 7 7 0 0 0 10 10Z',
  pause: 'M8 5v14M16 5v14',
  play: 'm8 4 12 8-12 8V4Z',
  menu: 'M4 7h16M4 12h16M4 17h16',
  close: 'm6 6 12 12M6 18 18 6',
  sparkle: 'm12 2 2.7 7.3L22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7L12 2Z',
  chevron: 'm6 9 6 6 6-6',
  check: 'm4 12 5 5L20 6',
};
---

<svg
  class={className}
  width={size}
  height={size}
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="1.7"
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-hidden="true"
  focusable="false"
>
  <path d={paths[name] || paths.sparkle} />
</svg>