react#SVGAttributes TypeScript Examples

export function Icon(props: SVGAttributes<SVGElement>) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="var(--text)"
      role="img"
      {...props}
    />
  )
}

export function DiscordIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Discord logo" {...props}>
      <path
        fillRule="evenodd"
        d="M20.32 4.66C18.79 3.95 17.15 3.44 15.43 3.14C15.4 3.13 15.37 3.15 15.35 3.18C15.14 3.55 14.91 4.04 14.75 4.43C12.9 4.15 11.07 4.15 9.26 4.43C9.09 4.03 8.85 3.55 8.64 3.18C8.62 3.15 8.59 3.14 8.56 3.14C6.85 3.44 5.21 3.95 3.68 4.66C3.66 4.66 3.65 4.67 3.64 4.68C0.53 9.33 -0.32 13.87 0.1 18.34C0.1 18.37 0.11 18.39 0.13 18.4C2.18 19.91 4.17 20.82 6.12 21.43C6.15 21.44 6.19 21.43 6.21 21.4C6.67 20.77 7.08 20.11 7.43 19.41C7.45 19.37 7.43 19.32 7.39 19.3C6.74 19.05 6.12 18.75 5.52 18.41C5.47 18.38 5.47 18.31 5.51 18.28C5.64 18.19 5.76 18.09 5.88 17.99C5.91 17.97 5.94 17.97 5.96 17.98C9.89 19.77 14.14 19.77 18.02 17.98C18.05 17.97 18.08 17.97 18.1 17.99C18.22 18.09 18.35 18.19 18.47 18.28C18.52 18.31 18.51 18.38 18.47 18.41C17.87 18.76 17.25 19.05 16.59 19.3C16.55 19.32 16.53 19.37 16.55 19.41C16.91 20.11 17.33 20.77 17.78 21.4C17.8 21.43 17.83 21.44 17.86 21.43C19.82 20.82 21.81 19.91 23.87 18.4C23.88 18.39 23.89 18.37 23.9 18.34C24.4 13.17 23.06 8.67 20.35 4.68C20.34 4.67 20.33 4.66 20.32 4.66ZM8.02 15.62C6.84 15.62 5.86 14.53 5.86 13.2C5.86 11.86 6.82 10.78 8.02 10.78C9.23 10.78 10.2 11.87 10.18 13.2C10.18 14.53 9.22 15.62 8.02 15.62ZM15.99 15.62C14.81 15.62 13.84 14.53 13.84 13.2C13.84 11.86 14.79 10.78 15.99 10.78C17.21 10.78 18.17 11.87 18.15 13.2C18.15 14.53 17.21 15.62 15.99 15.62Z"
      />
    </Icon>
  )
}

static create<P extends SVGAttributes<T>, T extends SVGElement>(
    type: keyof ReactSVG,
    props?: { key: Key } & ClassAttributes<T> & P,
    ...children: ReactNode[]
  ): ReactSVGElement

export function SunIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Sun icon" {...props}>
      <path
        fillRule="evenodd"
        d="M14.87 4.11L12 0L9.13 4.11L4.29 2.81L4.73 7.8L0.18 9.92L3.73 13.46L1.61 18L6.6 18.43L7.9 23.28L12 20.4L16.1 23.28L17.4 18.43L22.39 18L20.27 13.46L23.82 9.92L19.27 7.8L19.71 2.81L14.87 4.11ZM16 12C16 14.21 14.21 16 12 16C9.79 16 8 14.21 8 12C8 9.79 9.79 8 12 8C14.21 8 16 9.79 16 12ZM18 12C18 15.31 15.31 18 12 18C8.69 18 6 15.31 6 12C6 8.69 8.69 6 12 6C15.31 6 18 8.69 18 12Z"
      />
    </Icon>
  )
}

export function MediumIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Medium logo" {...props}>
      <path
        fillRule="evenodd"
        d="M2.846 6.887c.03-.295-.083-.586-.303-.784l-2.24-2.7v-.403h6.958l5.378 11.795 4.728-11.795h6.633v.403l-1.916 1.837c-.165.126-.247.333-.213.538v13.498c-.034.204.048.411.213.537l1.871 1.837v.403h-9.412v-.403l1.939-1.882c.19-.19.19-.246.19-.537v-10.91l-5.389 13.688h-.728l-6.275-13.688v9.174c-.052.385.076.774.347 1.052l2.521 3.058v.404h-7.148v-.404l2.521-3.058c.27-.279.39-.67.325-1.052v-10.608z"
      />
    </Icon>
  )
}

