Migrate app icons to Phosphor

.changeset/migrate-icons-to-phosphor.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Migrate the app icon API to Phosphor-backed icons.

src/app/components/icons/phosphor.tsx

@@ -13,6 +13,7 @@ import {
   BellIcon,
   BellRingingIcon,
   BellSlashIcon,
+  BookmarkIcon,
   CaretDownIcon,
   CaretLeftIcon,
   CaretRightIcon,
@@ -243,6 +244,7 @@ export {
   BellIcon as Bell,
   BellRingingIcon as BellRinging,
   BellSlashIcon as BellSlash,
+  BookmarkIcon as Bookmark,
   CaretDownIcon as CaretDown,
   CaretLeftIcon as CaretLeft,
   CaretRightIcon as CaretRight,

src/app/features/message-search/MessageSearch.tsx

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Text, Box, config, Icon, Icons, Spinner, IconButton, Line, toRem } from 'folds';
+import { Text, Box, config, Spinner, IconButton, Line, toRem } from 'folds';
 import { CaretUp, ChatCircle, dropzoneIcon, sizedIcon, Info } from '$components/icons/phosphor';
 import { useAtomValue } from 'jotai';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -320,7 +320,7 @@ export function MessageSearch({
           alignItems="Center"
           gap="200"
         >
-          <Icon size="200" src={Icons.Info} />
+          {sizedIcon(Info, '200')}
           <Text size="T300">
             {`${inMemoryRoomCount} ${inMemoryRoomCount === 1 ? 'room' : 'rooms'} searched from local cache only.`}
           </Text>

src/app/features/message-search/SearchFilters.tsx

@@ -1,12 +1,10 @@
 import type { ChangeEventHandler, MouseEventHandler } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { IconSrc, RectCords } from 'folds';
+import type { RectCords } from 'folds';
 import {
   Avatar,
   Box,
   Chip,
-  Icon,
-  Icons,
   Text,
   Line,
   config,
@@ -23,7 +21,23 @@ import {
 import type { RoomMember } from '$types/matrix-sdk';
 import FocusTrap from 'focus-trap-react';
 import { getRoomIconComponent } from '$components/icons/roomIcons';
-import { Check, Lock, sizedIcon, PlusCircle, SortAscending, X } from '$components/icons/phosphor';
+import type { PhosphorIcon } from '$components/icons/phosphor';
+import {
+  Check,
+  Clock,
+  File,
+  Hash,
+  Image,
+  Link,
+  Lock,
+  Play,
+  sizedIcon,
+  PlusCircle,
+  SortAscending,
+  SpeakerHigh,
+  User,
+  X,
+} from '$components/icons/phosphor';
 import { SearchOrderBy } from '$types/matrix-sdk';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useMatrixClient } from '$hooks/useMatrixClient';
@@ -103,7 +117,7 @@ function GroupButton({ grouped = true, onChange }: GroupButtonProps) {
         onClick={handleOpenMenu}
         variant="SurfaceVariant"
         radii="Pill"
-        before={<Icon size="100" src={grouped ? Icons.Hash : Icons.Clock} />}
+        before={sizedIcon(grouped ? Hash : Clock, '100')}
       >
         <Text size="T200">{grouped ? 'Grouped' : 'Timeline'}</Text>
       </Chip>
@@ -404,12 +418,12 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
   );
 }
 
-const HAS_FILTER_OPTIONS: { type: SearchHasType; label: string; icon: IconSrc }[] = [
-  { type: 'image', label: 'Image', icon: Icons.Photo },
-  { type: 'file', label: 'File', icon: Icons.File },
-  { type: 'audio', label: 'Audio', icon: Icons.VolumeHigh },
-  { type: 'video', label: 'Video', icon: Icons.Play },
-  { type: 'link', label: 'Link', icon: Icons.Link },
+const HAS_FILTER_OPTIONS: { type: SearchHasType; label: string; icon: PhosphorIcon }[] = [
+  { type: 'image', label: 'Image', icon: Image },
+  { type: 'file', label: 'File', icon: File },
+  { type: 'audio', label: 'Audio', icon: SpeakerHigh },
+  { type: 'video', label: 'Video', icon: Play },
+  { type: 'link', label: 'Link', icon: Link },
 ];
 
 type HasFilterChipsProps = {
@@ -435,7 +449,7 @@ function HasFilterChips({ hasTypes, onChange }: HasFilterChipsProps) {
             key={type}
             variant={active ? 'Success' : 'Surface'}
             aria-pressed={active}
-            before={active ? <Icon size="100" src={Icons.Check} /> : <Icon size="100" src={icon} />}
+            before={active ? sizedIcon(Check, '100') : sizedIcon(icon, '100')}
             outlined
             onClick={() => toggle(type)}
           >
@@ -609,7 +623,7 @@ function SelectSenderButton({ roomList, selectedSenders, onChange }: SelectSende
                                       : undefined
                                   }
                                   alt={getMemberDisplayName(member)}
-                                  renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                                  renderFallback={() => sizedIcon(User, '50', { filled: true })}
                                 />
                               </Avatar>
                             }
@@ -638,7 +652,7 @@ function SelectSenderButton({ roomList, selectedSenders, onChange }: SelectSende
         onClick={handleOpenMenu}
         variant="SurfaceVariant"
         radii="Pill"
-        before={<Icon size="100" src={Icons.PlusCircle} />}
+        before={sizedIcon(PlusCircle, '100')}
       >
         <Text size="T200">Add Sender</Text>
       </Chip>
@@ -764,8 +778,8 @@ export function SearchFilters({
               onSendersChange(next.length > 0 ? next : undefined);
             }}
             radii="Pill"
-            before={<Icon size="50" src={Icons.User} />}
-            after={<Icon size="50" src={Icons.Cross} />}
+            before={sizedIcon(User, '50')}
+            after={sizedIcon(X, '50')}
           >
             <Text size="T200">{mx.getUser(sender)?.displayName ?? sender}</Text>
           </Chip>

src/app/features/message-search/SearchResultTimelineItem.tsx

@@ -4,7 +4,7 @@ import type { IEventWithRoomId, Room } from '$types/matrix-sdk';
 import { JoinRule, RelationType, EventType } from '$types/matrix-sdk';
 import type { IImageContent } from '$types/matrix/common';
 import type { HTMLReactParserOptions } from 'html-react-parser';
-import { Avatar, Box, Chip, Icon, Icons, Text, config } from 'folds';
+import { Avatar, Box, Chip, Text, config } from 'folds';
 import type { Opts as LinkifyOpts } from 'linkifyjs';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import {
@@ -59,6 +59,7 @@ import { useSettingsLinkBaseUrl } from '$features/settings/useSettingsLinkBaseUr
 import { useSetting } from '$state/hooks/settings';
 import { settingsAtom } from '$state/settings';
 import type { ResultItem } from './useMessageSearch';
+import { Icon, Icons } from '$app/icons';
 
 type SearchResultTimelineItemProps = {
   room: Room;

src/app/features/room/PollCreator.tsx

@@ -5,9 +5,7 @@ import {
   Button,
   Dialog,
   Header,
-  Icon,
   IconButton,
-  Icons,
   Input,
   Overlay,
   OverlayBackdrop,
@@ -25,6 +23,7 @@ import {
 } from 'matrix-js-sdk/lib/@types/polls';
 import type { Room } from '$types/matrix-sdk';
 import { useMatrixClient } from '$hooks/useMatrixClient';
+import { Icon, Icons } from '$app/icons';
 
 const MIN_ANSWERS = 2;
 const MAX_ANSWERS = 20;

src/app/features/room/RoomInputTiptap.tsx

@@ -29,7 +29,7 @@ import { useCallback, useRef, useState } from 'react';
 import type { Editor as TiptapEditorInstance } from '@tiptap/core';
 import type { Room } from '$types/matrix-sdk';
 import { MsgType } from '$types/matrix-sdk';
-import { Box, Icon, IconButton, Icons, Text, config, color } from 'folds';
+import { Box, IconButton, Text, config, color } from 'folds';
 
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { useSetting } from '$state/hooks/settings';
@@ -51,6 +51,7 @@ import { TiptapMentionAutocomplete } from './tiptap-autocomplete/TiptapMentionAu
 import { TiptapRoomMentionAutocomplete } from './tiptap-autocomplete/TiptapRoomMentionAutocomplete';
 import { TiptapEmoticonAutocomplete } from './tiptap-autocomplete/TiptapEmoticonAutocomplete';
 import { mobileOrTablet } from '$utils/user-agent';
+import { Icon, Icons } from '$app/icons';
 
 // ─── Autocomplete detection ──────────────────────────────────────────────────
 

src/app/features/room/message/MobileMessageMenu.tsx

@@ -1,5 +1,5 @@
 import { createPortal } from 'react-dom';
-import { Icon, Icons, MenuItem, Text } from 'folds';
+import { MenuItem, Text } from 'folds';
 import * as messageCss from './styles.css';
 import type { MouseEventHandler, ReactNode, TouchEvent as ReactTouchEvent } from 'react';
 import { useEffect, useCallback, useRef, useState } from 'react';
@@ -29,6 +29,7 @@ import { useIsBookmarked, useBookmarkActions } from '$features/bookmarks/useBook
 import { useSetting } from '$state/hooks/settings';
 import { settingsAtom } from '$state/settings';
 import * as css from './MobileMessageMenu.css';
+import { Icon, Icons } from '$app/icons';
 
 export type MobileMessageMenuProps = {
   room: Room;

src/app/features/room/tiptap-autocomplete/TiptapMentionAutocomplete.tsx

@@ -1,6 +1,6 @@
 import type { KeyboardEvent as ReactKbEvent } from 'react';
 import { useEffect } from 'react';
-import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
+import { Avatar, MenuItem, Text } from 'folds';
 import type { Room, RoomMember } from '$types/matrix-sdk';
 import { useRoomMembers } from '$hooks/useRoomMembers';
 import { useMatrixClient } from '$hooks/useMatrixClient';
@@ -16,6 +16,7 @@ import { useAtomValue } from 'jotai';
 import { nicknamesAtom } from '$state/nicknames';
 import { KnownMembership } from '$types/matrix-sdk';
 import { TiptapAutocompleteMenu } from './TiptapAutocompleteMenu';
+import { Icon, Icons } from '$app/icons';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = { limit: 1000, matchOptions: { contain: true } };
 const mxIdToName = (id: string) => getMxIdLocalPart(id) ?? id;

src/app/features/settings/about/About.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Box, Text, Scroll, Button, config, Icon, Icons, toRem, Spinner } from 'folds';
+import { Box, Text, Scroll, Button, config, toRem, Spinner } from 'folds';
 import { Code, Heart, menuIcon } from '$components/icons/phosphor';
 import { PageContent } from '$components/page';
 import { SequenceCard } from '$components/sequence-card';
@@ -240,7 +240,7 @@ export function About({ requestBack, requestClose }: Readonly<AboutProps>) {
                       fill="Soft"
                       size="300"
                       radii="300"
-                      before={<Icon src={Icons.Code} size="100" filled />}
+                      before={menuIcon(Code, { weight: 'fill' })}
                     >
                       <Text size="B300">Upstream</Text>
                     </Button>

src/app/features/settings/cosmetics/Themes.tsx

@@ -5,8 +5,6 @@ import {
   Button,
   Chip,
   config,
-  Icon,
-  Icons,
   Input,
   Menu,
   MenuItem,
@@ -40,6 +38,7 @@ import { useShowRoomIcon } from '$hooks/useShowRoomIcon';
 import type { PanelSizetItem } from '$hooks/usePanelSizes';
 import { usePanelSizeItems } from '$hooks/usePanelSizes';
 import { SelectShowPerRoomRoomIcon } from '$features/common-settings/appearance/Appearance';
+import { Icon, Icons } from '$app/icons';
 
 const clampIncomingInlineImageHeight = (n: number) => Math.max(1, Math.min(4096, n));
 

src/app/features/settings/notifications/SystemNotification.tsx

@@ -7,9 +7,7 @@ import {
   Button,
   color,
   config,
-  Icon,
   IconButton,
-  Icons,
   Input,
   Menu,
   MenuItem,
@@ -68,6 +66,7 @@ import {
   setUnifiedPushDistributorSelection,
   switchUnifiedPushDistributorSelection,
 } from './UnifiedPushTransport';
+import { Icon, Icons } from '$app/icons';
 
 type BackgroundPushKind = NotificationTransportProvider;
 type BackgroundPushPlatform = NotificationTransportPlatform;