[Dashboard] Replace twitter icon (#4817)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `XIcon` component and replaces existing Twitter icons in various components with this new icon, enhancing consistency and potentially improving the visual design.

### Detailed summary
- Added a new `XIcon` component in `XIcon.tsx`.
- Replaced `SiTwitter` icon with `XIcon` in:
  - `edit-profile.tsx`
  - `socialLinks.tsx`
  - `PublisherSocials.tsx`

> ✨ 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

@@ -4,9 +4,9 @@ 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 { XIcon } from "components/icons/brand-icons/XIcon";
 import type { ProfileMetadata } from "constants/schemas";
 import { FiGlobe } from "react-icons/fi";
 import { LinkButton, TrackedIconButton } from "tw-components";
@@ -37,7 +37,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
         }
         bg="transparent"
         aria-label="twitter"
-        icon={<Icon as={SiTwitter} />}
+        icon={<XIcon className="size-4" />}
         category={TRACKING_CATEGORY}
         label="twitter"
       />

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

@@ -9,10 +9,10 @@ import {
   Textarea,
   useDisclosure,
 } from "@chakra-ui/react";
-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 { XIcon } from "components/icons/brand-icons/XIcon";
 import { FileInput } from "components/shared/FileInput";
 import {
   DASHBOARD_ENGINE_RELAYER_URL,
@@ -227,7 +227,7 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           <FormControl isInvalid={!!errors.twitter}>
             <FormLabel>
               <div className="flex flex-row gap-2">
-                <Icon as={SiTwitter} boxSize={4} />
+                <XIcon className="size-4" />
                 Twitter
               </div>
             </FormLabel>

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

@@ -1,10 +1,10 @@
 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";
+import { XIcon } from "components/icons/brand-icons/XIcon";
 
 interface socialLinkInfo {
   link: string;
@@ -18,7 +18,7 @@ const socialIconSize = "1.25rem";
 export const SOCIALS: socialLinkInfo[] = [
   {
     link: "https://twitter.com/thirdweb",
-    icon: <SiTwitter fontSize={socialIconSize} />,
+    icon: <XIcon fontSize={socialIconSize} className="size-5" />,
     ariaLabel: "Twitter",
   },
   {

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

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const XIcon = (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>X</title>
+      <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
+    </svg>
+  );
+};