switch icons to material design

package.json

@@ -18,8 +18,9 @@
 		"@fontsource/source-code-pro": "^4.5.14",
 		"@fontsource/source-sans-pro": "^4.5.11",
 		"@hcaptcha/react-hcaptcha": "^1.8.1",
-		"@loadable/component": "^5.15.3",
 		"@mattjennings/react-modal-stack": "^1.0.4",
+		"@mdi/js": "^7.2.96",
+		"@mdi/react": "^1.6.1",
 		"@mui/material": "^5.13.0",
 		"@spacebarchat/spacebar-api-types": "0.37.49",
 		"@testing-library/jest-dom": "^5.16.5",
@@ -37,7 +38,6 @@
 		"react-dom": "^18.2.0",
 		"react-error-boundary": "^3.1.4",
 		"react-hook-form": "^7.43.9",
-		"react-icons": "^4.8.0",
 		"react-loading-skeleton": "^3.3.1",
 		"react-router-dom": "^6.11.1",
 		"react-scripts": "5.0.1",

pnpm-lock.yaml

@@ -19,12 +19,15 @@ dependencies:
   '@hcaptcha/react-hcaptcha':
     specifier: ^1.8.1
     version: 1.8.1(react-dom@18.2.0)(react@18.2.0)
-  '@loadable/component':
-    specifier: ^5.15.3
-    version: 5.15.3(react@18.2.0)
   '@mattjennings/react-modal-stack':
     specifier: ^1.0.4
     version: 1.0.4(react@18.2.0)
+  '@mdi/js':
+    specifier: ^7.2.96
+    version: 7.2.96
+  '@mdi/react':
+    specifier: ^1.6.1
+    version: 1.6.1
   '@mui/material':
     specifier: ^5.13.0
     version: 5.13.0(@emotion/react@11.11.0)(@emotion/styled@11.11.0)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
@@ -76,9 +79,6 @@ dependencies:
   react-hook-form:
     specifier: ^7.43.9
     version: 7.43.9(react@18.2.0)
-  react-icons:
-    specifier: ^4.8.0
-    version: 4.8.0(react@18.2.0)
   react-loading-skeleton:
     specifier: ^3.3.1
     version: 3.3.1(react@18.2.0)
@@ -2475,18 +2475,6 @@ packages:
   /@leichtgewicht/ip-codec@2.0.4:
     resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
 
-  /@loadable/component@5.15.3(react@18.2.0):
-    resolution: {integrity: sha512-VOgYgCABn6+/7aGIpg7m0Ruj34tGetaJzt4bQ345FwEovDQZ+dua+NWLmuJKv8rWZyxOUSfoJkmGnzyDXH2BAQ==}
-    engines: {node: '>=8'}
-    peerDependencies:
-      react: ^16.3.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@babel/runtime': 7.21.5
-      hoist-non-react-statics: 3.3.2
-      react: 18.2.0
-      react-is: 16.13.1
-    dev: false
-
   /@mattjennings/react-modal-stack@1.0.4(react@18.2.0):
     resolution: {integrity: sha512-9QAanK1kHBxQMgW0wEozBC95CV65NIeNEX/G2fCeNWvOD1V4g9F0XsySFd325snvte+NIb5M0+QRwKjY9BxB0g==}
     engines: {node: '>=10'}
@@ -2496,6 +2484,16 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@mdi/js@7.2.96:
+    resolution: {integrity: sha512-paR9M9ZT7rKbh2boksNUynuSZMHhqRYnEZOm/KrZTjQ4/FzyhjLHuvw/8XYzP+E7fS4+/Ms/82EN1pl/OFsiIA==}
+    dev: false
+
+  /@mdi/react@1.6.1:
+    resolution: {integrity: sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==}
+    dependencies:
+      prop-types: 15.8.1
+    dev: false
+
   /@mui/base@5.0.0-beta.0(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-ap+juKvt8R8n3cBqd/pGtZydQ4v2I/hgJKnvJRGjpSh3RvsvnDHO4rXov8MHQlH6VqpOekwgilFLGxMZjNTucA==}
     engines: {node: '>=12.0.0'}
@@ -9241,14 +9239,6 @@ packages:
       react: 18.2.0
     dev: false
 
-  /react-icons@4.8.0(react@18.2.0):
-    resolution: {integrity: sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==}
-    peerDependencies:
-      react: '*'
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 

src/components/ChannelList.tsx

