AcademicCap.svelte for Svelte 5

AcademicCap.svelte

<script lang="ts">
  interface CtxType {
    size: string;
    role?: string;
    color?: string;
    variation?: 'solid' | 'outline';
    viewBox?: string;
  }
  interface Props {
    size?: string;
    role?: string;
    color?: string;
    ariaLabel?: string;
    variation?: 'solid' | 'outline';
    viewBox?: string;
  }

  import { getContext } from 'svelte';
  const ctx: CtxType = getContext('iconCtx') ?? {};
  let {size = ctx.size || "24", role = ctx.role || 'img', ariaLabel = 'academic cap', viewBox = ctx.viewBox || '0 0 24 24', color = ctx.color || 'currentColor', variation = ctx.variation || 'outline', ...attributes}: Props  = $props();
</script>

<svg
  xmlns="http://www.w3.org/2000/svg"
  width={size}
  height={size}
  {...attributes}
  {role}
  aria-label={ariaLabel}
  fill="none"
  {viewBox}
  stroke-width="2"
>
  {#if variation === 'outline'}
    <path
      d="M4.25933 10.1468C3.98688 12.2308 3.82139 14.3485 3.76853 16.4941C6.66451 17.7032 9.41893 19.1836 12 20.9037C14.5811 19.1836 17.3355 17.7032 20.2315 16.4941C20.1786 14.3485 20.0131 12.2308 19.7407 10.1468M4.25933 10.1468C3.38362 9.85242 2.49729 9.5812 1.60107 9.33382C4.84646 7.05899 8.32741 5.09732 12 3.49268C15.6727 5.09732 19.1536 7.059 22.399 9.33383C21.5028 9.58122 20.6164 9.85245 19.7407 10.1468M4.25933 10.1468C6.94656 11.05 9.5338 12.171 12.0001 13.4888C14.4663 12.171 17.0535 11.0501 19.7407 10.1468M6.75 15.0001C7.16421 15.0001 7.5 14.6643 7.5 14.2501C7.5 13.8359 7.16421 13.5001 6.75 13.5001C6.33579 13.5001 6 13.8359 6 14.2501C6 14.6643 6.33579 15.0001 6.75 15.0001ZM6.75 15.0001V11.3246C8.44147 10.2736 10.1936 9.31107 12 8.44342M4.99264 19.9928C6.16421 18.8212 6.75 17.2857 6.75 15.7501V14.2501"
      stroke={color}
      stroke-width="1.5"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  {:else}
    <path
      d="M11.6998 2.80541C11.8912 2.72176 12.1089 2.72176 12.3003 2.80541C16.0192 4.43023 19.5437 6.41649 22.8295 8.71968C23.0673 8.88636 23.1875 9.17532 23.1381 9.46147C23.0887 9.74762 22.8785 9.97953 22.5986 10.0568C21.9137 10.2459 21.2347 10.4495 20.5618 10.6665C17.8307 11.5473 15.2018 12.6555 12.6972 13.9689L12.6939 13.9706C12.5803 14.0302 12.467 14.0902 12.354 14.1506C12.1331 14.2686 11.8679 14.2686 11.6471 14.1506C11.533 14.0896 11.4186 14.029 11.3039 13.9689C10.0655 13.3195 8.79658 12.7202 7.5 12.1738V11.9501C7.5 11.8187 7.56742 11.7022 7.67173 11.639C9.17685 10.7271 10.7294 9.88577 12.3247 9.11948C12.6981 8.94014 12.8554 8.49207 12.6761 8.1187C12.4967 7.74532 12.0486 7.58803 11.6753 7.76737C10.036 8.55475 8.44086 9.41921 6.89449 10.356C6.44111 10.6307 6.13632 11.0803 6.03607 11.5839C5.18115 11.255 4.31499 10.9487 3.43829 10.666C2.76546 10.449 2.08644 10.2458 1.40154 10.0568C1.12162 9.97952 0.911461 9.74761 0.86204 9.46146C0.812619 9.17531 0.932824 8.88634 1.17061 8.71967C4.45645 6.41648 7.98097 4.43023 11.6998 2.80541Z"
      fill={color}
    />
    <path
      d="M13.0609 15.4735C15.4997 14.1704 18.0621 13.0688 20.7258 12.1907C20.8601 13.6055 20.9458 15.0344 20.9813 16.4756C20.9889 16.7848 20.8059 17.067 20.5205 17.1862C17.6693 18.3765 14.9574 19.8342 12.4159 21.5278C12.1641 21.6957 11.836 21.6957 11.5841 21.5278C9.04267 19.8342 6.33073 18.3765 3.4796 17.1862C3.19416 17.067 3.01116 16.7848 3.01878 16.4756C3.05429 15.0343 3.14001 13.6053 3.27427 12.1904C4.19527 12.494 5.10415 12.8243 6 13.1804V14.4508C5.55165 14.7102 5.25 15.1949 5.25 15.7501C5.25 16.2454 5.49008 16.6847 5.86022 16.9578C5.7707 17.3385 5.63822 17.7109 5.46277 18.0676C5.91546 18.2813 6.36429 18.5018 6.8091 18.7291C7.06243 18.2138 7.24612 17.673 7.36014 17.1208C7.88449 16.8871 8.25 16.3613 8.25 15.7501C8.25 15.1949 7.94835 14.7102 7.5 14.4508V13.806C8.6714 14.3178 9.81885 14.8744 10.9402 15.4735C11.6028 15.8276 12.3983 15.8276 13.0609 15.4735Z"
      fill={color}
    />
    <path
      d="M4.46222 19.4624C4.88136 19.0433 5.21502 18.5712 5.46277 18.0676C5.91546 18.2813 6.36429 18.5018 6.8091 18.7291C6.49055 19.3769 6.06164 19.9843 5.52288 20.5231C5.22999 20.816 4.75512 20.816 4.46222 20.5231C4.16933 20.2302 4.16933 19.7553 4.46222 19.4624Z"
      fill={color}
    />
  {/if}
</svg>