feat(Icons): migrate SDK icons to Phosphor icon set

examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx

@@ -8,13 +8,13 @@ import {
   IconArrowRight,
   Button,
   DialogAnchor,
-  IconArrowRotateRightLeftRepeatRefresh,
+  IconRefresh,
   IconArrowUp,
-  IconCheckmark2,
-  IconCircleInfoTooltip,
+  IconCheckmark,
+  IconInfo,
   IconClock,
-  IconCrossMedium,
-  IconExclamationCircle,
+  IconXmark,
+  IconExclamationMark,
   IconExclamationTriangle,
   IconPlusSmall,
   NumericInput,
@@ -50,10 +50,10 @@ const clamp = (value: number, min: number, max: number) => {
 const severityIcons: Partial<
   Record<NotificationSeverity, React.ComponentType<{ className?: string }>>
 > = {
-  error: IconExclamationCircle,
-  info: IconCircleInfoTooltip,
-  loading: IconArrowRotateRightLeftRepeatRefresh,
-  success: IconCheckmark2,
+  error: IconExclamationMark,
+  info: IconInfo,
+  loading: IconRefresh,
+  success: IconCheckmark,
   warning: IconExclamationTriangle,
 };
 
@@ -148,7 +148,7 @@ const NotificationChipList = ({
             size='xs'
             variant='secondary'
           >
-            <IconCrossMedium />
+            <IconXmark />
           </Button>
         </div>
       );

examples/vite/src/AppSettings/AppSettings.tsx

@@ -3,8 +3,8 @@ import {
   ChatViewSelectorButton,
   GlobalModal,
   IconBubble3ChatMessage,
-  IconBellNotification,
-  IconEmojiSmile,
+  IconBell,
+  IconEmoji,
   IconLightBulbSimple,
   IconSettingsGear2,
 } from 'stream-chat-react';
@@ -18,9 +18,9 @@ import { appSettingsStore, useAppSettingsState } from './state';
 type TabId = 'notifications' | 'reactions' | 'sidebar';
 
 const tabConfig: { Icon: ComponentType; id: TabId; title: string }[] = [
-  { Icon: IconBellNotification, id: 'notifications', title: 'Notifications' },
+  { Icon: IconBell, id: 'notifications', title: 'Notifications' },
   { Icon: IconBubble3ChatMessage, id: 'sidebar', title: 'Sidebar' },
-  { Icon: IconEmojiSmile, id: 'reactions', title: 'Reactions' },
+  { Icon: IconEmoji, id: 'reactions', title: 'Reactions' },
 ];
 
 const SidebarThemeToggle = ({ iconOnly = true }: { iconOnly?: boolean }) => {

src/components/Attachment/Geolocation.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import type { Coords, SharedLocationResponse } from 'stream-chat';
 import { useChatContext, useTranslationContext } from '../../context';
 import { ExternalLinkIcon } from './icons';
-import { IconMapPin } from '../Icons';
+import { IconLocation } from '../Icons';
 import { Button } from '../Button';
 
 export type GeolocationMapProps = Coords;
@@ -105,7 +105,7 @@ const DefaultGeolocationAttachmentMapPlaceholder = ({
     className='str-chat__message-attachment-geolocation__placeholder'
     data-testid='geolocation-attachment-map-placeholder'
   >
-    <IconMapPin />
+    <IconLocation />
     <a
       className='str-chat__message-attachment-geolocation__placeholder-link'
       href={`https://maps.google.com?q=${[location.latitude, location.longitude].join()}`}

src/components/Attachment/LinkPreview/Card.tsx

@@ -6,7 +6,7 @@ import { useChannelStateContext } from '../../../context/ChannelStateContext';
 import type { Attachment } from 'stream-chat';
 import type { RenderAttachmentProps } from '../utils';
 import type { Dimensions } from '../../../types/types';
-import { IconChainLink } from '../../Icons';
+import { IconLink } from '../../Icons';
 import { UnableToRenderCard } from './UnableToRenderCard';
 import clsx from 'clsx';
 
@@ -74,7 +74,7 @@ const CardContent = (props: CardContentProps) => {
           className='str-chat__message-attachment-card--source-link'
           data-testid='card-source-link'
         >
-          <IconChainLink />
+          <IconLink />
           <div className='str-chat__message-attachment-card--url'>{url}</div>
         </div>
       )}

src/components/Attachment/LinkPreview/CardAudio.tsx

@@ -4,7 +4,7 @@ import { useStateStore } from '../../../store';
 import { PlayButton } from '../../Button';
 import type { AudioProps } from '../Audio';
 import React from 'react';
-import { IconChainLink } from '../../Icons';
+import { IconLink } from '../../Icons';
 import { SafeAnchor } from '../../SafeAnchor';
 import type { CardProps } from './Card';
 
@@ -26,7 +26,7 @@ const SourceLink = ({
     className='str-chat__message-attachment-card--source-link'
     data-testid='card-source-link'
   >
-    <IconChainLink />
+    <IconLink />
     <SafeAnchor
       className='str-chat__message-attachment-card--url'
       href={url}

src/components/Attachment/ModalGallery.tsx

@@ -8,7 +8,7 @@ import { Gallery as DefaultGallery, GalleryUI } from '../Gallery';
 import { LoadingIndicator } from '../Loading';
 import { GlobalModal } from '../Modal';
 import { useComponentContext, useTranslationContext } from '../../context';
-import { IconArrowRotateClockwise } from '../Icons';
+import { IconRetry } from '../Icons';
 import { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';
 
 const MAX_VISIBLE_THUMBNAILS = 4;
@@ -216,7 +216,7 @@ const ThumbnailButton = ({
           data-testid='str-chat__modal-gallery__image-load-failed-overlay'
         >
           <div className='str-chat__modal-gallery__image-retry-indicator'>
-            <IconArrowRotateClockwise />
+            <IconRetry />
           </div>
         </div>
       )}