feat(icons): migration to phosphor icons

src/app/components/AccountDataEditor.tsx

@@ -2,8 +2,6 @@ import { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } f
 import {
   Box,
   Text,
-  Icon,
-  Icons,
   IconButton,
   Input,
   Button,
@@ -14,12 +12,15 @@ import {
   Scroll,
   config,
 } from 'folds';
+import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
 import { MatrixError } from '$types/matrix-sdk';
 import { Cursor } from '$plugins/text-area';
 import { syntaxErrorPosition } from '$utils/dom';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { useAlive } from '$hooks/useAlive';
 import { useTextAreaCodeEditor } from '$hooks/useTextAreaCodeEditor';
+import { PhosphorIcon } from '$components/PhosphorIcon';
 import { Page, PageHeader } from './page';
 import { SequenceCard } from './sequence-card';
 import { TextViewerContent } from './text-viewer';
@@ -288,14 +289,14 @@ export function AccountDataEditor({
               size="500"
               radii="Pill"
               onClick={requestClose}
-              before={<Icon size="100" src={Icons.ArrowLeft} />}
+              before={<PhosphorIcon size="100" as={ArrowLeftIcon} />}
             >
               <Text size="T300">Developer Tools</Text>
             </Chip>
           </Box>
           <Box shrink="No">
             <IconButton onClick={requestClose} variant="Surface">
-              <Icon src={Icons.Cross} />
+              <PhosphorIcon as={XIcon} />
             </IconButton>
           </Box>
         </Box>

src/app/components/BackupRestore.tsx

@@ -7,9 +7,7 @@ import {
   Button,
   color,
   config,
-  Icon,
   IconButton,
-  Icons,
   Menu,
   percent,
   PopOut,
@@ -19,6 +17,8 @@ import {
   Text,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
+import { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeVertical';
+import { DownloadIcon } from '@phosphor-icons/react/dist/csr/Download';
 import { BackupProgressStatus, backupRestoreProgressAtom } from '$state/backupRestore';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import {
@@ -29,6 +29,7 @@ import {
 } from '$hooks/useKeyBackup';
 import { stopPropagation } from '$utils/keyboard';
 import { useRestoreBackupOnVerification } from '$hooks/useRestoreBackupOnVerification';
+import { PhosphorIcon } from '$components/PhosphorIcon';
 import { InfoCard } from './info-card';
 
 type BackupStatusProps = {
@@ -183,7 +184,7 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
             radii="300"
             onClick={handleMenu}
           >
-            <Icon size="100" src={Icons.VerticalDots} />
+            <PhosphorIcon size="100" as={DotsThreeVerticalIcon} />
           </IconButton>
           <PopOut
             anchor={menuCords}
@@ -232,7 +233,7 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
                           ? undefined
                           : handleRestore
                       }
-                      before={<Icon size="100" src={Icons.Download} />}
+                      before={<PhosphorIcon size="100" as={DownloadIcon} />}
                     >
                       <Text size="B300">Restore Backup</Text>
                     </Button>

src/app/components/DefaultErrorPage.tsx

@@ -1,7 +1,9 @@
-import { Box, Button, Dialog, Icon, Icons, Text, color, config } from 'folds';
+import { Box, Button, Dialog, Text, color, config } from 'folds';
+import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning';
 import * as Sentry from '@sentry/react';
 import { SplashScreen } from '$components/splash-screen';
 import { buildGitHubUrl } from '$features/bug-report/BugReportModal';
+import { PhosphorIcon } from '$components/PhosphorIcon';
 
 type ErrorPageProps = {
   error: Error;
@@ -48,10 +50,10 @@ export function ErrorPage({ error, eventId }: ErrorPageProps) {
           <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
             <Box direction="Column" gap="100">
               <Box alignItems="Center" gap="200">
-                <Icon
+                <PhosphorIcon
                   size="300"
-                  src={Icons.Warning}
-                  filled
+                  as={WarningIcon}
+                  weight="fill"
                   style={{ color: color.Critical.Main }}
                 />
                 <Text size="H2">Oops! Something went wrong</Text>

src/app/components/DeviceVerification.tsx

@@ -12,15 +12,14 @@ import {
   config,
   Dialog,
   Header,
-  Icon,
   IconButton,
-  Icons,
   Overlay,
   OverlayBackdrop,
   OverlayCenter,
   Spinner,
   Text,
 } from 'folds';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
 import FocusTrap from 'focus-trap-react';
 import * as Sentry from '@sentry/react';
 import {
@@ -31,6 +30,7 @@ import {
 } from '$hooks/useVerificationRequest';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { ContainerColor } from '$styles/ContainerColor.css';
+import { PhosphorIcon } from '$components/PhosphorIcon';
 
 const DialogHeaderStyles: CSSProperties = {
   padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -275,7 +275,7 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
                 <Text size="H4">Device Verification</Text>
               </Box>
               <IconButton size="300" radii="300" onClick={handleCancel}>
-                <Icon src={Icons.Cross} />
+                <PhosphorIcon as={XIcon} />
               </IconButton>
             </Header>
             <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">

src/app/components/DeviceVerificationSetup.tsx

@@ -1,18 +1,6 @@
 import { FormEventHandler, forwardRef, useCallback, useState } from 'react';
-import {
-  Dialog,
-  Header,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  config,
-  Button,
-  Chip,
-  color,
-  Spinner,
-} from 'folds';
+import { Dialog, Header, Box, Text, IconButton, config, Button, Chip, color, Spinner } from 'folds';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
 import FileSaver from 'file-saver';
 import to from 'await-to-js';
 import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from '$types/matrix-sdk';
@@ -22,6 +10,7 @@ import { copyToClipboard } from '$utils/dom';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { useAlive } from '$hooks/useAlive';
+import { PhosphorIcon } from '$components/PhosphorIcon';
 import { PasswordInput } from './password-input';
 import { ActionUIA, ActionUIAFlowsLoader } from './ActionUIA';
 import { UseStateProvider } from './UseStateProvider';
@@ -302,7 +291,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
             <Text size="H4">Setup Device Verification</Text>
           </Box>
           <IconButton size="300" radii="300" onClick={onCancel}>
-            <Icon src={Icons.Cross} />
+            <PhosphorIcon as={XIcon} />
           </IconButton>
         </Header>
         <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
@@ -337,7 +326,7 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
             <Text size="H4">Reset Device Verification</Text>
           </Box>
           <IconButton size="300" radii="300" onClick={onCancel}>
-            <Icon src={Icons.Cross} />
+            <PhosphorIcon as={XIcon} />
           </IconButton>
         </Header>
         {reset ? (

src/app/components/IncomingCallModal.tsx

@@ -3,8 +3,6 @@ import {
   Dialog,
   Header,
   IconButton,
-  Icon,
-  Icons,
   Text,
   Button,
   Avatar,
@@ -13,6 +11,9 @@ import {
   OverlayCenter,
   OverlayBackdrop,
 } from 'folds';
+import { PhoneIcon } from '@phosphor-icons/react/dist/csr/Phone';
+import { UserIcon } from '@phosphor-icons/react/dist/csr/User';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { useRoomName } from '$hooks/useRoomMeta';
 import { getRoomAvatarUrl } from '$utils/room';
@@ -27,6 +28,7 @@ import {
   mutedCallRoomIdAtom,
 } from '$state/callEmbed';
 import { createDebugLogger } from '$utils/debugLogger';
+import { PhosphorIcon } from '$components/PhosphorIcon';
 import { RoomAvatar } from './room-avatar';
 
 const debugLog = createDebugLogger('IncomingCall');
@@ -84,7 +86,7 @@ export function IncomingCallInternal({ room, onClose }: IncomingCallInternalProp
           <Text size="H4">Incoming Call</Text>
         </Box>
         <IconButton size="300" onClick={onClose} radii="300">
-          <Icon src={Icons.Cross} />
+          <PhosphorIcon as={XIcon} />
         </IconButton>
       </Header>
 
@@ -94,7 +96,7 @@ export function IncomingCallInternal({ room, onClose }: IncomingCallInternalProp
             roomId={room.roomId}
             src={avatarUrl ?? undefined}
             alt={roomName}
-            renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+            renderFallback={() => <PhosphorIcon size="200" as={UserIcon} weight="fill" />}
           />
         </Avatar>
 
@@ -121,7 +123,7 @@ export function IncomingCallInternal({ room, onClose }: IncomingCallInternalProp
             variant="Primary"
             style={{ minWidth: '110px' }}
             onClick={handleAnswer}
-            before={<Icon size="100" src={Icons.Phone} />}
+            before={<PhosphorIcon size="100" as={PhoneIcon} />}
           >
             <Text size="B400">Answer</Text>
           </Button>

src/app/components/JoinRulesSwitcher.tsx

@@ -1,37 +1,27 @@
-import { MouseEventHandler, useCallback, useMemo, useState } from 'react';
-import {
-  config,
-  Box,
-  MenuItem,
-  Text,
-  Icon,
-  Icons,
-  IconSrc,
-  RectCords,
-  PopOut,
-  Menu,
-  Button,
-  Spinner,
-} from 'folds';
+import { ComponentType, MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import { config, Box, MenuItem, Text, RectCords, PopOut, Menu, Button, Spinner } from 'folds';
+import type { IconProps } from '@phosphor-icons/react';
+import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown';
+import { PhosphorIcon } from '$components/PhosphorIcon';
 import { JoinRule } from '$types/matrix-sdk';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '$utils/keyboard';
-import { getRoomIconSrc } from '$utils/room';
+import { getRoomIcon } from '$utils/room';
 
 export type ExtraJoinRules = 'knock_restricted';
 export type ExtendedJoinRules = JoinRule | ExtraJoinRules;
 
-type JoinRuleIcons = Record<ExtendedJoinRules, IconSrc>;
+type JoinRuleIcons = Record<ExtendedJoinRules, ComponentType<IconProps>>;
 
 export const useJoinRuleIcons = (roomType?: string): JoinRuleIcons =>
   useMemo(
     () => ({
-      [JoinRule.Invite]: getRoomIconSrc(Icons, roomType, JoinRule.Invite),
-      [JoinRule.Knock]: getRoomIconSrc(Icons, roomType, JoinRule.Knock),
-      knock_restricted: getRoomIconSrc(Icons, roomType, JoinRule.Restricted),
-      [JoinRule.Restricted]: getRoomIconSrc(Icons, roomType, JoinRule.Restricted),
-      [JoinRule.Public]: getRoomIconSrc(Icons, roomType, JoinRule.Public),
-      [JoinRule.Private]: getRoomIconSrc(Icons, roomType, JoinRule.Private),
+      [JoinRule.Invite]: getRoomIcon(roomType, JoinRule.Invite),
+      [JoinRule.Knock]: getRoomIcon(roomType, JoinRule.Knock),
+      knock_restricted: getRoomIcon(roomType, JoinRule.Restricted),
+      [JoinRule.Restricted]: getRoomIcon(roomType, JoinRule.Restricted),
+      [JoinRule.Public]: getRoomIcon(roomType, JoinRule.Public),
+      [JoinRule.Private]: getRoomIcon(roomType, JoinRule.Private),
     }),
     [roomType]
   );
@@ -108,7 +98,7 @@ export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
                   radii="300"
                   aria-pressed={value === rule}
                   onClick={() => handleChange(rule)}
-                  before={<Icon size="100" src={icons[rule]} />}
+                  before={<PhosphorIcon size="100" as={icons[rule]} />}
                   disabled={disabled}
                 >
                   <Box grow="Yes">
@@ -127,12 +117,12 @@ export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
         fill="Soft"
         radii="300"
         outlined
-        before={<Icon size="100" src={icons[value] ?? icons[JoinRule.Restricted]} />}
+        before={<PhosphorIcon size="100" as={icons[value] ?? icons[JoinRule.Restricted]} />}
         after={
           changing ? (
             <Spinner size="100" variant="Secondary" fill="Soft" />
           ) : (
-            <Icon size="100" src={Icons.ChevronBottom} />
+            <PhosphorIcon size="100" as={CaretDownIcon} />
           )
         }
         onClick={handleOpenMenu}

src/app/components/ManualVerification.tsx

@@ -1,23 +1,13 @@
 import { MouseEventHandler, ReactNode, useCallback, useState } from 'react';
-import {
-  Box,
-  Text,
-  Chip,
-  Icon,
-  Icons,
-  RectCords,
-  PopOut,
-  Menu,
-  config,
-  MenuItem,
-  color,
-} from 'folds';
+import { Box, Text, Chip, RectCords, PopOut, Menu, config, MenuItem, color } from 'folds';
 import FocusTrap from 'focus-trap-react';
+import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown';
 import { SecretStorageKeyContent } from '$types/matrix/accountData';
 import { storePrivateKey } from '$client/secretStorageKeys';
 import { stopPropagation } from '$utils/keyboard';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
+import { PhosphorIcon } from '$components/PhosphorIcon';
 import { SettingTile } from './setting-tile';
 import { SecretStorageRecoveryKey, SecretStorageRecoveryPassphrase } from './SecretStorage';
 
@@ -51,7 +41,7 @@ export function ManualVerificationMethodSwitcher({
         variant="Secondary"
         fill="Soft"
         radii="Pill"
-        before={<Icon size="100" src={Icons.ChevronBottom} />}
+        before={<PhosphorIcon size="100" as={CaretDownIcon} />}
         onClick={handleMenu}
       >
         <Text as="span" size="B300">