Add icons to component context

Author: arnautov-anton

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, SharedLocationResponse } from 'stream-chat';
-import { useChatContext, useTranslationContext } from '../../context';
+import {
+  useChatContext,
+  useComponentContext,
+  useTranslationContext,
+} from '../../context';
 import { ExternalLinkIcon } from './icons';
-import { IconLocation } from '../Icons';
+import { IconLocation as DefaultIconLocation } from '../Icons';
 import { Button } from '../Button';
 
 export type GeolocationMapProps = Coords;
@@ -102,6 +106,7 @@ const DefaultGeolocationAttachmentMapPlaceholder = ({
   location,
 }: GeolocationAttachmentMapPlaceholderProps) => {
   const { t } = useTranslationContext();
+  const { icons: { IconLocation = DefaultIconLocation } = {} } = useComponentContext();
 
   return (
     <div

src/components/Attachment/Giphy.tsx

@@ -8,7 +8,7 @@ import {
   useComponentContext,
   useTranslationContext,
 } from '../../context';
-import { IconGiphy } from '../Icons';
+import { IconGiphy as DefaultIconGiphy } from '../Icons';
 import { type CSSProperties, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { ImageAttachmentConfiguration } from '../../types/types';
 
@@ -78,9 +78,12 @@ export const Giphy = ({ attachment }: GiphyAttachmentProps) => {
   );
 };
 
-const GiphyBadge = () => (
-  <div className='str-chat__giphy-badge'>
-    <IconGiphy />
-    Giphy
-  </div>
-);
+const GiphyBadge = () => {
+  const { icons: { IconGiphy = DefaultIconGiphy } = {} } = useComponentContext();
+  return (
+    <div className='str-chat__giphy-badge'>
+      <IconGiphy />
+      Giphy
+    </div>
+  );
+};

src/components/Attachment/LinkPreview/Card.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import { BaseImage } from '../../BaseImage';
 import { SafeAnchor } from '../../SafeAnchor';
 import { useChannelStateContext } from '../../../context/ChannelStateContext';
+import { useComponentContext } from '../../../context';
 
 import type { Attachment } from 'stream-chat';
 import type { RenderAttachmentProps } from '../utils';
 import type { Dimensions } from '../../../types/types';
-import { IconLink } from '../../Icons';
+import { IconLink as DefaultIconLink } from '../../Icons';
 import { UnableToRenderCard } from './UnableToRenderCard';
 import clsx from 'clsx';
 
@@ -64,6 +65,7 @@ type CardContentProps = RenderAttachmentProps['attachment'];
 const CardContent = (props: CardContentProps) => {
   const { og_scrape_url, text, title, title_link } = props;
   const url = title_link || og_scrape_url;
+  const { icons: { IconLink = DefaultIconLink } = {} } = useComponentContext();
 
   return (
     <div className='str-chat__message-attachment-card--content'>

src/components/Attachment/LinkPreview/CardAudio.tsx

@@ -1,10 +1,10 @@
 import { type AudioPlayerState, ProgressBar, useAudioPlayer } from '../../AudioPlayback';
-import { useMessageContext } from '../../../context';
+import { useComponentContext, useMessageContext } from '../../../context';
 import { useStateStore } from '../../../store';
 import { PlayButton } from '../../Button';
 import type { AudioProps } from '../Audio';
 import React from 'react';
-import { IconLink } from '../../Icons';
+import { IconLink as DefaultIconLink } from '../../Icons';
 import { SafeAnchor } from '../../SafeAnchor';
 import type { CardProps } from './Card';
 
@@ -21,22 +21,25 @@ 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 { icons: { IconLink = DefaultIconLink } = {} } = useComponentContext();
+  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

@@ -8,7 +8,7 @@ import { Gallery as DefaultGallery, GalleryUI } from '../Gallery';
 import { LoadingIndicator } from '../Loading';
 import { GlobalModal, type ModalCloseSource } from '../Modal';
 import { useComponentContext, useTranslationContext } from '../../context';
-import { IconRetry } from '../Icons';
+import { IconRetry as DefaultIconRetry } from '../Icons';
 import { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';
 
 const MAX_VISIBLE_THUMBNAILS = 4;
@@ -144,6 +144,7 @@ const ThumbnailButton = ({
   showOverlay,
 }: ThumbnailButtonProps) => {
   const { t } = useTranslationContext();
+  const { icons: { IconRetry = DefaultIconRetry } = {} } = useComponentContext();
   const imageUrl = item.imageUrl;
   const [isLoadFailed, setIsLoadFailed] = useState(false);
   const [isImageLoading, setIsImageLoading] = useState(Boolean(imageUrl));

src/components/Attachment/UnsupportedAttachment.tsx

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

src/components/Attachment/VisibilityDisclaimer.tsx

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

src/components/Attachment/components/DownloadButton.tsx

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

src/components/Avatar/Avatar.tsx

@@ -6,10 +6,15 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { IconUser } from '../Icons';
+import { useComponentContext } from '../../context';
+import { IconUser as DefaultIconUser } from '../Icons';
 
 export type AvatarProps = {
-  /** Custom icon rendered when there is no image and no initials */
+  /**
+   * Custom icon rendered when there is no image and no initials.
+   * @deprecated Use the `icons.IconUser` slot on `ComponentContext` (via `<WithComponents overrides={{ icons: { IconUser: ... } }}>`) instead.
+   * Passing this prop still wins over the context slot for backwards compatibility.
+   */
   FallbackIcon?: ComponentType<ComponentPropsWithoutRef<'svg'>>;
   /** URL of the avatar image */
   imageUrl?: string;
@@ -46,13 +51,15 @@ const getInitials = (name?: string) => {
  */
 export const Avatar = ({
   className,
-  FallbackIcon = IconUser,
+  FallbackIcon,
   imageUrl,
   isOnline,
   size,
   userName,
   ...rest
 }: AvatarProps) => {
+  const { icons: { IconUser = DefaultIconUser } = {} } = useComponentContext();
+  const ResolvedFallbackIcon = FallbackIcon ?? IconUser;
   const [error, setError] = useState(false);
 
   useEffect(() => () => setError(false), [imageUrl]);
@@ -108,7 +115,7 @@ export const Avatar = ({
               {sizeAwareInitials}
             </div>
           )}
-          {!sizeAwareInitials.length && <FallbackIcon />}
+          {!sizeAwareInitials.length && <ResolvedFallbackIcon />}
         </>
       )}
     </div>

src/components/Badge/Badge.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { type ComponentProps } from 'react';
-import { IconExclamationMarkFill } from '../Icons';
+import { useComponentContext } from '../../context';
+import { IconExclamationMarkFill as DefaultIconExclamationMarkFill } from '../Icons';
 
 export type BadgeVariant =
   | 'default'
@@ -47,8 +48,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 { icons: { IconExclamationMarkFill = DefaultIconExclamationMarkFill } = {} } =
+    useComponentContext();
+  return (
+    <Badge {...rest} className={className} size={size} variant='error'>
+      <IconExclamationMarkFill />
+    </Badge>
+  );
+};