Move many icons to @phosphor-icons/react

Signed-off-by: Quentin Guidée <[email protected]>
vertex-center · Feb 19, 2024 · 97dd6a1 · 97dd6a1
1 parent 652fe61
commit 97dd6a1
Show file tree

Hide file tree

Showing 39 changed files with 209 additions and 170 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "dependencies": {
         "@hookform/resolvers": "^3.3.2",
         "@icons-pack/react-simple-icons": "^7.1.1",
+        "@phosphor-icons/react": "^2.0.15",
         "@tanstack/react-query": "^4.36.1",
         "@tanstack/react-query-devtools": "^4.36.1",
         "@testing-library/jest-dom": "^5.16.5",

diff --git a/packages/components/lib/components/Box/Box.tsx b/packages/components/lib/components/Box/Box.tsx
@@ -1,7 +1,7 @@
 import cx from "classnames";
 import { HTMLProps } from "react";
 import "./Box.sass";
-import { MaterialIcon } from "../MaterialIcon/MaterialIcon";
+import { Info, Lightbulb, Warning, WarningCircle } from "@phosphor-icons/react";
 
 export type BoxType = "info" | "tip" | "warning" | "error";
 
@@ -13,31 +13,31 @@ export function Box(props: Readonly<BoxProps>) {
     const { className, type, children, ...others } = props;
 
     let label = "",
-        icon = "";
+        icon = null;
 
     switch (type) {
         case "info":
             label = "Info";
-            icon = "info";
+            icon = <Info />;
             break;
         case "tip":
             label = "Tip";
-            icon = "lightbulb";
+            icon = <Lightbulb />;
             break;
         case "warning":
             label = "Warning";
-            icon = "warning";
+            icon = <Warning />;
             break;
         case "error":
             label = "Error";
-            icon = "error";
+            icon = <WarningCircle />;
             break;
     }
 
     return (
         <div className={cx("box", `box-${type}`, className)} {...others}>
             <div className="box-header">
-                <MaterialIcon icon={icon} />
+                {icon}
                 {label}
             </div>
             <div className="box-content">{children}</div>

diff --git a/packages/components/lib/components/Button/Button.tsx b/packages/components/lib/components/Button/Button.tsx
@@ -29,11 +29,9 @@ export function Button(props: Readonly<ButtonProps>) {
             })}
             {...others}
         >
-            {leftIcon && <span className="button-icon-left">{leftIcon}</span>}
+            {leftIcon}
             <span className="button-content">{children}</span>
-            {rightIcon && (
-                <span className="button-icon-right">{rightIcon}</span>
-            )}
+            {rightIcon}
         </button>
     );
 }
diff --git a/packages/components/lib/components/Dropdown/Dropdown.sass b/packages/components/lib/components/Dropdown/Dropdown.sass
@@ -17,8 +17,8 @@
         display: flex
         flex-direction: row
         align-items: center
-        gap: 8px
-        padding: 12px 18px
+        gap: 10px
+        padding: 10px 12px
         color: colors.$fg-primary
         text-decoration: none
         cursor: pointer
@@ -31,11 +31,6 @@
         &-red, &-red:hover
             color: colors.$red
 
-    & .material-icon
-        font-size: 20px
-        margin: -4px 0
-        margin-left: -4px
-
     &-opened
         display: block
         z-index: 100

diff --git a/packages/components/lib/components/Dropdown/Dropdown.tsx b/packages/components/lib/components/Dropdown/Dropdown.tsx
@@ -1,8 +1,7 @@
 import cx from "classnames";
 import "./Dropdown.sass";
-import { Fragment, HTMLProps } from "react";
+import React, { Fragment, HTMLProps } from "react";
 import { Overlay } from "../Overlay/Overlay.tsx";
-import { MaterialIcon } from "../MaterialIcon/MaterialIcon.tsx";
 
 export type DropdownProps = HTMLProps<HTMLDivElement> & {
     opened?: boolean;
@@ -20,7 +19,7 @@ export function Dropdown(props: Readonly<DropdownProps>) {
                     {
                         "dropdown-opened": opened,
                     },
-                    className,
+                    className
                 )}
                 {...others}
             />