export function OptimismIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon
      aria-label="Optimism badge icon"
      {...props}
      className={cx('OptimismIcon', props.className)}
    >
      <rect y="3" width="24" height="18" fill="#FF0420" />
      <path
        d="M6.646 17.4965C5.93799 17.4818 5.31299 17.3158 4.771 16.9984C4.23389 16.6761 3.80664 16.2147 3.48926 15.6141C3.17676 15.0087 2.99609 14.3153 2.94727 13.5341C2.89355 12.7333 2.979 11.8788 3.20361 10.9706C3.42822 10.0624 3.78955 9.26404 4.2876 8.57556C4.78564 7.88708 5.36914 7.37195 6.03809 7.03015C6.71191 6.68835 7.43945 6.52478 8.2207 6.53943C8.93848 6.55408 9.56592 6.72498 10.103 7.05212C10.6401 7.37439 11.0625 7.8407 11.3701 8.45105C11.6777 9.05652 11.8535 9.745 11.8975 10.5165C11.9463 11.3759 11.8535 12.2596 11.6191 13.1678C11.3848 14.076 11.021 14.8622 10.5278 15.5262C10.0347 16.1903 9.45605 16.6884 8.79199 17.0204C8.13281 17.3524 7.41748 17.5111 6.646 17.4965ZM9.68555 11.725L9.74414 11.0292C9.79297 10.16 9.67578 9.50085 9.39258 9.05164C9.11426 8.60242 8.68945 8.36804 8.11816 8.34851C7.22461 8.31921 6.51416 8.71472 5.98682 9.53503C5.46436 10.3553 5.16895 11.5028 5.10059 12.9774C5.05176 13.8417 5.1665 14.5082 5.44482 14.9769C5.72314 15.4408 6.15527 15.6825 6.74121 15.702C7.50781 15.7362 8.14258 15.4384 8.64551 14.8085C9.14844 14.1737 9.47803 13.2777 9.63428 12.1205L9.68555 11.725ZM15.2886 13.5927L14.6294 17.35H12.4834L14.3364 6.68591L18.0718 6.69324C19.2241 6.69324 20.1299 7.01306 20.7891 7.65271C21.4482 8.29236 21.7363 9.12732 21.6533 10.1576C21.5752 11.2025 21.1382 12.0375 20.3423 12.6625C19.5513 13.2875 18.5405 13.6 17.3101 13.6L15.2886 13.5927ZM15.5889 11.8129L17.376 11.8275C17.9521 11.8275 18.4307 11.6786 18.8115 11.3807C19.1924 11.0829 19.4194 10.6801 19.4927 10.1722C19.5659 9.66443 19.4829 9.25916 19.2437 8.95642C19.0093 8.65369 18.6602 8.49255 18.1963 8.47302L16.1748 8.4657L15.5889 11.8129Z"
        fill="white"
      />
    </Icon>
  )
}

export function StarkWareIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon
      aria-label="StarkWare logo"
      {...props}
      className={cx('StarkWareIcon', props.className)}
    >
      <path d="M11.98 13.53L9.86 15.65C9.86 15.66 9.85 15.66 9.85 15.66C9.85 15.66 9.84 15.66 9.83 15.66C9.82 15.66 9.80 15.65 9.80 15.63C9.80 15.63 9.80 15.62 9.80 15.62C9.80 15.62 9.80 15.62 9.80 15.62L10.61 12.61C10.68 12.39 10.63 12.15 10.46 11.98L8.34 9.86C8.33 9.86 8.33 9.85 8.33 9.85C8.33 9.85 8.33 9.84 8.33 9.83C8.33 9.82 8.34 9.80 8.36 9.80C8.36 9.80 8.37 9.80 8.37 9.80C8.37 9.80 8.37 9.80 8.37 9.80L11.38 10.61C11.60 10.68 11.84 10.63 12.01 10.46L14.13 8.34C14.13 8.33 14.14 8.33 14.14 8.33C14.14 8.33 14.15 8.33 14.16 8.33C14.17 8.33 14.19 8.34 14.19 8.36C14.19 8.36 14.19 8.37 14.19 8.37C14.19 8.37 14.19 8.37 14.19 8.37L13.38 11.38C13.31 11.60 13.36 11.84 13.53 12.01L15.65 14.13C15.66 14.13 15.66 14.14 15.66 14.14C15.66 14.14 15.66 14.15 15.66 14.16C15.66 14.17 15.65 14.19 15.63 14.19C15.63 14.19 15.62 14.19 15.62 14.19L15.62 14.19L12.61 13.38C12.39 13.31 12.15 13.36 11.98 13.53ZM23.90 11.77L18.84 6.71C18.67 6.54 18.42 6.49 18.21 6.56L14.87 7.45C14.87 7.45 14.87 7.45 14.87 7.45C14.87 7.45 14.87 7.45 14.86 7.45C14.84 7.45 14.83 7.43 14.83 7.42C14.83 7.40 14.84 7.39 14.85 7.39H14.84C15.21 7.15 15.76 6.71 17.08 5.39C17.20 5.27 17.20 5.07 17.08 4.95L12.22 0.09C12.09 -0.03 11.90 -0.03 11.77 0.09L6.71 5.15C6.54 5.32 6.49 5.57 6.55 5.78L7.45 9.12C7.45 9.12 7.45 9.12 7.45 9.12C7.45 9.12 7.45 9.12 7.45 9.13C7.45 9.15 7.43 9.16 7.42 9.16C7.40 9.16 7.39 9.15 7.39 9.14C7.39 9.14 7.39 9.14 7.39 9.14C7.15 8.78 6.71 8.23 5.39 6.91C5.27 6.79 5.07 6.79 4.95 6.91L0.09 11.77C-0.03 11.90 -0.03 12.09 0.09 12.22L5.15 17.28C5.32 17.45 5.57 17.50 5.78 17.43L9.12 16.54C9.12 16.54 9.12 16.54 9.12 16.54C9.12 16.54 9.12 16.54 9.13 16.54C9.14 16.54 9.16 16.56 9.16 16.57C9.16 16.59 9.15 16.60 9.14 16.60H9.14C8.78 16.84 8.23 17.28 6.91 18.60C6.79 18.72 6.79 18.92 6.91 19.04L11.77 23.90C11.90 24.03 12.09 24.03 12.22 23.90L17.28 18.84C17.45 18.67 17.50 18.42 17.43 18.21L16.54 14.87C16.54 14.87 16.54 14.87 16.54 14.87C16.54 14.87 16.54 14.87 16.54 14.86C16.54 14.85 16.56 14.83 16.57 14.83C16.59 14.83 16.60 14.84 16.60 14.85C16.60 14.85 16.60 14.85 16.60 14.85C16.84 15.21 17.28 15.76 18.60 17.08C18.72 17.20 18.92 17.20 19.04 17.08L23.90 12.22C24.03 12.09 24.03 11.90 23.90 11.77Z" />
    </Icon>
  )
}

