From 3eb8ddcbc4357010471efbc10efb697faed8a553 Mon Sep 17 00:00:00 2001
From: javayhu <javayhu@gmail.com>
Date: Fri, 21 Feb 2025 00:59:37 +0800
Subject: [PATCH] feat: add icon components

---
 src/components/icons/authjs.tsx       |  17 ++++
 src/components/icons/bluesky.tsx      |  23 +++++
 src/components/icons/github.tsx       |  23 +++++
 src/components/icons/google.tsx       |  23 +++++
 src/components/icons/icons.tsx        | 135 ++++++++++++++++++++++++++
 src/components/icons/nextjs.tsx       |  78 +++++++++++++++
 src/components/icons/product-hunt.tsx |  40 ++++++++
 src/components/icons/resend.tsx       |  23 +++++
 src/components/icons/sanity.tsx       |  23 +++++
 src/components/icons/shadcnui.tsx     |  23 +++++
 src/components/icons/stripe.tsx       |  23 +++++
 src/components/icons/tailwindcss.tsx  |  23 +++++
 src/components/icons/twitter.tsx      |  23 +++++
 src/components/icons/vercel.tsx       |  20 ++++
 src/components/icons/youtube.tsx      |  23 +++++
 15 files changed, 520 insertions(+)
 create mode 100644 src/components/icons/authjs.tsx
 create mode 100644 src/components/icons/bluesky.tsx
 create mode 100644 src/components/icons/github.tsx
 create mode 100644 src/components/icons/google.tsx
 create mode 100644 src/components/icons/icons.tsx
 create mode 100644 src/components/icons/nextjs.tsx
 create mode 100644 src/components/icons/product-hunt.tsx
 create mode 100644 src/components/icons/resend.tsx
 create mode 100644 src/components/icons/sanity.tsx
 create mode 100644 src/components/icons/shadcnui.tsx
 create mode 100644 src/components/icons/stripe.tsx
 create mode 100644 src/components/icons/tailwindcss.tsx
 create mode 100644 src/components/icons/twitter.tsx
 create mode 100644 src/components/icons/vercel.tsx
 create mode 100644 src/components/icons/youtube.tsx

