[Dashboard] Replace Discord icon (#4816)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing the usage of the `SiDiscord` icon from `@react-icons/all-files` with a custom `DiscordIcon` component in multiple files, enhancing the icon's integration and potentially improving styling consistency.

### Detailed summary
- Replaced `SiDiscord` icon with `DiscordIcon` in:
  - `edit-profile.tsx`
  - `socialLinks.tsx`
  - `PublisherSocials.tsx`
- Introduced `DiscordIcon` component in `DiscordIcon.tsx` with an SVG representation.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

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 { SiDiscord } from "@react-icons/all-files/si/SiDiscord";
 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 { SiTwitter } from "@react-icons/all-files/si/SiTwitter";
+import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
 import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import type { ProfileMetadata } from "constants/schemas";
 import { FiGlobe } from "react-icons/fi";
@@ -50,7 +50,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
         href={publisherProfile.discord}
         bg="transparent"
         aria-label="discord"
-        icon={<Icon as={SiDiscord} />}
+        icon={<DiscordIcon className="size-4" />}
         category={TRACKING_CATEGORY}
         label="discord"
       />

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

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

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

@@ -1,9 +1,9 @@
-import { SiDiscord } from "@react-icons/all-files/si/SiDiscord";
 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 { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
 import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 
 interface socialLinkInfo {
@@ -22,7 +22,7 @@ export const SOCIALS: socialLinkInfo[] = [
     ariaLabel: "Twitter",
   },
   {
-    icon: <SiDiscord fontSize={socialIconSize} />,
+    icon: <DiscordIcon className="size-5" />,
     ariaLabel: "Discord",
     label: "discord",
     link: "https://discord.gg/thirdweb",

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

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const DiscordIcon = (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>Discord</title>
+      <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
+    </svg>
+  );
+};