Update Twitter icon to X (#206)

packages/ui/src/components/icons/brand/X.tsx

@@ -0,0 +1,11 @@
+import { memo } from "react";
+import { Icon, IconProps } from "@chakra-ui/react";
+
+export const XIcon = memo((props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...props}>
+    <path
+      d="M13.4894 10.7749L19.3177 4H17.9366L12.8759 9.88256L8.83395 4H4.17202L10.2843 12.8955L4.17202 20H5.55321L10.8974 13.7878L15.1661 20H19.828L13.4891 10.7749H13.4894ZM11.5977 12.9738L10.9784 12.0881L6.05088 5.03974H8.17231L12.1489 10.728L12.7682 11.6137L17.9373 19.0075H15.8158L11.5977 12.9742V12.9738Z"
+      fill="currentColor"
+    />
+  </Icon>
+));

packages/ui/src/components/icons/brand/index.ts

@@ -28,4 +28,4 @@ export * from "./Redline";
 export * from "./Safari";
 export * from "./Starknet";
 export * from "./Telegram";
-export * from "./Twitter";
+export * from "./X";

packages/ui/src/stories/Dropdown.stories.tsx

@@ -1,4 +1,4 @@
-import { DiscordIcon, GitHubIcon, TwitterIcon } from "../components/icons";
+import { DiscordIcon, GitHubIcon, XIcon } from "../components/icons";
 import { Dropdown } from "../components";
 import { Meta, StoryObj } from "@storybook/react";
 
@@ -16,8 +16,8 @@ export const Example: Story = {
   args: {
     items: [
       {
-        label: "Twitter",
-        icon: <TwitterIcon boxSize={6} />,
+        label: "X",
+        icon: <XIcon boxSize={6} />,
         onClick: () => console.log("clicked"),
       },
       {

packages/ui/src/stories/IconButton.stories.tsx

@@ -1,6 +1,6 @@
 import { IconButton } from "@chakra-ui/react";
 import { Meta, StoryObj } from "@storybook/react";
-import { ArrowLeftIcon, TwitterIcon } from "../components/icons";
+import { ArrowLeftIcon, XIcon } from "../components/icons";
 
 /**
  *
@@ -29,7 +29,7 @@ export const Square: Story = {
 
 export const Brand: Story = {
   args: {
-    icon: <TwitterIcon />,
+    icon: <XIcon />,
     fontSize: "2xl",
     px: 4,
     py: 2,
@@ -39,7 +39,7 @@ export const Brand: Story = {
 export const BrandRound: Story = {
   args: {
     variant: "round",
-    icon: <TwitterIcon />,
+    icon: <XIcon />,
     fontSize: "2xl",
     px: 4,
     py: 2,