@@ -72,8 +72,8 @@ function ChannelList() {
 						<FirstWrapper isCategory={isCategory} active={active}>
 							{channel.channelIcon && (
 								<Icon
-									iconName={channel.channelIcon}
+									icon={channel.channelIcon}
-									size={16}
+									size="16px"
 									style={{
 										marginRight: "8px",
 									}}

src/components/GuildSidebar.tsx

@@ -37,8 +37,8 @@ function GuildSidebar() {
 				key="home"
 				tooltip="Home"
 				icon={{
-					iconName: "MdHome",
+					icon: "mdiHome",
-					size: 24,
+					size: "24px",
 				}}
 				action={() => navigate("/channels/@me")}
 				margin={false}

src/components/Icon.tsx

@@ -1,28 +1,17 @@
-import loadable from "@loadable/component";
+import * as Icons from "@mdi/js";
-import { IconBaseProps } from "react-icons";
+import { Icon as MdiIcon } from "@mdi/react";
+import { IconProps as IconBaseProps } from "@mdi/react/dist/IconProps";
 
-export interface IconProps extends IconBaseProps {
+export interface IconProps extends Omit<IconBaseProps, "path"> {
-	iconName: string;
+	icon: keyof typeof Icons;
 }
 
 function Icon(props: IconProps) {
-	const lib = props.iconName
+	const path = Icons[props.icon];
-		.replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+	if (!path) throw new Error(`Invalid icon name ${props.icon}`);
-		.split(" ")[0]
-		.toLocaleLowerCase();
 
-	const ElementIcon = loadable(() => import(`react-icons/${lib}/index.js`), {
+	const { icon, ...propSpread } = props;
-		resolveComponent: (el: JSX.Element) => {
+	return <MdiIcon {...propSpread} path={path} />;
-			if (!el[props.iconName as keyof JSX.Element])
-				throw new Error(
-					`Invalid icon name ${props.iconName} for font lib ${lib}`,
-				);
-			return el[props.iconName as keyof JSX.Element];
-		},
-	});
-
-	const { iconName, ...propSpread } = props;
-	return <ElementIcon {...propSpread} />;
 }
 
 export default Icon;

src/components/UserPanel.tsx

@@ -1,7 +1,7 @@
-import { MdSettings } from "react-icons/md";
 import styled from "styled-components";
 import { useAppStore } from "../stores/AppStore";
 import Avatar from "./Avatar";
+import Icon from "./Icon";
 import IconButton from "./IconButton";
 import Tooltip from "./Tooltip";
 
@@ -81,7 +81,7 @@ function UserPanel() {
 								disabled
 								color="#fff"
 							>
-								<MdSettings size={20} />
+								<Icon icon="mdiCog" size="20px" />
 							</IconButton>
 						</span>
 					</Tooltip>

src/stores/objects/Channel.ts

@@ -1,3 +1,4 @@
+import * as Icons from "@mdi/js";
 import type {
 	APIChannel,
 	APIInvite,
@@ -48,7 +49,7 @@ export default class Channel {
 	@observable webhooks?: APIWebhook[];
 	@observable flags: number;
 	@observable defaultThreadRateLimitPerUser: number;
-	@observable channelIcon?: string;
+	@observable channelIcon?: keyof typeof Icons;
 	private hasFetchedMessages = false;
 
 	constructor(app: AppStore, channel: APIChannel) {
@@ -91,44 +92,44 @@ export default class Channel {
 
 		switch (this.type) {
 			case ChannelType.GuildText:
-				this.channelIcon = "FaHashtag";
+				this.channelIcon = "mdiPound";
 				break;
 			case ChannelType.GuildVoice:
-				this.channelIcon = "FaVolumeUp";
+				this.channelIcon = "mdiVolumeHigh";
 				break;
 			case ChannelType.GuildAnnouncement:
 			case ChannelType.AnnouncementThread:
-				this.channelIcon = "FaBullhorn";
+				this.channelIcon = "mdiBullhornVariant";
 				break;
 			case ChannelType.GuildStore:
 			case ChannelType.Transactional:
-				this.channelIcon = "FaTag";
+				this.channelIcon = "mdiStore";
 				break;
 			case ChannelType.Encrypted:
 			case ChannelType.EncryptedThread:
-				this.channelIcon = "FaLock";
+				this.channelIcon = "mdiLock";
 				break;
 			case ChannelType.PublicThread:
 			case ChannelType.PrivateThread:
-				this.channelIcon = "FaComments";
+				this.channelIcon = "mdiCommentMultipleOutline";
 				break;
 			case ChannelType.GuildStageVoice:
-				this.channelIcon = "FaBroadcastTower";
+				this.channelIcon = "mdiBroadcast";
 				break;
 			case ChannelType.GuildForum:
-				this.channelIcon = "FaRegComments";
+				this.channelIcon = "mdiForumOutline";
 				break;
 			case ChannelType.TicketTracker:
-				this.channelIcon = "FaQuestion";
+				this.channelIcon = "mdiTicketOutline";
 				break;
 			case ChannelType.KanBan:
-				this.channelIcon = "FaDev";
+				this.channelIcon = "mdiDeveloperBoard";
 				break;
 			case ChannelType.VoicelessWhiteboard:
-				this.channelIcon = "FaPen";
+				this.channelIcon = "mdiDraw";
 				break;
 			case ChannelType.GuildDirectory:
-				this.channelIcon = "FaFolder";
+				this.channelIcon = "mdiFolder";
 				break;
 		}