Replace Linkedin icon

Author: kien-ngo

apps/dashboard/src/components/contract-components/publisher/PublisherSocials.tsx

@@ -1,11 +1,11 @@
 import { ButtonGroup, type ButtonGroupProps, Icon } from "@chakra-ui/react";
 import { SiFacebook } from "@react-icons/all-files/si/SiFacebook";
-import { SiLinkedin } from "@react-icons/all-files/si/SiLinkedin";
 import { SiMedium } from "@react-icons/all-files/si/SiMedium";
 import { SiReddit } from "@react-icons/all-files/si/SiReddit";
 import { SiTelegram } from "@react-icons/all-files/si/SiTelegram";
 import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
 import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
+import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
 import { XIcon } from "components/icons/brand-icons/XIcon";
 import type { ProfileMetadata } from "constants/schemas";
 import { FiGlobe } from "react-icons/fi";
@@ -162,7 +162,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
         }
         bg="transparent"
         aria-label="linkedin"
-        icon={<Icon as={SiLinkedin} />}
+        icon={<LinkedInIcon className="size-4" />}
         category={TRACKING_CATEGORY}
         label="linkedin"
       />

apps/dashboard/src/components/footer/socialLinks.tsx

@@ -1,9 +1,9 @@
 import { SiInstagram } from "@react-icons/all-files/si/SiInstagram";
-import { SiLinkedin } from "@react-icons/all-files/si/SiLinkedin";
 import { SiTiktok } from "@react-icons/all-files/si/SiTiktok";
 import { SiYoutube } from "@react-icons/all-files/si/SiYoutube";
 import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
 import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
+import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
 import { XIcon } from "components/icons/brand-icons/XIcon";
 
 interface socialLinkInfo {
@@ -37,7 +37,7 @@ export const SOCIALS: socialLinkInfo[] = [
     link: "https://www.linkedin.com/company/third-web/",
     ariaLabel: "LinkedIn",
     label: "linkedin",
-    icon: <SiLinkedin fontSize={socialIconSize} />,
+    icon: <LinkedInIcon fontSize={socialIconSize} className="size-5" />,
   },
   {
     link: "https://www.instagram.com/thirdweb/",

apps/dashboard/src/components/icons/brand-icons/LinkedinIcon.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const LinkedInIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <title>LinkedIn</title>
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+    </svg>
+  );
+};