export function TelegramIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Telegram logo" {...props}>
      <path
        fillRule="evenodd"
        d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"
      />
    </Icon>
  )
}

export function MoonIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Moon icon" {...props}>
      <path
        fillRule="evenodd"
        d="M22.2 6.82C20.96 5.69 19.31 5 17.5 5C13.63 5 10.5 8.13 10.5 12C10.5 15.87 13.63 19 17.5 19C19.31 19 20.96 18.31 22.2 17.18C20.35 20.65 16.7 23 12.5 23C6.42 23 1.5 18.08 1.5 12C1.5 5.92 6.42 1 12.5 1C16.7 1 20.35 3.35 22.2 6.82Z"
      />
    </Icon>
  )
}

export function FinanceIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Finance icon" {...props}>
      <path d="M3 14V11L9 6.00001L14 8.00001L18.2739 4.33667L19.7312 6.08754L14 11L9 9.00001L3 14Z" />
      <path d="M3 15H6V22H3V15Z" />
      <path d="M8 12H11V22H8V12Z" />
      <rect x="13" y="13" width="3" height="9" />
      <path d="M18 9H21V22H18V9Z" />
      <path d="M16 3H21V8L16 3Z" />
    </Icon>
  )
}

export function WarningIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Warning icon" {...props}>
      <path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
    </Icon>
  )
}

export function ShieldWarnIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Shield with an exclamation mark icon" {...props}>
      <path d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M13,16h-2v-2h2V16z M13,12h-2V7h2V12z" />
    </Icon>
  )
}

export function ShieldGoodIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Shield with a tick icon" {...props}>
      <path d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M10.94,15.54L7.4,12l1.41-1.41l2.12,2.12 l4.24-4.24l1.41,1.41L10.94,15.54z" />
    </Icon>
  )
}

export function ShieldBadIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Shield with an X icon" {...props}>
      <path d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M15.5,14.09l-1.41,1.41L12,13.42L9.91,15.5 L8.5,14.09L10.59,12L8.5,9.91L9.91,8.5L12,10.59l2.09-2.09l1.41,1.41L13.42,12L15.5,14.09z" />
    </Icon>
  )
}

export function LinkIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Outgoing link icon" {...props}>
      <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
    </Icon>
  )
}

export function InfoIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Info icon" {...props}>
      <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
    </Icon>
  )
}

export function GlobeIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Globe icon" {...props}>
      <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z" />
    </Icon>
  )
}

export function YouTubeIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="YouTube logo" {...props}>
      <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" />
    </Icon>
  )
}

export function TwitterIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Twitter logo" {...props}>
      <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
    </Icon>
  )
}

export function RedditIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Reddit logo" {...props}>
      <path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z" />
    </Icon>
  )
}

export function LinkedInIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="LinkedIn logo" {...props}>
      <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
    </Icon>
  )
}

export function InstagramIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Instagram logo" {...props}>
      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
    </Icon>
  )
}

export function GithubIcon(props: SVGAttributes<SVGElement>) {
  return (
    <Icon aria-label="Github logo" {...props}>
      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
    </Icon>
  )
}