diff --git a/apps/dashboard/src/components/connect/ConnectPlaygroundButton.tsx b/apps/dashboard/src/components/connect/ConnectPlaygroundButton.tsx index 42ec77c7f36..a430bcab3f3 100644 --- a/apps/dashboard/src/components/connect/ConnectPlaygroundButton.tsx +++ b/apps/dashboard/src/components/connect/ConnectPlaygroundButton.tsx @@ -1,7 +1,7 @@ import { Icon } from "@chakra-ui/react"; -import { SiReact } from "@react-icons/all-files/si/SiReact"; import { SiUnity } from "@react-icons/all-files/si/SiUnity"; import { JavaScriptIcon } from "components/icons/brand-icons/JavaScriptIcon"; +import { ReactIcon } from "components/icons/brand-icons/ReactIcon"; import { useTrack } from "hooks/analytics/useTrack"; import type { Dispatch, ReactNode, SetStateAction } from "react"; import { Button } from "tw-components"; @@ -12,11 +12,11 @@ const LOGO_OPTIONS = { fill: "yellow", }, react: { - icon: SiReact, + icon: ReactIcon, fill: "#61dafb", }, "react-native": { - icon: SiReact, + icon: ReactIcon, fill: "#61dafb", }, unity: { diff --git a/apps/dashboard/src/components/contract-tabs/code/CodeSegment.tsx b/apps/dashboard/src/components/contract-tabs/code/CodeSegment.tsx index ddd4e6170b7..8f360b843cf 100644 --- a/apps/dashboard/src/components/contract-tabs/code/CodeSegment.tsx +++ b/apps/dashboard/src/components/contract-tabs/code/CodeSegment.tsx @@ -1,7 +1,7 @@ import { ButtonGroup, Flex, Icon, Stack } from "@chakra-ui/react"; -import { SiReact } from "@react-icons/all-files/si/SiReact"; import { SiUnity } from "@react-icons/all-files/si/SiUnity"; import { JavaScriptIcon } from "components/icons/brand-icons/JavaScriptIcon"; +import { ReactIcon } from "components/icons/brand-icons/ReactIcon"; import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon"; import { type Dispatch, type SetStateAction, useMemo } from "react"; import { Button, CodeBlock } from "tw-components"; @@ -28,13 +28,13 @@ const Environments: SupportedEnvironment[] = [ { environment: "react", title: "React", - icon: SiReact, + icon: ReactIcon, colorScheme: "purple", }, { environment: "react-native", title: "React Native", - icon: SiReact, + icon: ReactIcon, colorScheme: "purple", }, { diff --git a/apps/dashboard/src/components/icons/brand-icons/ReactIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/ReactIcon.tsx new file mode 100644 index 00000000000..afaa2a707db --- /dev/null +++ b/apps/dashboard/src/components/icons/brand-icons/ReactIcon.tsx @@ -0,0 +1,18 @@ +import type { SVGProps } from "react"; + +export const ReactIcon = (props: SVGProps) => { + return ( + + React + + + ); +}; diff --git a/apps/dashboard/src/components/product-pages/common/CodeOptionButton.tsx b/apps/dashboard/src/components/product-pages/common/CodeOptionButton.tsx index d62dbb212b9..5f6d1a53c74 100644 --- a/apps/dashboard/src/components/product-pages/common/CodeOptionButton.tsx +++ b/apps/dashboard/src/components/product-pages/common/CodeOptionButton.tsx @@ -1,7 +1,7 @@ import { Icon } from "@chakra-ui/react"; -import { SiReact } from "@react-icons/all-files/si/SiReact"; import { SiUnity } from "@react-icons/all-files/si/SiUnity"; import { JavaScriptIcon } from "components/icons/brand-icons/JavaScriptIcon"; +import { ReactIcon } from "components/icons/brand-icons/ReactIcon"; import { useTrack } from "hooks/analytics/useTrack"; import type { Dispatch, SetStateAction } from "react"; import { flushSync } from "react-dom"; @@ -13,11 +13,11 @@ export const LOGO_OPTIONS = { fill: "yellow", }, react: { - icon: SiReact, + icon: ReactIcon, fill: "#61dafb", }, "react-native": { - icon: SiReact, + icon: ReactIcon, fill: "#61dafb", }, unity: { diff --git a/apps/dashboard/src/components/shared/ConnectSDKCard.tsx b/apps/dashboard/src/components/shared/ConnectSDKCard.tsx index 0945ae05d43..a05922988ba 100644 --- a/apps/dashboard/src/components/shared/ConnectSDKCard.tsx +++ b/apps/dashboard/src/components/shared/ConnectSDKCard.tsx @@ -1,5 +1,5 @@ -import { SiReact } from "@react-icons/all-files/si/SiReact"; import { SiUnity } from "@react-icons/all-files/si/SiUnity"; +import { ReactIcon } from "components/icons/brand-icons/ReactIcon"; import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon"; import Link from "next/link"; import { SiUnrealengine } from "react-icons/si"; @@ -26,12 +26,12 @@ export function ConnectSDKCard({ />