Update

Author: kien-ngo

apps/dashboard/src/@/components/blocks/app-footer.tsx

@@ -1,10 +1,10 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { ThirdwebMiniLogo } from "app/components/ThirdwebMiniLogo";
+import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import Link from "next/link";
 import {
   SiDiscord,
-  SiGithub,
   SiInstagram,
   SiLinkedin,
   SiReddit,
@@ -35,7 +35,7 @@ export function AppFooter(props: AppFooterProps) {
           <div className="flex flex-row gap-3">
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://github.com/thirdweb-dev" target="_blank">
-                <SiGithub className="size-5 text-muted-foreground" />
+                <GithubIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">

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

@@ -1,12 +1,12 @@
 import { ButtonGroup, type ButtonGroupProps, Icon } from "@chakra-ui/react";
 import { SiDiscord } from "@react-icons/all-files/si/SiDiscord";
 import { SiFacebook } from "@react-icons/all-files/si/SiFacebook";
-import { SiGithub } from "@react-icons/all-files/si/SiGithub";
 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 { SiTwitter } from "@react-icons/all-files/si/SiTwitter";
+import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import type { ProfileMetadata } from "constants/schemas";
 import { FiGlobe } from "react-icons/fi";
 import { LinkButton, TrackedIconButton } from "tw-components";
@@ -67,7 +67,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
         }
         bg="transparent"
         aria-label="github"
-        icon={<Icon as={SiGithub} />}
+        icon={<GithubIcon className="size-4" />}
         category={TRACKING_CATEGORY}
         label="github"
       />

apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx

@@ -10,9 +10,9 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { SiDiscord } from "@react-icons/all-files/si/SiDiscord";
-import { SiGithub } from "@react-icons/all-files/si/SiGithub";
 import { SiTwitter } from "@react-icons/all-files/si/SiTwitter";
 import { useQueryClient } from "@tanstack/react-query";
+import { Github } from "components/icons/brand-icons/GithubIcon";
 import { FileInput } from "components/shared/FileInput";
 import {
   DASHBOARD_ENGINE_RELAYER_URL,
@@ -214,7 +214,7 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           <FormControl isInvalid={!!errors.github}>
             <FormLabel>
               <div className="flex flex-row gap-2">
-                <Icon as={SiGithub} boxSize={4} />
+                <Github className="size-4" />
                 GitHub
               </div>
             </FormLabel>

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

@@ -1,10 +1,10 @@
 import { SiDiscord } from "@react-icons/all-files/si/SiDiscord";
-import { SiGithub } from "@react-icons/all-files/si/SiGithub";
 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 { SiTwitter } from "@react-icons/all-files/si/SiTwitter";
 import { SiYoutube } from "@react-icons/all-files/si/SiYoutube";
+import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 
 interface socialLinkInfo {
   link: string;
@@ -55,6 +55,6 @@ export const SOCIALS: socialLinkInfo[] = [
     link: "https://github.com/thirdweb-dev",
     ariaLabel: "GitHub",
     label: "gitHub",
-    icon: <SiGithub fontSize={socialIconSize} />,
+    icon: <GithubIcon fontSize={socialIconSize} className="size-5" />,
   },
 ];

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

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const GithubIcon = (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>GitHub</title>
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  );
+};

apps/dashboard/src/components/product-pages/common/GameCard.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, useBreakpointValue } from "@chakra-ui/react";
-import { SiGithub } from "@react-icons/all-files/si/SiGithub";
+import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import { useTrack } from "hooks/analytics/useTrack";
 import NextImage, { type StaticImageData } from "next/image";
 import { IoGameControllerOutline } from "react-icons/io5";
@@ -96,7 +96,7 @@ export const GameCard: React.FC<GameCardProps> = ({
             }}
             size="sm"
             variant="ghost"
-            icon={<SiGithub />}
+            icon={<GithubIcon className="size-4" />}
             aria-label="GitHub"
             category={TRACK_CATEGORY}
             label={game.id}