From 1187b84c546a619b6483606f2132b9cf03cf804a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kayla=20=E3=81=AF=E3=81=AA?= Date: Tue, 7 Apr 2026 19:32:05 -0400 Subject: [PATCH] refactor(site): remove mui from icon components (#24117) --- site/src/components/Icons/CoderIcon.tsx | 8 +- site/src/components/Icons/DockerIcon.tsx | 14 ++- site/src/components/Icons/EditSquare.tsx | 14 ++- site/src/components/Icons/GitIcon.tsx | 14 ++- site/src/components/Icons/JetBrainsIcon.tsx | 98 ++++++++++--------- site/src/components/Icons/RocketIcon.tsx | 14 ++- site/src/components/Icons/TerminalIcon.tsx | 14 ++- site/src/components/Icons/VSCodeIcon.tsx | 14 ++- .../components/Icons/VSCodeInsidersIcon.tsx | 16 ++- .../src/modules/resources/AgentRowPreview.tsx | 6 +- 10 files changed, 123 insertions(+), 89 deletions(-) diff --git a/site/src/components/Icons/CoderIcon.tsx b/site/src/components/Icons/CoderIcon.tsx index ff9dcf403d..1bd1527126 100644 --- a/site/src/components/Icons/CoderIcon.tsx +++ b/site/src/components/Icons/CoderIcon.tsx @@ -1,12 +1,14 @@ -import type { SvgIconProps } from "@mui/material/SvgIcon"; -import type { FC } from "react"; +import type { ComponentProps, FC } from "react"; import { cn } from "#/utils/cn"; /** * CoderIcon represents the cloud with brackets Coder brand icon. It does not * contain additional aspects, like the word 'Coder'. */ -export const CoderIcon: FC = ({ className, ...props }) => ( +export const CoderIcon: FC> = ({ + className, + ...props +}) => ( ( - +export const DockerIcon = (props: ComponentProps<"svg">): JSX.Element => ( + ( d="M10.188,19.638a.684.684,0,1,1-.684.684A.684.684,0,0,1,10.188,19.638Zm0,.194a.489.489,0,0,1,.177.033.2.2,0,1,0,.275.269.49.49,0,1,1-.453-.3Z" style={{ fill: "#fff" }} /> - + ); diff --git a/site/src/components/Icons/EditSquare.tsx b/site/src/components/Icons/EditSquare.tsx index 01ee862f85..86140b6bc0 100644 --- a/site/src/components/Icons/EditSquare.tsx +++ b/site/src/components/Icons/EditSquare.tsx @@ -1,8 +1,12 @@ -import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon"; +import type { ComponentProps, JSX } from "react"; -import type { JSX } from "react"; -export const EditSquare = (props: SvgIconProps): JSX.Element => ( - +export const EditSquare = (props: ComponentProps<"svg">): JSX.Element => ( + - + ); diff --git a/site/src/components/Icons/GitIcon.tsx b/site/src/components/Icons/GitIcon.tsx index 44398dc86d..5345b748b2 100644 --- a/site/src/components/Icons/GitIcon.tsx +++ b/site/src/components/Icons/GitIcon.tsx @@ -1,8 +1,12 @@ -import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon"; +import type { ComponentProps, JSX } from "react"; -import type { JSX } from "react"; -export const GitIcon = (props: SvgIconProps): JSX.Element => ( - +export const GitIcon = (props: ComponentProps<"svg">): JSX.Element => ( + - + ); diff --git a/site/src/components/Icons/JetBrainsIcon.tsx b/site/src/components/Icons/JetBrainsIcon.tsx index 1e80988d15..2bb70e8aaf 100644 --- a/site/src/components/Icons/JetBrainsIcon.tsx +++ b/site/src/components/Icons/JetBrainsIcon.tsx @@ -1,68 +1,70 @@ -import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon"; +import type { ComponentProps, JSX } from "react"; -import type { JSX } from "react"; -export const JetBrainsIcon = (props: SvgIconProps): JSX.Element => ( - - - ): JSX.Element => ( + + - + - + - + - - - - + + + + - - - + + - - - - + - - - - + /> + + ); diff --git a/site/src/components/Icons/RocketIcon.tsx b/site/src/components/Icons/RocketIcon.tsx index 677a1a318a..61617c2397 100644 --- a/site/src/components/Icons/RocketIcon.tsx +++ b/site/src/components/Icons/RocketIcon.tsx @@ -1,8 +1,12 @@ -import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon"; +import type { ComponentProps, JSX } from "react"; -import type { JSX } from "react"; -export const RocketIcon = (props: SvgIconProps): JSX.Element => ( - +export const RocketIcon = (props: ComponentProps<"svg">): JSX.Element => ( + - + ); diff --git a/site/src/components/Icons/TerminalIcon.tsx b/site/src/components/Icons/TerminalIcon.tsx index 24a7320ac7..a2c06038bf 100644 --- a/site/src/components/Icons/TerminalIcon.tsx +++ b/site/src/components/Icons/TerminalIcon.tsx @@ -1,8 +1,12 @@ -import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon"; +import type { ComponentProps, JSX } from "react"; -import type { JSX } from "react"; -export const TerminalIcon = (props: SvgIconProps): JSX.Element => ( - +export const TerminalIcon = (props: ComponentProps<"svg">): JSX.Element => ( + - + ); diff --git a/site/src/components/Icons/VSCodeIcon.tsx b/site/src/components/Icons/VSCodeIcon.tsx index 583a0a614f..07ad46045e 100644 --- a/site/src/components/Icons/VSCodeIcon.tsx +++ b/site/src/components/Icons/VSCodeIcon.tsx @@ -1,8 +1,12 @@ -import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon"; +import type { ComponentProps, JSX } from "react"; -import type { JSX } from "react"; -export const VSCodeIcon = (props: SvgIconProps): JSX.Element => ( - +export const VSCodeIcon = (props: ComponentProps<"svg">): JSX.Element => ( + ( - + ); diff --git a/site/src/components/Icons/VSCodeInsidersIcon.tsx b/site/src/components/Icons/VSCodeInsidersIcon.tsx index ef9dbb0e0e..f040541fc2 100644 --- a/site/src/components/Icons/VSCodeInsidersIcon.tsx +++ b/site/src/components/Icons/VSCodeInsidersIcon.tsx @@ -1,8 +1,14 @@ -import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon"; +import type { ComponentProps, JSX } from "react"; -import type { JSX } from "react"; -export const VSCodeInsidersIcon = (props: SvgIconProps): JSX.Element => ( - +export const VSCodeInsidersIcon = ( + props: ComponentProps<"svg">, +): JSX.Element => ( + ( - + ); diff --git a/site/src/modules/resources/AgentRowPreview.tsx b/site/src/modules/resources/AgentRowPreview.tsx index 3ec5a8d3c4..4c5253060a 100644 --- a/site/src/modules/resources/AgentRowPreview.tsx +++ b/site/src/modules/resources/AgentRowPreview.tsx @@ -101,7 +101,7 @@ export const AgentRowPreview: FC = ({ apps that are included in agent.display_apps */} {agent.display_apps.includes("web_terminal") && ( - + {DisplayAppNameMap.web_terminal} )} @@ -116,13 +116,13 @@ export const AgentRowPreview: FC = ({ {/* VSCode display apps (vscode, vscode_insiders) get special presentation */} {agent.display_apps.includes("vscode") ? ( - + {DisplayAppNameMap.vscode} ) : ( agent.display_apps.includes("vscode_insiders") && ( - + {DisplayAppNameMap.vscode_insiders} )