Merge pull request #40 from bitcoin-dev-project/patch/add-linkedin-icon

Patch: Add linkedin icon

Author: jrakibi

src/components/footer/Footer.stories.tsx

@@ -43,6 +43,14 @@ export const UnModifiedFooter = (args: { colorMode: "light" | "dark" }) => {
                 className: "hover:text-orange-400",
               },
             },
+            {
+              entity: "linkedin",
+              entityLink:
+                "https://www.linkedin.com/company/bitcoin-dev-project/",
+              iconProps: {
+                className: "hover:text-orange-400",
+              },
+            },
             {
               entity: "nostr",
               entityLink: "https://discord.gg/bitcoindevs",

src/components/footer/FooterSocials.tsx

@@ -1,22 +1,32 @@
 import React from "react";
 import { FooterPartsPrimitiveProps } from "./types";
-import { TwitterXIcon, GithubIcon, DiscordIcon, NostrIcon } from "../../icons";
+import {
+  TwitterXIcon,
+  GithubIcon,
+  DiscordIcon,
+  NostrIcon,
+  LinkedinIcon,
+} from "../../icons";
 import { twMerge } from "tailwind-merge";
 import clsx from "clsx";
+type SupportedSocialMedia =
+  | "twitter"
+  | "github"
+  | "discord"
+  | "nostr"
+  | "linkedin";
 
-type SupportedSocialMedia = "twitter" | "github" | "discord" | "nostr";
-
-type ManadatorySocialMediaProps<T> = {
+type MandatorySocialMediaProps<T> = {
   entityLink: string;
   iconProps?: React.SVGProps<SVGSVGElement>;
 } & T;
 
 type SocialMediaProps =
-  | ManadatorySocialMediaProps<{
+  | MandatorySocialMediaProps<{
       entity: SupportedSocialMedia;
       icon?: React.ReactElement;
     }>
-  | ManadatorySocialMediaProps<{
+  | MandatorySocialMediaProps<{
       entity: Exclude<string, SupportedSocialMedia>;
       icon: React.ReactElement;
     }>;
@@ -56,6 +66,14 @@ const Platform = ({ platform }: { platform: SocialMediaProps }) => {
         <NostrIcon className={twMerge(clsx("w-full", className))} {...rest} />
       );
     }
+    if (entity === "linkedin") {
+      return (
+        <LinkedinIcon
+          className={twMerge(clsx("w-full", className))}
+          {...rest}
+        />
+      );
+    }
   };
   const iconElement = getIcon(entity);
 

src/icons.ts

@@ -17,6 +17,7 @@ export { default as FilterIcon } from "./icons/FilterIcon";
 export { default as FilterCloseIcon } from "./icons/FilterCloseIcon";
 export { default as GithubIcon } from "./icons/GithubIcon";
 export { default as LightningIconSolid } from "./icons/LightningIconSolid";
+export { default as LinkedinIcon } from "./icons/LinkedinIcon";
 export { default as MicIcon } from "./icons/MicIcon";
 export { default as NightIcon } from "./icons/NightIcon";
 export { default as NostrIcon } from "./icons/NostrIcon";

src/icons/LinkedinIcon.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const LinkedinIcon = ({
+  width = 52,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  height,
+  ...props
+}: SVGProps<SVGSVGElement>) => (
+  // height is destructed and unused, scaling is defined by width
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z" />
+    <rect x={2} y={9} width={4} height={12} />
+    <circle cx={4} cy={4} r={2} />
+  </svg>
+);
+
+export default LinkedinIcon;