diff --git a/src/components/icons/authjs.tsx b/src/components/icons/authjs.tsx
new file mode 100644
index 0000000..39c9259
--- /dev/null
+++ b/src/components/icons/authjs.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+
+const AuthJSIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    stroke="currentColor"
+    strokeWidth="1"
+    className="size-[34px]"
+  >
+    <title>Auth.js</title>
+    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+  </svg>
+);
+
+export default AuthJSIcon;
diff --git a/src/components/icons/bluesky.tsx b/src/components/icons/bluesky.tsx
new file mode 100644
index 0000000..3daf02d
--- /dev/null
+++ b/src/components/icons/bluesky.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+/**
+ * https://icon-sets.iconify.design/fa6-brands/bluesky/
+ */
+export function Fa6BrandsBluesky(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={512}
+      height={512}
+      viewBox="0 0 512 512"
+      {...props}
+    >
+      <title>Bluesky</title>
+      <path
+        fill="currentColor"
+        d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2c-18.2 64.8-84.4 81.4-143.3 71.3C456 322 482.2 380 425.6 438c-107.4 110.2-154.3-27.6-166.3-62.9c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/github.tsx b/src/components/icons/github.tsx
new file mode 100644
index 0000000..f080443
--- /dev/null
+++ b/src/components/icons/github.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+/**
+ * https://icon-sets.iconify.design/fa6-brands/github/
+ */
+export function FaBrandsGitHub(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={46.5}
+      height={48}
+      viewBox="0 0 496 512"
+      {...props}
+    >
+      <title>GitHub</title>
+      <path
+        fill="currentColor"
+        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/google.tsx b/src/components/icons/google.tsx
new file mode 100644
index 0000000..04e58a5
--- /dev/null
+++ b/src/components/icons/google.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+/**
+ * https://icon-sets.iconify.design/fa6-brands/google/
+ */
+export function FaBrandsGoogle(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={45.75}
+      height={48}
+      viewBox="0 0 488 512"
+      {...props}
+    >
+      <title>Google</title>
+      <path
+        fill="currentColor"
+        d="M488 261.8C488 403.3 391.1 504 248 504C110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6c98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/icons.tsx b/src/components/icons/icons.tsx
new file mode 100644
index 0000000..67f4968
--- /dev/null
+++ b/src/components/icons/icons.tsx
@@ -0,0 +1,135 @@
+import {
+  ArrowRightIcon,
+  BadgeDollarSignIcon,
+  BookOpenIcon,
+  ChartLineIcon,
+  ChartNoAxesCombinedIcon,
+  CircleDollarSignIcon,
+  CircleUserRoundIcon,
+  ComponentIcon,
+  CreditCardIcon,
+  DatabaseIcon,
+  EyeIcon,
+  FileTextIcon,
+  FilterIcon,
+  GiftIcon,
+  GithubIcon,
+  GlobeIcon,
+  GridIcon,
+  HomeIcon,
+  ImageIcon,
+  LayoutDashboardIcon,
+  LayoutGridIcon,
+  LayoutPanelLeftIcon,
+  Loader2Icon,
+  type LucideIcon,
+  MailCheckIcon,
+  MailIcon,
+  MailboxIcon,
+  MapIcon,
+  NewspaperIcon,
+  NotebookPenIcon,
+  PaletteIcon,
+  RocketIcon,
+  SearchIcon,
+  SettingsIcon,
+  ShieldCheckIcon,
+  SmartphoneIcon,
+  SmileIcon,
+  SquareChartGanttIcon,
+  TagsIcon,
+  UploadIcon,
+  VideoIcon,
+  WandSparklesIcon,
+  WorkflowIcon,
+  WrenchIcon
+} from "lucide-react";
+import { FaBrandsGitHub } from "../icons/github";
+import { FaBrandsGoogle } from "../icons/google";
+import { LogosProductHunt } from "../icons/product-hunt";
+import { FaBrandsXTwitter } from "../icons/twitter";
+import AuthJSIcon from "./authjs";
+import { Fa6BrandsBluesky } from "./bluesky";
+import { NextjsIcon } from "./nextjs";
+import { SimpleIconsResend } from "./resend";
+import { SimpleIconsSanity } from "./sanity";
+import { SimpleIconsShadcnui } from "./shadcnui";
+import { SimpleIconsStripe } from "./stripe";
+import { SimpleIconsTailwindcss } from "./tailwindcss";
+import { SimpleIconsVercel } from "./vercel";
+import { IonLogoYoutube } from "./youtube";
+
+export type Icon = LucideIcon;
+
+/**
+ * 1. Lucide Icons
+ * https://lucide.dev/icons/
+ *
+ * 2. Radix Icons
+ * https://www.radix-ui.com/icons
+ */
+export const Icons = {
+  spinner: Loader2Icon,
+
+  // used by name
+  arrowRight: ArrowRightIcon,
+  search: SearchIcon,
+  category: LayoutGridIcon,
+  tag: TagsIcon,
+  blog: FileTextIcon,
+  features: WandSparklesIcon,
+  pricing: CreditCardIcon,
+  demo: RocketIcon,
+  showcase: LayoutGridIcon,
+  docs: BookOpenIcon,
+  globe: GlobeIcon,
+  home: HomeIcon,
+  dashboard: LayoutDashboardIcon,
+  submit: UploadIcon,
+  settings: SettingsIcon,
+  email: MailIcon,
+  layout: LayoutPanelLeftIcon,
+  component: ComponentIcon,
+  grid: GridIcon,
+  eye: EyeIcon,
+  rocket: RocketIcon,
+  image: ImageIcon,
+  smartphone: SmartphoneIcon,
+  palette: PaletteIcon,
+  chartLine: ChartLineIcon,
+  gift: GiftIcon,
+  user: CircleUserRoundIcon,
+  chartNoAxes: ChartNoAxesCombinedIcon,
+
+  map: MapIcon,
+  video: VideoIcon,
+  notebook: NotebookPenIcon,
+  mailcheck: MailCheckIcon,
+  mailbox: MailboxIcon,
+  newspaper: NewspaperIcon,
+  smile: SmileIcon,
+  wrench: WrenchIcon,
+  database: DatabaseIcon,
+  githubLucide: GithubIcon,
+  filter: FilterIcon,
+  money: BadgeDollarSignIcon,
+  sponsor: CircleDollarSignIcon,
+  shieldCheck: ShieldCheckIcon,
+  workflow: WorkflowIcon,
+  squareChartGantt: SquareChartGanttIcon,
+
+  github: FaBrandsGitHub,
+  google: FaBrandsGoogle,
+  twitter: FaBrandsXTwitter,
+  bluesky: Fa6BrandsBluesky,
+  youtube: IonLogoYoutube,
+  productHunt: LogosProductHunt,
+  nextjs: NextjsIcon,
+  authjs: AuthJSIcon,
+  shadcnui: SimpleIconsShadcnui,
+  tailwindcss: SimpleIconsTailwindcss,
+  sanity: SimpleIconsSanity,
+  resend: SimpleIconsResend,
+  stripe: SimpleIconsStripe,
+  vercel: SimpleIconsVercel,
+};
diff --git a/src/components/icons/nextjs.tsx b/src/components/icons/nextjs.tsx
new file mode 100644
index 0000000..7359eb6
--- /dev/null
+++ b/src/components/icons/nextjs.tsx
@@ -0,0 +1,78 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+
+/**
+ * https://svgl.app/
+ */
+export function NextjsIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="1em"
+    height="1em"
+    viewBox="0 0 180 180"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+    >
+      <title>Next.js</title>
+      <mask
+        id="mask0_408_139"
+      style={{
+        maskType: "alpha",
+      }}
+      maskUnits="userSpaceOnUse"
+      x={0}
+      y={0}
+      width={180}
+      height={180}
+    >
+      <circle cx={90} cy={90} r={90} fill="black" />
+    </mask>
+    <g mask="url(#mask0_408_139)">
+      <circle
+        cx={90}
+        cy={90}
+        r={87}
+        fill="black"
+        stroke="white"
+        strokeWidth={6}
+      />
+      <path
+        d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z"
+        fill="url(#paint0_linear_408_139)"
+      />
+      <rect
+        x={115}
+        y={54}
+        width={12}
+        height={72}
+        fill="url(#paint1_linear_408_139)"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_408_139"
+        x1={109}
+        y1={116.5}
+        x2={144.5}
+        y2={160.5}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" />
+        <stop offset={1} stopColor="white" stopOpacity={0} />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_408_139"
+        x1={121}
+        y1={54}
+        x2={120.799}
+        y2={106.875}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" />
+        <stop offset={1} stopColor="white" stopOpacity={0} />
+      </linearGradient>
+    </defs>
+  </svg>
+  );
+}
diff --git a/src/components/icons/product-hunt.tsx b/src/components/icons/product-hunt.tsx
new file mode 100644
index 0000000..f0af05f
--- /dev/null
+++ b/src/components/icons/product-hunt.tsx
@@ -0,0 +1,40 @@
+import type { SVGProps } from "react";
+
+/**
+ * https://icon-sets.iconify.design/logos/producthunt/
+ */
+export function LogosProductHunt(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={48}
+      height={48}
+      viewBox="0 0 256 256"
+      {...props}
+    >
+      <title>Product Hunt</title>
+      <defs>
+        <linearGradient
+          id="logosProducthunt0"
+          x1="50%"
+          x2="50%"
+          y1="0%"
+          y2="100%"
+        >
+          <stop offset="0%" stopColor="#da552f" />
+          <stop offset="100%" stopColor="#d04b25" />
+        </linearGradient>
+      </defs>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="url(#logosProducthunt0)"
+          d="M128 256c70.694 0 128-57.306 128-128S198.694 0 128 0S0 57.306 0 128s57.306 128 128 128"
+        />
+        <path
+          fill="#fff"
+          d="M96 76.8v102.4h19.2v-32h29.056c19.296-.512 34.944-16.16 34.944-35.2c0-19.552-15.648-35.2-34.944-35.2zm48.493 51.2H115.2V96h29.293c8.563 0 15.507 7.168 15.507 16s-6.944 16-15.507 16"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/src/components/icons/resend.tsx b/src/components/icons/resend.tsx
new file mode 100644
index 0000000..7f2cd43
--- /dev/null
+++ b/src/components/icons/resend.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+/**
+ * https://icon-sets.iconify.design/simple-icons/resend/
+ */
+export function SimpleIconsResend(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={48}
+      height={48}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <title>Resend</title>
+      <path
+        fill="currentColor"
+        d="M2.023 0v24h5.553v-8.434h2.998L15.326 24h6.65l-5.372-9.258a7.65 7.65 0 0 0 3.316-3.016q1.063-1.815 1.062-4.08q0-2.194-1.062-3.91q-1.063-1.747-2.95-2.742Q15.12 0 12.823 0Zm5.553 4.87h4.219q1.097 0 1.851.376q.788.378 1.2 1.098q.412.685.412 1.611c0 .926-.126 1.165-.378 1.645q-.343.72-1.03 1.13q-.651.379-1.542.38H7.576Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/sanity.tsx b/src/components/icons/sanity.tsx
new file mode 100644
index 0000000..5d0b2e9
--- /dev/null
+++ b/src/components/icons/sanity.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+/**
+ * https://icon-sets.iconify.design/simple-icons/sanity/
+ */
+export function SimpleIconsSanity(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={48}
+      height={48}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <title>Sanity</title>
+      <path
+        fill="currentColor"
+        d="M7.394 7.31a6 6 0 0 1-.833-.68c-.913-.91-1.38-2.067-1.38-3.568v-.575C6.699.929 9.039 0 11.828 0c5.394 0 8.515 2.8 9.285 6.74H16.22c-.54-1.554-1.89-2.764-4.352-2.764c-2.422 0-4.136 1.276-4.473 3.334h-.002ZM4.683 3.062c0 3.236 2.034 5.162 6.106 6.177l4.316.983c3.854.87 6.2 3.03 6.2 6.55a6.6 6.6 0 0 1-1.436 4.239c0-3.511-1.85-5.409-6.31-6.55l-4.236-.946c-3.393-.76-6.011-2.536-6.011-6.36a6.58 6.58 0 0 1 1.37-4.093ZM17.18 16.484c-.292 2.235-2.092 3.495-4.698 3.495c-2.314 0-4.048-.946-4.703-2.99H2.694C3.518 21.44 7.224 24 12.519 24c2.828 0 5.277-.87 6.85-2.439v-.55c0-1.66-.433-2.876-1.342-3.816a5.5 5.5 0 0 0-.847-.71z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/shadcnui.tsx b/src/components/icons/shadcnui.tsx
new file mode 100644
index 0000000..2a53282
--- /dev/null
+++ b/src/components/icons/shadcnui.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+/**
+ * https://icon-sets.iconify.design/simple-icons/shadcnui/
+ */
+export function SimpleIconsShadcnui(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={48}
+      height={48}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <title>Shadcn UI</title>
+      <path
+        fill="currentColor"
+        d="M22.219 11.784L11.784 22.219a1.045 1.045 0 0 0 1.476 1.476L23.695 13.26a1.045 1.045 0 0 0-1.476-1.476M20.132.305L.305 20.132a1.045 1.045 0 0 0 1.476 1.476L21.608 1.781A1.045 1.045 0 0 0 20.132.305"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/stripe.tsx b/src/components/icons/stripe.tsx
new file mode 100644
index 0000000..7535130
--- /dev/null
+++ b/src/components/icons/stripe.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+/**
+ * https://icon-sets.iconify.design/simple-icons/stripe/
+ */
+export function SimpleIconsStripe(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={48}
+      height={48}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <title>Stripe</title>
+      <path
+        fill="currentColor"
+        d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409c0-.831.683-1.305 1.901-1.305c2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0C9.667 0 7.589.654 6.104 1.872C4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219c2.585.92 3.445 1.574 3.445 2.583c0 .98-.84 1.545-2.354 1.545c-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813c1.664-1.305 2.525-3.236 2.525-5.732c0-4.128-2.524-5.851-6.594-7.305z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/tailwindcss.tsx b/src/components/icons/tailwindcss.tsx
new file mode 100644
index 0000000..876595c
--- /dev/null
+++ b/src/components/icons/tailwindcss.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+/**
+ * https://icon-sets.iconify.design/simple-icons/tailwindcss/
+ */
+export function SimpleIconsTailwindcss(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={48}
+      height={48}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <title>Tailwind CSS</title>
+      <path
+        fill="currentColor"
+        d="M12.001 4.8q-4.8 0-6 4.8q1.8-2.4 4.2-1.8c.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12q4.8 0 6-4.8q-1.8 2.4-4.2 1.8c-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8m-6 7.2q-4.8 0-6 4.8q1.8-2.4 4.2-1.8c.913.228 1.565.89 2.288 1.624c1.177 1.194 2.538 2.576 5.512 2.576q4.8 0 6-4.8q-1.8 2.4-4.2 1.8c-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/twitter.tsx b/src/components/icons/twitter.tsx
new file mode 100644
index 0000000..d9d1fa6
--- /dev/null
+++ b/src/components/icons/twitter.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+/**
+ * https://icon-sets.iconify.design/fa6-brands/x-twitter/
+ */
+export function FaBrandsXTwitter(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={48}
+      height={48}
+      viewBox="0 0 512 512"
+      {...props}
+    >
+      <title>X (Twitter)</title>
+      <path
+        fill="currentColor"
+        d="M389.2 48h70.6L305.6 224.2L487 464H345L233.7 318.6L106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/vercel.tsx b/src/components/icons/vercel.tsx
new file mode 100644
index 0000000..975ab83
--- /dev/null
+++ b/src/components/icons/vercel.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+/**
+ * https://icon-sets.iconify.design/simple-icons/vercel/
+ */
+export function SimpleIconsVercel(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={48}
+      height={48}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <title>Vercel</title>
+      <path fill="currentColor" d="M24 22.525H0l12-21.05z" />
+    </svg>
+  );
+}
diff --git a/src/components/icons/youtube.tsx b/src/components/icons/youtube.tsx
new file mode 100644
index 0000000..4ee36d8
--- /dev/null
+++ b/src/components/icons/youtube.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+/**
+ * https://icon-sets.iconify.design/ion/logo-youtube/
+ */
+export function IonLogoYoutube(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={48}
+      height={48}
+      viewBox="0 0 512 512"
+      {...props}
+    >
+      <title>YouTube</title>
+      <path
+        fill="currentColor"
+        d="M508.64 148.79c0-45-33.1-81.2-74-81.2C379.24 65 322.74 64 265 64h-18c-57.6 0-114.2 1-169.6 3.6C36.6 67.6 3.5 104 3.5 149C1 184.59-.06 220.19 0 255.79q-.15 53.4 3.4 106.9c0 45 33.1 81.5 73.9 81.5c58.2 2.7 117.9 3.9 178.6 3.8q91.2.3 178.6-3.8c40.9 0 74-36.5 74-81.5c2.4-35.7 3.5-71.3 3.4-107q.34-53.4-3.26-106.9M207 353.89v-196.5l145 98.2Z"
+      />
+    </svg>
+  );
+}