mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
refactor(site): remove mui from icon components (#24117)
This commit is contained in:
Kayla はな
@@ -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<SvgIconProps> = ({ className, ...props }) => (
|
||||
export const CoderIcon: FC<ComponentProps<"svg">> = ({
|
||||
className,
|
||||
...props
|
||||
}) => (
|
||||
<svg
|
||||
// This is a case where prop order does matter. We want fill to be easy
|
||||
// to override, but all other local props should stay locked down
|
||||
|
||||
@@ -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 DockerIcon = (props: SvgIconProps): JSX.Element => (
|
||||
<SvgIcon {...props} viewBox="0 0 32 32">
|
||||
export const DockerIcon = (props: ComponentProps<"svg">): JSX.Element => (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
viewBox="0 0 32 32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16.54,12.663H19.4v2.924h1.446a6.272,6.272,0,0,0,1.988-.333,5.091,5.091,0,0,0,.966-.436,3.584,3.584,0,0,1-.67-1.849,3.907,3.907,0,0,1,.7-2.753l.3-.348.358.288a4.558,4.558,0,0,1,1.795,2.892,4.375,4.375,0,0,1,3.319.309l.393.226-.207.4a4.141,4.141,0,0,1-4.157,1.983c-2.48,6.168-7.871,9.088-14.409,9.088-3.378,0-6.476-1.263-8.241-4.259l-.029-.049L2.7,20.227a8.316,8.316,0,0,1-.659-4.208l.04-.433H4.526V12.663H7.387V9.8h5.721V6.942H16.54v5.721Z"
|
||||
style={{ fill: "#0096e6" }}
|
||||
@@ -19,5 +23,5 @@ export const DockerIcon = (props: SvgIconProps): 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" }}
|
||||
/>
|
||||
</SvgIcon>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -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 => (
|
||||
<SvgIcon {...props} viewBox="0 0 48 48">
|
||||
export const EditSquare = (props: ComponentProps<"svg">): JSX.Element => (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
viewBox="0 0 48 48"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M9 47.4q-1.2 0-2.1-.9-.9-.9-.9-2.1v-30q0-1.2.9-2.1.9-.9 2.1-.9h20.25l-3 3H9v30h30V27l3-3v20.4q0 1.2-.9 2.1-.9.9-2.1.9Zm15-18Zm9.1-17.6 2.15 2.1L21 28.1v4.3h4.25l14.3-14.3 2.1 2.1L26.5 35.4H18v-8.5Zm8.55 8.4-8.55-8.4 5-5q.85-.85 2.125-.85t2.125.9l4.2 4.25q.85.9.85 2.125t-.9 2.075Z" />
|
||||
</SvgIcon>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -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 => (
|
||||
<SvgIcon {...props} viewBox="0 0 96 96">
|
||||
export const GitIcon = (props: ComponentProps<"svg">): JSX.Element => (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
viewBox="0 0 96 96"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M92.71 44.408 52.591 4.291c-2.31-2.311-6.057-2.311-8.369 0l-8.33 8.332L46.459 23.19c2.456-.83 5.272-.273 7.229 1.685 1.969 1.97 2.521 4.81 1.67 7.275l10.186 10.185c2.465-.85 5.307-.3 7.275 1.671 2.75 2.75 2.75 7.206 0 9.958-2.752 2.751-7.208 2.751-9.961 0-2.068-2.07-2.58-5.11-1.531-7.658l-9.5-9.499v24.997c.67.332 1.303.774 1.861 1.332 2.75 2.75 2.75 7.206 0 9.959-2.75 2.749-7.209 2.749-9.957 0-2.75-2.754-2.75-7.21 0-9.959.68-.679 1.467-1.193 2.307-1.537v-25.23c-.84-.344-1.625-.853-2.307-1.537-2.083-2.082-2.584-5.14-1.516-7.698L31.798 16.715 4.288 44.222c-2.311 2.313-2.311 6.06 0 8.371l40.121 40.118c2.31 2.311 6.056 2.311 8.369 0L92.71 52.779c2.311-2.311 2.311-6.06 0-8.371z" />
|
||||
</SvgIcon>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -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 => (
|
||||
<SvgIcon {...props} viewBox="0 0 100 100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" width="180">
|
||||
<path
|
||||
d="m81.56 83.71-41.35-35a15 15 0 1 0 -14.47 25.7h.15l.39.12 52.16
|
||||
export const JetBrainsIcon = (props: ComponentProps<"svg">): JSX.Element => (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
viewBox="0 0 180 180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m81.56 83.71-41.35-35a15 15 0 1 0 -14.47 25.7h.15l.39.12 52.16
|
||||
15.89a3.53 3.53 0 0 0 1.18.21 3.73 3.73 0 0 0 1.93-6.91z"
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
d="m89.85 25.93a10.89 10.89 0 0 0 -16.85-9.18l-50.5 30.66a15 15 0 1 0
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
d="m89.85 25.93a10.89 10.89 0 0 0 -16.85-9.18l-50.5 30.66a15 15 0 1 0
|
||||
17.9 24l45.27-36.89.36-.3a10.93 10.93 0 0 0 3.82-8.29z"
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
d="m163.29 92-76.62-73.79a10.91 10.91 0 1 0 -14.81 16l.14.12 81.4
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
d="m163.29 92-76.62-73.79a10.91 10.91 0 1 0 -14.81 16l.14.12 81.4
|
||||
68.58a7.36 7.36 0 0 0 12.09-5.65 7.39 7.39 0 0 0 -2.2-5.26z"
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
d="m165.5 97.29a7.35 7.35 0 0 0 -11.67-6l-92.71 45.3a15 15 0 1 0 15.48
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
d="m165.5 97.29a7.35 7.35 0 0 0 -11.67-6l-92.71 45.3a15 15 0 1 0 15.48
|
||||
25.59l85.73-58.84a7.35 7.35 0 0 0 3.17-6.05z"
|
||||
fill="#fff"
|
||||
/>
|
||||
<path d="m60 60h60v60h-60z" className="![fill:#000]" />
|
||||
<g fill="#fff">
|
||||
<path d="m66.53 108.75h22.5v3.75h-22.5z" />
|
||||
<path
|
||||
d="m65.59 75.47 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.45
|
||||
fill="#fff"
|
||||
/>
|
||||
<path d="m60 60h60v60h-60z" className="![fill:#000]" />
|
||||
<g fill="#fff">
|
||||
<path d="m66.53 108.75h22.5v3.75h-22.5z" />
|
||||
<path
|
||||
d="m65.59 75.47 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.45
|
||||
1.06-1.32v-5.92h2.58v5.94a3.44 3.44 0 0 1 -.92 2.63 3.52 3.52 0 0 1 -2.57 1
|
||||
3.84 3.84 0 0 1 -3.29-1.62z"
|
||||
/>
|
||||
<path d="m73.53 67.52h7.53v2.19h-5v1.43h4.49v2h-4.45v1.49h5v2.2h-7.6z" />
|
||||
<path d="m84.73 69.79h-2.8v-2.27h8.21v2.27h-2.81v7.09h-2.6z" />
|
||||
<path
|
||||
d="m66.63 80.58h4.42a3.47 3.47 0 0 1 2.55.83 2.09 2.09 0 0 1 .61 1.52
|
||||
/>
|
||||
<path d="m73.53 67.52h7.53v2.19h-5v1.43h4.49v2h-4.45v1.49h5v2.2h-7.6z" />
|
||||
<path d="m84.73 69.79h-2.8v-2.27h8.21v2.27h-2.81v7.09h-2.6z" />
|
||||
<path
|
||||
d="m66.63 80.58h4.42a3.47 3.47 0 0 1 2.55.83 2.09 2.09 0 0 1 .61 1.52
|
||||
2.18 2.18 0 0 1 -1.45 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.69-1.31 2.69-3.55
|
||||
2.69h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.25c.78 0 1.24-.27
|
||||
1.24-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31
|
||||
1.24-.86-.02-.53-.4-.87-1.27-.87z"
|
||||
/>
|
||||
<path
|
||||
d="m75.45 80.58h4.15a4.14 4.14 0 0 1 3.05 1 2.92 2.92 0 0 1 .83 2.18 3
|
||||
/>
|
||||
<path
|
||||
d="m75.45 80.58h4.15a4.14 4.14 0 0 1 3.05 1 2.92 2.92 0 0 1 .83 2.18 3
|
||||
3 0 0 1 -1.93 2.89l2.24 3.35h-3l-1.89-2.84h-.87v2.84h-2.6zm4 4.5c.87 0
|
||||
1.4-.43 1.4-1.12 0-.75-.55-1.13-1.41-1.13h-1.39v2.27z"
|
||||
/>
|
||||
<path
|
||||
d="m87.09 80.51h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.74h-2.71zm2.28
|
||||
/>
|
||||
<path
|
||||
d="m87.09 80.51h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.74h-2.71zm2.28
|
||||
5.73-1.05-2.65-1.06 2.65z"
|
||||
/>
|
||||
<path d="m94 80.55h2.6v9.37h-2.6z" />
|
||||
<path
|
||||
d="m97.56 80.55h2.44l3.37
|
||||
/>
|
||||
<path d="m94 80.55h2.6v9.37h-2.6z" />
|
||||
<path
|
||||
d="m97.56 80.55h2.44l3.37
|
||||
5v-5h2.57v9.37h-2.27l-3.53-5.14v5.14h-2.58z"
|
||||
/>
|
||||
<path
|
||||
d="m106.37 88.53 1.44-1.73a4.86 4.86 0 0 0 3 1.13c.71 0 1.08-.25
|
||||
/>
|
||||
<path
|
||||
d="m106.37 88.53 1.44-1.73a4.86 4.86 0 0 0 3 1.13c.71 0 1.08-.25
|
||||
1.08-.65 0-.41-.3-.61-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.38-3
|
||||
3.63-3a5.88 5.88 0 0 1 3.85 1.25l-1.25 1.78a4.56 4.56 0 0 0 -2.62-.92c-.63
|
||||
0-.94.25-.94.6 0 .43.32.62 1.63.91 2.15.47 3.48 1.17 3.48 2.92 0 1.91-1.51
|
||||
3-3.78 3a6.56 6.56 0 0 1 -4.4-1.45z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -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 => (
|
||||
<SvgIcon {...props} viewBox="0 0 24 24">
|
||||
export const RocketIcon = (props: ComponentProps<"svg">): JSX.Element => (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M12 2.5s4.5 2.04 4.5 10.5c0 2.49-1.04 5.57-1.6 7H9.1c-.56-1.43-1.6-4.51-1.6-7C7.5 4.54 12 2.5 12 2.5zm2 8.5c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-6.31 9.52c-.48-1.23-1.52-4.17-1.67-6.87l-1.13.75c-.56.38-.89 1-.89 1.67V22l3.69-1.48zM20 22v-5.93c0-.67-.33-1.29-.89-1.66l-1.13-.75c-.15 2.69-1.2 5.64-1.67 6.87L20 22z" />
|
||||
</SvgIcon>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -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 => (
|
||||
<SvgIcon {...props} viewBox="0 0 24 24">
|
||||
export const TerminalIcon = (props: ComponentProps<"svg">): JSX.Element => (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M20 4H4c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H4V8h16v10zm-2-1h-6v-2h6v2zM7.5 17l-1.41-1.41L8.67 13l-2.59-2.59L7.5 9l4 4-4 4z" />
|
||||
</SvgIcon>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -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 => (
|
||||
<SvgIcon {...props} viewBox="0 0 100 100">
|
||||
export const VSCodeIcon = (props: ComponentProps<"svg">): JSX.Element => (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
|
||||
<mask
|
||||
id="vscode_mask0"
|
||||
@@ -131,5 +135,5 @@ export const VSCodeIcon = (props: SvgIconProps): JSX.Element => (
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -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 => (
|
||||
<SvgIcon {...props} viewBox="0 0 256 256">
|
||||
export const VSCodeInsidersIcon = (
|
||||
props: ComponentProps<"svg">,
|
||||
): JSX.Element => (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
viewBox="0 0 256 256"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<svg
|
||||
width="256"
|
||||
height="256"
|
||||
@@ -123,5 +129,5 @@ export const VSCodeInsidersIcon = (props: SvgIconProps): JSX.Element => (
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -101,7 +101,7 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({
|
||||
apps that are included in agent.display_apps */}
|
||||
{agent.display_apps.includes("web_terminal") && (
|
||||
<AppPreview>
|
||||
<TerminalIcon sx={{ width: 12, height: 12 }} />
|
||||
<TerminalIcon className="size-3" />
|
||||
{DisplayAppNameMap.web_terminal}
|
||||
</AppPreview>
|
||||
)}
|
||||
@@ -116,13 +116,13 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({
|
||||
{/* VSCode display apps (vscode, vscode_insiders) get special presentation */}
|
||||
{agent.display_apps.includes("vscode") ? (
|
||||
<AppPreview>
|
||||
<VSCodeIcon sx={{ width: 12, height: 12 }} />
|
||||
<VSCodeIcon className="size-3" />
|
||||
{DisplayAppNameMap.vscode}
|
||||
</AppPreview>
|
||||
) : (
|
||||
agent.display_apps.includes("vscode_insiders") && (
|
||||
<AppPreview>
|
||||
<VSCodeIcon sx={{ width: 12, height: 12 }} />
|
||||
<VSCodeIcon className="size-3" />
|
||||
{DisplayAppNameMap.vscode_insiders}
|
||||
</AppPreview>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user