Downgrade react-simple-icons (#2533)

The latest version has a tree shaking problem icons-pack/react-simple-icons#140, which caused some of our pages to have 2MB! of javascript: https://github.com/LAION-AI/Open-Assistant/actions/runs/4706456312/jobs/8347722304#step:8:449 The problem does not exists in older versions, so I downgraded until it is fixed.
LAION-AI · Apr 15, 2023 · 2e6f22c · 2e6f22c
1 parent 65b30d0
commit 2e6f22c
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 16 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -33,7 +33,7 @@
     "@dnd-kit/utilities": "^3.2.1",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@icons-pack/react-simple-icons": "^7.2.0",
+    "@icons-pack/react-simple-icons": "^5.11.0",
     "@marsidev/react-turnstile": "^0.0.7",
     "@next-auth/prisma-adapter": "^1.0.5",
     "@next/bundle-analyzer": "^13.2.4",

diff --git a/website/src/components/CallToAction.tsx b/website/src/components/CallToAction.tsx
@@ -1,5 +1,5 @@
 import { Box, Link, Text, useColorMode } from "@chakra-ui/react";
-import { SiDiscord, SiGithub } from "@icons-pack/react-simple-icons";
+import { Discord, Github } from "@icons-pack/react-simple-icons";
 import { Users } from "lucide-react";
 import { useTranslation } from "next-i18next";
 import { useId } from "react";
@@ -73,7 +73,7 @@ export function CallToAction() {
                 type="button"
                 className="mb-2 flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
               >
-                <SiDiscord size={20} />
+                <Discord size={20} />
                 <Text as="span" className="ml-3" fontSize={["sm", "md", "lg"]}>
                   {t("discord")}
                 </Text>
@@ -84,7 +84,7 @@ export function CallToAction() {
                 type="button"
                 className="mb-2 flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
               >
-                <SiGithub size={20} />
+                <Github size={20} />
                 <Text as="span" className="ml-3" fontSize={["sm", "md", "lg"]}>
                   {t("github")}
                 </Text>

diff --git a/website/src/components/TeamMember.tsx b/website/src/components/TeamMember.tsx
@@ -1,5 +1,5 @@
 import { Avatar, Badge, Box, Flex, Text, useColorModeValue } from "@chakra-ui/react";
-import { SiGithub } from "@icons-pack/react-simple-icons";
+import { Github } from "@icons-pack/react-simple-icons";
 import Link from "next/link";
 
 export interface TeamMemberProps {
@@ -26,7 +26,7 @@ export function TeamMember({ name, url, imageURL, githubURL, title }: TeamMember
           {githubURL && (
             <Link href={githubURL} target="_default" rel="noreferrer" title="github">
               <Badge mb="1">
-                <SiGithub size={12} />
+                <Github size={12} />
               </Badge>
             </Link>
           )}

diff --git a/website/src/components/UserDisplayNameCell.tsx b/website/src/components/UserDisplayNameCell.tsx
@@ -1,5 +1,5 @@
 import { Flex, Link, Tooltip } from "@chakra-ui/react";
-import { SiDiscord, SiGoogle } from "@icons-pack/react-simple-icons";
+import { Discord, Google } from "@icons-pack/react-simple-icons";
 import { Mail } from "lucide-react";
 import NextLink from "next/link";
 import { useHasAnyRole } from "src/hooks/auth/useHasAnyRole";
@@ -10,8 +10,8 @@ import { UserAvatar } from "./UserAvatar";
 
 const AUTH_METHOD_TO_ICON: Record<AuthMethod, JSX.Element> = {
   local: <Mail size="20" />,
-  discord: <SiDiscord size="20" />,
-  google: <SiGoogle size="20" />,
+  discord: <Discord size="20" />,
+  google: <Google size="20" />,
 };
 
 export const UserDisplayNameCell = ({

diff --git a/website/src/pages/auth/signin.tsx b/website/src/pages/auth/signin.tsx
@@ -9,7 +9,7 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react";
 import { useColorMode } from "@chakra-ui/react";
-import { SiDiscord, SiGoogle } from "@icons-pack/react-simple-icons";
+import { Discord, Google } from "@icons-pack/react-simple-icons";
 import { TurnstileInstance } from "@marsidev/react-turnstile";
 import { boolean } from "boolean";
 import { Bug, Mail } from "lucide-react";
@@ -104,7 +104,7 @@ function Signin({ providers, enableEmailSignin, enableEmailSigninCaptcha, cloudf
               _active={{ bg: "#454FBF" }}
               size="lg"
               color="white"
-              leftIcon={<SiDiscord />}
+              leftIcon={<Discord />}
               onClick={() => signIn(discord.id, { callbackUrl: "/" })}
             >
               Continue with Discord
@@ -117,7 +117,7 @@ function Signin({ providers, enableEmailSignin, enableEmailSigninCaptcha, cloudf
               _active={{ bg: "#454FBF" }}
               size="lg"
               color="white"
-              leftIcon={<SiGoogle />}
+              leftIcon={<Google />}
               onClick={() => signIn(google.id, { callbackUrl: "/" })}
             >
               Continue with Google