Skip to content

Commit a637cab

Browse files
kien-ngokien-ngo
committed
[Dashboard] Remove @react-icons/all-files (#4819)
## Problem solved Short description of the bug fixed or feature added <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on updating icon components in the `dashboard` application by replacing `react-icons` with custom SVG icons for improved performance and maintainability. ### Detailed summary - Removed `@react-icons/all-files` dependency. - Added new SVG components: `MediumIcon`, `YoutubeIcon`, `TiktokIcon`, `TelegramIcon`, `RedditIcon`, `MetaIcon`, `InstagramIcon`. - Updated `SupportPage`, `PublisherSocials`, `AppFooter`, and other components to use new icons. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent c31f919 commit a637cab

File tree

13 files changed

+159
-50
lines changed

13 files changed

+159
-50
lines changed

‎apps/dashboard/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@
4545
"@radix-ui/react-slot": "^1.1.0",
4646
"@radix-ui/react-switch": "^1.1.0",
4747
"@radix-ui/react-tooltip": "1.1.2",
48-
"@react-icons/all-files": "^4.1.0",
4948
"@sentry/nextjs": "8.30.0",
5049
"@shazow/whatsabi": "^0.14.1",
5150
"@stripe/react-stripe-js": "^2.7.3",

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
import { Button } from "@/components/ui/button";
22
import { cn } from "@/lib/utils";
33
import { ThirdwebMiniLogo } from "app/components/ThirdwebMiniLogo";
4+
import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
45
import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
6+
import { InstagramIcon } from "components/icons/brand-icons/InstagramIcon";
7+
import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
8+
import { RedditIcon } from "components/icons/brand-icons/RedditIcon";
9+
import { TiktokIcon } from "components/icons/brand-icons/TiktokIcon";
10+
import { XIcon } from "components/icons/brand-icons/XIcon";
11+
import { YoutubeIcon } from "components/icons/brand-icons/YoutubeIcon";
512
import Link from "next/link";
6-
import {
7-
SiDiscord,
8-
SiInstagram,
9-
SiLinkedin,
10-
SiReddit,
11-
SiTiktok,
12-
SiX,
13-
SiYoutube,
14-
} from "react-icons/si";
1513

1614
type AppFooterProps = {
1715
className?: string;
@@ -40,40 +38,40 @@ export function AppFooter(props: AppFooterProps) {
4038
</Button>
4139
<Button size="icon" variant="ghost" asChild className="size-9">
4240
<Link href="https://www.tiktok.com/@thirdweb" target="_blank">
43-
<SiTiktok className="size-5 text-muted-foreground" />
41+
<TiktokIcon className="size-5 text-muted-foreground" />
4442
</Link>
4543
</Button>
4644
<Button size="icon" variant="ghost" asChild className="size-9">
4745
<Link href="https://www.instagram.com/thirdweb/" target="_blank">
48-
<SiInstagram className="size-5 text-muted-foreground" />
46+
<InstagramIcon className="size-5 text-muted-foreground" />
4947
</Link>
5048
</Button>
5149
<Button size="icon" variant="ghost" asChild className="size-9">
5250
<Link
5351
href="hhttps://www.linkedin.com/company/third-web/"
5452
target="_blank"
5553
>
56-
<SiLinkedin className="size-5 text-muted-foreground" />
54+
<LinkedInIcon className="size-5 text-muted-foreground" />
5755
</Link>
5856
</Button>
5957
<Button size="icon" variant="ghost" asChild className="size-9">
6058
<Link href="https://www.youtube.com/@thirdweb_" target="_blank">
61-
<SiYoutube className="size-5 text-muted-foreground" />
59+
<YoutubeIcon className="size-5 text-muted-foreground" />
6260
</Link>
6361
</Button>
6462
<Button size="icon" variant="ghost" asChild className="size-9">
6563
<Link href="https://discord.gg/thirdweb" target="_blank">
66-
<SiDiscord className="size-5 text-muted-foreground" />
64+
<DiscordIcon className="size-5 text-muted-foreground" />
6765
</Link>
6866
</Button>
6967
<Button size="icon" variant="ghost" asChild className="size-9">
7068
<Link href="https://www.reddit.com/r/thirdweb/" target="_blank">
71-
<SiReddit className="size-5 text-muted-foreground" />
69+
<RedditIcon className="size-5 text-muted-foreground" />
7270
</Link>
7371
</Button>
7472
<Button size="icon" variant="ghost" asChild className="size-9">
7573
<Link href="https://x.com/thirdweb" target="_blank">
76-
<SiX className="size-5 text-muted-foreground" />
74+
<XIcon className="size-5 text-muted-foreground" />
7775
</Link>
7876
</Button>
7977
</div>

‎apps/dashboard/src/app/(dashboard)/support/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import {
66
CardHeader,
77
CardTitle,
88
} from "@/components/ui/card";
9+
import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
910
import { BookOpenIcon, ChevronRightIcon } from "lucide-react";
1011
import type { Metadata } from "next";
1112
import Image from "next/image";
1213
import Link from "next/link";
13-
import { SiDiscord } from "react-icons/si";
1414
import accountIcon from "../../../../public/assets/support/account.svg";
1515
import contractsIcon from "../../../../public/assets/support/contracts.png";
1616
import discordIllustration from "../../../../public/assets/support/discord-illustration.png";
@@ -213,7 +213,7 @@ export default function SupportPage() {
213213
asChild
214214
>
215215
<Link href="https://discord.gg/thirdweb">
216-
<SiDiscord />
216+
<DiscordIcon className="size-4" />
217217
<span>Join Discord</span>
218218
</Link>
219219
</Button>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { ButtonGroup, type ButtonGroupProps, Icon } from "@chakra-ui/react";
2-
import { SiFacebook } from "@react-icons/all-files/si/SiFacebook";
3-
import { SiMedium } from "@react-icons/all-files/si/SiMedium";
4-
import { SiReddit } from "@react-icons/all-files/si/SiReddit";
5-
import { SiTelegram } from "@react-icons/all-files/si/SiTelegram";
62
import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
73
import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
84
import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
5+
import { MediumIcon } from "components/icons/brand-icons/MediumIcon";
6+
import { MetaIcon } from "components/icons/brand-icons/MetaIcon";
7+
import { RedditIcon } from "components/icons/brand-icons/RedditIcon";
8+
import { TelegramIcon } from "components/icons/brand-icons/TelegramIcon";
99
import { XIcon } from "components/icons/brand-icons/XIcon";
1010
import type { ProfileMetadata } from "constants/schemas";
1111
import { FiGlobe } from "react-icons/fi";
@@ -98,7 +98,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
9898
}
9999
bg="transparent"
100100
aria-label="medium"
101-
icon={<Icon as={SiMedium} />}
101+
icon={<MediumIcon className="size-4" />}
102102
category={TRACKING_CATEGORY}
103103
label="medium"
104104
/>
@@ -115,7 +115,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
115115
}
116116
bg="transparent"
117117
aria-label="telegram"
118-
icon={<Icon as={SiTelegram} />}
118+
icon={<TelegramIcon className="size-4" />}
119119
category={TRACKING_CATEGORY}
120120
label="telegram"
121121
/>
@@ -128,7 +128,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
128128
href={publisherProfile.facebook}
129129
bg="transparent"
130130
aria-label="facebook"
131-
icon={<Icon as={SiFacebook} />}
131+
icon={<MetaIcon className="size-4" />}
132132
category={TRACKING_CATEGORY}
133133
label="facebook"
134134
/>
@@ -145,7 +145,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
145145
}
146146
bg="transparent"
147147
aria-label="reddit"
148-
icon={<Icon as={SiReddit} />}
148+
icon={<RedditIcon className="size-4" />}
149149
category={TRACKING_CATEGORY}
150150
label="reddit"
151151
/>

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

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { SiInstagram } from "@react-icons/all-files/si/SiInstagram";
2-
import { SiTiktok } from "@react-icons/all-files/si/SiTiktok";
3-
import { SiYoutube } from "@react-icons/all-files/si/SiYoutube";
41
import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
52
import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
3+
import { InstagramIcon } from "components/icons/brand-icons/InstagramIcon";
64
import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
5+
import { TiktokIcon } from "components/icons/brand-icons/TiktokIcon";
76
import { XIcon } from "components/icons/brand-icons/XIcon";
7+
import { YoutubeIcon } from "components/icons/brand-icons/YoutubeIcon";
88

99
interface socialLinkInfo {
1010
link: string;
@@ -13,12 +13,10 @@ interface socialLinkInfo {
1313
label?: string;
1414
}
1515

16-
const socialIconSize = "1.25rem";
17-
1816
export const SOCIALS: socialLinkInfo[] = [
1917
{
2018
link: "https://twitter.com/thirdweb",
21-
icon: <XIcon fontSize={socialIconSize} className="size-5" />,
19+
icon: <XIcon className="size-5" />,
2220
ariaLabel: "Twitter",
2321
},
2422
{
@@ -31,30 +29,30 @@ export const SOCIALS: socialLinkInfo[] = [
3129
link: "https://www.youtube.com/channel/UCdzMx7Zhy5va5End1-XJFbA",
3230
ariaLabel: "YouTube",
3331
label: "youtube",
34-
icon: <SiYoutube fontSize={socialIconSize} />,
32+
icon: <YoutubeIcon className="size-5" />,
3533
},
3634
{
3735
link: "https://www.linkedin.com/company/third-web/",
3836
ariaLabel: "LinkedIn",
3937
label: "linkedin",
40-
icon: <LinkedInIcon fontSize={socialIconSize} className="size-5" />,
38+
icon: <LinkedInIcon className="size-5" />,
4139
},
4240
{
4341
link: "https://www.instagram.com/thirdweb/",
4442
ariaLabel: "Instagram",
4543
label: "instagram",
46-
icon: <SiInstagram fontSize={socialIconSize} />,
44+
icon: <InstagramIcon className="size-5" />,
4745
},
4846
{
4947
link: "https://www.tiktok.com/@thirdweb",
5048
ariaLabel: "TikTok",
5149
label: "tiktok",
52-
icon: <SiTiktok fontSize={socialIconSize} />,
50+
icon: <TiktokIcon className="size-5" />,
5351
},
5452
{
5553
link: "https://github.com/thirdweb-dev",
5654
ariaLabel: "GitHub",
5755
label: "gitHub",
58-
icon: <GithubIcon fontSize={socialIconSize} className="size-5" />,
56+
icon: <GithubIcon className="size-5" />,
5957
},
6058
];

‎apps/dashboard/src/components/icons/brand-icons/InstagramIcon.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { SVGProps } from "react";
2+
3+
export const InstagramIcon = (props: SVGProps<SVGSVGElement>) => {
4+
return (
5+
<svg
6+
role="img"
7+
viewBox="0 0 24 24"
8+
xmlns="http://www.w3.org/2000/svg"
9+
fill="currentColor"
10+
width={24}
11+
height={24}
12+
{...props}
13+
>
14+
<title>Instagram</title>
15+
<path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077" />
16+
</svg>
17+
);
18+
};

‎apps/dashboard/src/components/icons/brand-icons/MediumIcon.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { SVGProps } from "react";
2+
3+
export const MediumIcon = (props: SVGProps<SVGSVGElement>) => {
4+
return (
5+
<svg
6+
role="img"
7+
viewBox="0 0 24 24"
8+
xmlns="http://www.w3.org/2000/svg"
9+
fill="currentColor"
10+
width={24}
11+
height={24}
12+
{...props}
13+
>
14+
<title>Medium</title>
15+
<path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z" />
16+
</svg>
17+
);
18+
};

‎apps/dashboard/src/components/icons/brand-icons/MetaIcon.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { SVGProps } from "react";
2+
3+
export const MetaIcon = (props: SVGProps<SVGSVGElement>) => {
4+
return (
5+
<svg
6+
role="img"
7+
viewBox="0 0 24 24"
8+
xmlns="http://www.w3.org/2000/svg"
9+
fill="currentColor"
10+
width={24}
11+
height={24}
12+
{...props}
13+
>
14+
<title>Meta</title>
15+
<path d="M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z" />
16+
</svg>
17+
);
18+
};

‎apps/dashboard/src/components/icons/brand-icons/RedditIcon.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { SVGProps } from "react";
2+
3+
export const RedditIcon = (props: SVGProps<SVGSVGElement>) => {
4+
return (
5+
<svg
6+
role="img"
7+
viewBox="0 0 24 24"
8+
xmlns="http://www.w3.org/2000/svg"
9+
fill="currentColor"
10+
width={24}
11+
height={24}
12+
{...props}
13+
>
14+
<title>Reddit</title>
15+
<path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z" />
16+
</svg>
17+
);
18+
};

‎apps/dashboard/src/components/icons/brand-icons/TelegramIcon.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { SVGProps } from "react";
2+
3+
export const TelegramIcon = (props: SVGProps<SVGSVGElement>) => {
4+
return (
5+
<svg
6+
role="img"
7+
viewBox="0 0 24 24"
8+
xmlns="http://www.w3.org/2000/svg"
9+
fill="currentColor"
10+
width={24}
11+
height={24}
12+
{...props}
13+
>
14+
<title>Telegram</title>
15+
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
16+
</svg>
17+
);
18+
};

0 commit comments

Comments
 (0)