@@ -30,7 +29,7 @@ export function Dropdown(props: Readonly<DropdownProps>) {
 }
 
 export type DropdownItemProps = HTMLProps<HTMLDivElement> & {
-    icon?: string;
+    icon?: React.JSX.Element;
     red?: boolean;
 };
 
@@ -44,11 +43,11 @@ export function DropdownItem(props: Readonly<DropdownItemProps>) {
                 {
                     "dropdown-item-red": red,
                 },
-                className,
+                className
             )}
             {...others}
         >
-            {icon && <MaterialIcon icon={icon} />}
+            {icon}
             {children}
         </div>
     );

diff --git a/packages/components/lib/components/Header/Header.stories.tsx b/packages/components/lib/components/Header/Header.stories.tsx
@@ -7,6 +7,7 @@ import { MaterialIcon } from "../MaterialIcon/MaterialIcon.tsx";
 import { ProfilePicture } from "../ProfilePicture/ProfilePicture.tsx";
 import { HeaderItem } from "./HeaderItem.tsx";
 import { DropdownItem } from "../Dropdown/Dropdown.tsx";
+import { SignOut } from "@phosphor-icons/react";
 
 const meta: Meta<typeof Header> = {
     title: "Components/Header",
@@ -29,7 +30,7 @@ const linkBackProps: LinkProps<HTMLProps<HTMLAnchorElement>> = {
 };
 
 const items = (
-    <DropdownItem icon="logout" red>
+    <DropdownItem icon={<SignOut />} red>
         Logout
     </DropdownItem>
 );

diff --git a/packages/components/lib/components/Header/Header.tsx b/packages/components/lib/components/Header/Header.tsx
@@ -5,7 +5,7 @@ import { Logo } from "../Logo/Logo.tsx";
 import { Title } from "../Title/Title.tsx";
 import { Link, LinkProps } from "../Link/Link.tsx";
 import { PageContext } from "../../contexts/PageContext";
-import { MaterialIcon } from "../MaterialIcon/MaterialIcon.tsx";
+import { List } from "@phosphor-icons/react";
 
 interface IHeaderLink {
     className?: string;
@@ -20,7 +20,7 @@ export type HeaderProps<T, U> = HTMLProps<HTMLDivElement> & {
 };
 
 export function Header<T extends IHeaderLink, U extends IHeaderLink>(
-    props: Readonly<HeaderProps<T, U>>,
+    props: Readonly<HeaderProps<T, U>>
 ) {
     const {
         className,
@@ -48,16 +48,16 @@ export function Header<T extends IHeaderLink, U extends IHeaderLink>(
                     {...linkBackProps}
                 >
                     <div className="header-leading">{leading}</div>
-                </Link>,
+                </Link>
             );
         } else if (hasSidebar) {
             setLeadingElement(
                 <div
                     className="header-leading header-leading-menu"
                     onClick={() => setShowSidebar?.(true)}
                 >
-                    <MaterialIcon icon="menu" />
-                </div>,
+                    <List size={20} />
+                </div>
             );
         } else {
             setLeadingElement(null);

diff --git a/packages/components/lib/components/ProfilePicture/ProfilePicture.tsx b/packages/components/lib/components/ProfilePicture/ProfilePicture.tsx
@@ -1,7 +1,7 @@
 import "./ProfilePicture.sass";
 import cx from "classnames";
 import { HTMLProps } from "react";
-import { MaterialIcon } from "../MaterialIcon/MaterialIcon";
+import { User } from "@phosphor-icons/react";
 
 export type ProfilePictureProps = HTMLProps<HTMLImageElement> & {
     size?: number;
@@ -18,7 +18,7 @@ export function ProfilePicture(props: Readonly<ProfilePictureProps>) {
     if (props.src === undefined) {
         return (
             <div style={{ width: size, height: size }} {...properties}>
-                <MaterialIcon icon="person" />
+                <User size={20} />
             </div>
         );
     }

diff --git a/packages/components/lib/contexts/PageContext.tsx b/packages/components/lib/contexts/PageContext.tsx
@@ -1,4 +1,5 @@
 import { createContext, PropsWithChildren, useMemo, useState } from "react";
+import { IconContext } from "@phosphor-icons/react";
 
 export const PageContext = createContext<{
     title?: string;
@@ -41,10 +42,14 @@ export function PageProvider(props: PropsWithChildren) {
             setHasSidebar,
             showSidebar,
             setShowSidebar,
-        ],
+        ]
     );
 
     return (
-        <PageContext.Provider value={value}>{children}</PageContext.Provider>
+        <PageContext.Provider value={value}>
+            <IconContext.Provider value={{ size: 20 }}>
+                {children}
+            </IconContext.Provider>
+        </PageContext.Provider>
     );
 }
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -29,6 +29,7 @@
     "main": "./lib/index.ts",
     "types": "dist/vertex-components.d.ts",
     "dependencies": {
+        "@phosphor-icons/react": "^2.0.15",
         "classnames": "^2.3.2",
         "react-syntax-highlighter": "^15.5.0"
     },

diff --git a/src/apps/AdminSettings/SettingsAbout/SettingsAbout.tsx b/src/apps/AdminSettings/SettingsAbout/SettingsAbout.tsx
@@ -8,6 +8,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Title } from "@vertex-center/components";
 import Content from "../../../components/Content/Content";
 import { API } from "../backend/api";
+import { Calendar, Cpu, GitCommit, Tag } from "@phosphor-icons/react";
 
 export default function SettingsAbout() {
     const {
@@ -28,31 +29,31 @@ export default function SettingsAbout() {
                 <KeyValueInfo
                     name="Version"
                     type="code"
-                    icon="tag"
+                    icon={<Tag />}
                     loading={isLoading}
                 >
                     {about?.version}
                 </KeyValueInfo>
                 <KeyValueInfo
                     name="Commit"
                     type="code"
-                    icon="commit"
+                    icon={<GitCommit />}
                     loading={isLoading}
                 >
                     {about?.commit}
                 </KeyValueInfo>
                 <KeyValueInfo
                     name="Release date"
                     type="code"
-                    icon="calendar_month"
+                    icon={<Calendar />}
                     loading={isLoading}
                 >
                     {about?.date}
                 </KeyValueInfo>
                 <KeyValueInfo
                     name="Compiled for"
                     type="code"
-                    icon="memory"
+                    icon={<Cpu />}
                     loading={isLoading}
                 >
                     {about?.os}

diff --git a/src/apps/AdminSettings/SettingsApp/SettingsApp.tsx b/src/apps/AdminSettings/SettingsApp/SettingsApp.tsx
@@ -1,7 +1,14 @@
 import PageWithSidebar from "../../../components/PageWithSidebar/PageWithSidebar";
-import { MaterialIcon, Sidebar, useTitle } from "@vertex-center/components";
+import { Sidebar, useTitle } from "@vertex-center/components";
 import l from "../../../components/NavLink/navlink";
 import { useSidebar } from "../../../hooks/useSidebar";
+import {
+    ClockClockwise,
+    Info,
+    ListChecks,
+    Notification,
+    Palette,
+} from "@phosphor-icons/react";
 
 export default function SettingsApp() {
     useTitle("Settings");
@@ -11,29 +18,29 @@ export default function SettingsApp() {
             <Sidebar.Group title="Settings">
                 <Sidebar.Item
                     label="Theme"
-                    icon={<MaterialIcon icon="palette" />}
+                    icon={<Palette />}
                     link={l("/admin/theme")}
                 />
             </Sidebar.Group>
             <Sidebar.Group title="Administration">
                 <Sidebar.Item
                     label="Notifications"
-                    icon={<MaterialIcon icon="notifications" />}
+                    icon={<Notification />}
                     link={l("/admin/notifications")}
                 />
                 <Sidebar.Item
                     label="Updates"
-                    icon={<MaterialIcon icon="update" />}
+                    icon={<ClockClockwise />}
                     link={l("/admin/updates")}
                 />
                 <Sidebar.Item
                     label="Checks"
-                    icon={<MaterialIcon icon="checklist" />}
+                    icon={<ListChecks />}
                     link={l("/admin/checks")}
                 />
                 <Sidebar.Item
                     label="About"
-                    icon={<MaterialIcon icon="info" />}
+                    icon={<Info />}
                     link={l("/admin/about")}
                 />
             </Sidebar.Group>