feat: add icons to ComponentContext adapted to stream-chat-react@15

src/components/Attachment/Geolocation.tsx

@@ -3,9 +3,13 @@ import { useEffect } from 'react';
 import { useRef, useState } from 'react';
 import React from 'react';
 import type { Coords, SharedLocationResponseData } from 'stream-chat';
-import { useChannel, useChatContext, useTranslationContext } from '../../context';
+import {
+  useChannel,
+  useChatContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../context';
 import { ExternalLinkIcon } from './icons';
-import { IconLocation } from '../Icons';
 import { Button } from '../Button';
 import { convertTimestampToDate, nowNs, nsToMs } from 'stream-chat';
 
@@ -141,6 +145,7 @@ export type GeolocationAttachmentMapPlaceholderProps = {
 const DefaultGeolocationAttachmentMapPlaceholder = ({
   location,
 }: GeolocationAttachmentMapPlaceholderProps) => {
+  const { IconLocation } = useComponentContextIcons();
   const { t } = useTranslationContext();
 
   return (

src/components/Attachment/Giphy.tsx

@@ -3,8 +3,11 @@ import { BaseImage as DefaultBaseImage } from '../BaseImage';
 import { toGalleryItemDescriptors } from '../Gallery';
 import { getGiphyDescriptiveTitle } from './giphyAccessibility';
 import clsx from 'clsx';
-import { useComponentContext, useTranslationContext } from '../../context';
-import { IconGiphy } from '../Icons';
+import {
+  useComponentContext,
+  useComponentContextIcons,
+  useTranslationContext,
+} from '../../context';
 import { type CSSProperties, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import {
   type ImageAttachmentConfiguration,
@@ -79,9 +82,13 @@ export const Giphy = ({ attachment }: GiphyAttachmentProps) => {
   );
 };
 
-const GiphyBadge = () => (
-  <div className='str-chat__giphy-badge'>
-    <IconGiphy />
-    Giphy
-  </div>
-);
+const GiphyBadge = () => {
+  const { IconGiphy } = useComponentContextIcons();
+
+  return (
+    <div className='str-chat__giphy-badge'>
+      <IconGiphy />
+      Giphy
+    </div>
+  );
+};

src/components/Attachment/LinkPreview/Card.tsx

@@ -6,9 +6,9 @@ import { useAttachmentContext } from '../../../context/AttachmentContext';
 import type { Attachment } from 'stream-chat';
 import type { RenderAttachmentProps } from '../utils';
 import type { Dimensions } from '../../../types/types';
-import { IconLink } from '../../Icons';
 import { UnableToRenderCard } from './UnableToRenderCard';
 import clsx from 'clsx';
+import { useComponentContextIcons } from '../../../context';
 
 type CardRootProps = {
   cardUrl: string | undefined;
@@ -62,6 +62,7 @@ const CardHeader = (props: CardHeaderProps) => {
 type CardContentProps = RenderAttachmentProps['attachment'];
 
 const CardContent = (props: CardContentProps) => {
+  const { IconLink } = useComponentContextIcons();
   const { og_scrape_url, text, title, title_link } = props;
   const url = title_link || og_scrape_url;
 

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, { useContext } from 'react';
-import { IconLink } from '../../Icons';
+import { useComponentContextIcons } from '../../../context';
 import { SafeAnchor } from '../../SafeAnchor';
 import type { CardProps } from './Card';
 import { useThreadContext } from '../../Threads';
@@ -22,22 +22,26 @@ const SourceLink = ({
   author_name,
   showUrl,
   url,
-}: Pick<CardProps, 'author_name'> & { url: string; showUrl?: boolean }) => (
-  <div
-    className='str-chat__message-attachment-card--source-link'
-    data-testid='card-source-link'
-  >
-    <IconLink />
-    <SafeAnchor
-      className='str-chat__message-attachment-card--url'
-      href={url}
-      rel='noopener noreferrer'
-      target='_blank'
+}: Pick<CardProps, 'author_name'> & { url: string; showUrl?: boolean }) => {
+  const { IconLink } = useComponentContextIcons();
+
+  return (
+    <div
+      className='str-chat__message-attachment-card--source-link'
+      data-testid='card-source-link'
     >
-      {showUrl ? url : author_name || getHostFromURL(url)}
-    </SafeAnchor>
-  </div>
-);
+      <IconLink />
+      <SafeAnchor
+        className='str-chat__message-attachment-card--url'
+        href={url}
+        rel='noopener noreferrer'
+        target='_blank'
+      >
+        {showUrl ? url : author_name || getHostFromURL(url)}
+      </SafeAnchor>
+    </div>
+  );
+};
 
 const audioPlayerStateSelector = (state: AudioPlayerState) => ({
   durationSeconds: state.durationSeconds,

src/components/Attachment/ModalGallery.tsx

@@ -11,9 +11,9 @@ import { GlobalModal, type ModalCloseSource } from '../Modal';
 import {
   MessageContext,
   useComponentContext,
+  useComponentContextIcons,
   useTranslationContext,
 } from '../../context';
-import { IconRetry } from '../Icons';
 import { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';
 
 const MAX_VISIBLE_THUMBNAILS = 4;
@@ -160,6 +160,7 @@ const ThumbnailButton = ({
   overflowCount,
   showOverlay,
 }: ThumbnailButtonProps) => {
+  const { IconRetry } = useComponentContextIcons();
   const { t } = useTranslationContext();
   const imageUrl = item.imageUrl;
   const [isLoadFailed, setIsLoadFailed] = useState(false);

src/components/Attachment/UnsupportedAttachment.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import type { Attachment } from 'stream-chat';
-import { useTranslationContext } from '../../context';
-import { IconUnsupportedAttachment } from '../Icons';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 
 export type UnsupportedAttachmentProps = {
   attachment: Attachment;
 };
 
 export const UnsupportedAttachment = () => {
+  const { IconUnsupportedAttachment } = useComponentContextIcons();
   const { t } = useTranslationContext();
   return (
     <div

src/components/Attachment/VisibilityDisclaimer.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { IconEyeFill } from '../Icons';
-import { useTranslationContext } from '../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 
 export const VisibilityDisclaimer = () => {
+  const { IconEyeFill } = useComponentContextIcons();
   const { t } = useTranslationContext();
   return (
     <div className='str-chat__visibility-disclaimer'>

src/components/Attachment/__tests__/Giphy.test.tsx

@@ -11,31 +11,37 @@ const { channelStateMock } = vi.hoisted(() => ({
   },
 }));
 
-vi.mock('../../../context', () => ({
-  useChannelStateContext: () => channelStateMock,
-  useComponentContext: () => ({}),
-  useTranslationContext: () => ({
-    t: (key: string, second?: unknown, third?: unknown) => {
-      const defaultValue = typeof second === 'string' ? second : undefined;
-      const options = ((typeof second === 'object' ? second : third) ?? {}) as Record<
-        string,
-        unknown
-      >;
-      let template = defaultValue;
-      if (template === undefined && typeof options.count === 'number') {
-        template = (
-          options.count === 1 ? options.defaultValue_one : options.defaultValue_other
-        ) as string | undefined;
-      }
-      template ??= options.defaultValue as string | undefined;
-      template ??= key;
-      return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (whole, name: string) => {
-        const value = options[name];
-        return value === undefined || value === null ? whole : String(value);
-      });
-    },
-  }),
-}));
+vi.mock('../../../context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../context')>();
+  return {
+    useChannelStateContext: () => channelStateMock,
+    useComponentContext: () => ({}),
+    // The real hook: with no provider it returns the SDK icons, which is what these
+    // assertions are written against.
+    useComponentContextIcons: actual.useComponentContextIcons,
+    useTranslationContext: () => ({
+      t: (key: string, second?: unknown, third?: unknown) => {
+        const defaultValue = typeof second === 'string' ? second : undefined;
+        const options = ((typeof second === 'object' ? second : third) ?? {}) as Record<
+          string,
+          unknown
+        >;
+        let template = defaultValue;
+        if (template === undefined && typeof options.count === 'number') {
+          template = (
+            options.count === 1 ? options.defaultValue_one : options.defaultValue_other
+          ) as string | undefined;
+        }
+        template ??= options.defaultValue as string | undefined;
+        template ??= key;
+        return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (whole, name: string) => {
+          const value = options[name];
+          return value === undefined || value === null ? whole : String(value);
+        });
+      },
+    }),
+  };
+});
 
 describe('Giphy accessible name', () => {
   it('uses the giphy title as the image accessible name', () => {

src/components/Attachment/components/DownloadButton.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
-import { useTranslationContext } from '../../../context';
-import { IconDownload } from '../../Icons';
+import { useComponentContextIcons, useTranslationContext } from '../../../context';
 
 export type DownloadButtonProps = {
   /** Attachment asset URL (e.g. `asset_url`). */
@@ -25,6 +24,7 @@ export const DownloadButton = ({
   suggestedFileName,
   tooltipTitle,
 }: DownloadButtonProps) => {
+  const { IconDownload } = useComponentContextIcons();
   const { t } = useTranslationContext();
   if (!assetUrl) return null;
   const href = sanitizeUrl(assetUrl);

src/components/Avatar/Avatar.tsx

@@ -6,7 +6,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { IconUser } from '../Icons';
+import { useComponentContextIcons } from '../../context';
 
 export type AvatarProps = {
   /** Custom icon rendered when there is no image and no initials */
@@ -51,14 +51,17 @@ const getInitials = (name?: string) => {
  */
 export const Avatar = ({
   className,
-  FallbackIcon = IconUser,
+  FallbackIcon,
   imageUrl,
   initials: customInitials,
   isOnline,
   size,
   userName,
   ...rest
 }: AvatarProps) => {
+  const { IconUser } = useComponentContextIcons();
+  // The prop still wins over the context slot: it targets one avatar, the slot rebrands all of them.
+  const ResolvedFallbackIcon = FallbackIcon ?? IconUser;
   const [error, setError] = useState(false);
 
   useEffect(() => () => setError(false), [imageUrl]);
@@ -113,7 +116,7 @@ export const Avatar = ({
               {sizeAwareInitials}
             </div>
           )}
-          {!sizeAwareInitials.length && <FallbackIcon />}
+          {!sizeAwareInitials.length && <ResolvedFallbackIcon />}
         </>
       )}
     </div>

src/components/Badge/Badge.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, { type ComponentProps } from 'react';
-import { IconExclamationMarkFill } from '../Icons';
+import { useComponentContextIcons } from '../../context';
 
 export type BadgeVariant =
   | 'default'
@@ -47,8 +47,12 @@ export const ErrorBadge = ({
   className,
   size = 'sm',
   ...rest
-}: Omit<BadgeProps, 'variant'>) => (
-  <Badge {...rest} className={className} size={size} variant='error'>
-    <IconExclamationMarkFill />
-  </Badge>
-);
+}: Omit<BadgeProps, 'variant'>) => {
+  const { IconExclamationMarkFill } = useComponentContextIcons();
+
+  return (
+    <Badge {...rest} className={className} size={size} variant='error'>
+      <IconExclamationMarkFill />
+    </Badge>
+  );
+};

src/components/Badge/MediaBadge.tsx

@@ -1,4 +1,4 @@
-import { IconMicrophoneSolid, IconVideoFill } from '../Icons';
+import { useComponentContextIcons } from '../../context';
 import React, { type ComponentType } from 'react';
 import type { LocalAttachment, LocalVoiceRecordingAttachment } from 'stream-chat';
 import clsx from 'clsx';
@@ -10,12 +10,14 @@ export type MediaBadgeProps = {
   variant: 'video' | 'voice-recording' | string;
 };
 
-const MediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = {
-  video: IconVideoFill,
-  voiceRecording: IconMicrophoneSolid,
-};
-
 export const MediaBadge = ({ attachment, variant }: MediaBadgeProps) => {
+  const { IconMicrophoneSolid, IconVideoFill } = useComponentContextIcons();
+
+  const MediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = {
+    video: IconVideoFill,
+    voiceRecording: IconMicrophoneSolid,
+  };
+
   const Icon = MediaBadgeVariantToIcon[variant];
   const { duration } = (attachment as LocalVoiceRecordingAttachment).custom ?? {};
   return (

src/components/BaseImage/ImagePlaceholder.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import clsx from 'clsx';
 import { useTranslationContext } from '../../context/TranslationContext';
-import { IconImage } from '../Icons';
+import { useComponentContextIcons } from '../../context';
 
 export type ImagePlaceholderProps = {
   className?: string;
 };
 
 export const ImagePlaceholder = ({ className }: ImagePlaceholderProps) => {
   const { t } = useTranslationContext();
+  const { IconImage } = useComponentContextIcons();
+
   return (
     <div
       aria-label={t(

src/components/Button/PlayButton.tsx

@@ -2,15 +2,16 @@ import React from 'react';
 import { Button } from './Button';
 import type { ComponentProps } from 'react';
 import clsx from 'clsx';
-import { IconPauseFill, IconPlayFill } from '../Icons';
-import { useTranslationContext } from '../../context';
+import { useComponentContextIcons, useTranslationContext } from '../../context';
 
 export type PlayButtonProps = ComponentProps<'button'> & {
   isPlaying: boolean;
 };
 
 export const PlayButton = ({ className, isPlaying, ...props }: PlayButtonProps) => {
   const { t } = useTranslationContext();
+  const { IconPauseFill, IconPlayFill } = useComponentContextIcons();
+
   return (
     <Button
       appearance='outline'