stream-chat-react-native-core 9.6.2-beta.5 → 9.7.0-beta.1

package/src/components/Attachment/FileIcon.tsx

@@ -1,18 +1,9 @@
 import React from 'react';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import type { IconsMap } from '../../contexts/componentsContext/defaultComponents';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import { Audio } from '../../icons/filetype-audio-xl';
-import { Code } from '../../icons/filetype-code-xl';
-import { ZIP } from '../../icons/filetype-compression-xl';
-import { OtherFileIcon } from '../../icons/filetype-other-xl';
-import { PDF } from '../../icons/filetype-pdf-xl';
-import { Presentation } from '../../icons/filetype-presentation-xl';
-import { SpreadSheet } from '../../icons/filetype-spreadsheet-xl';
-import { DOC } from '../../icons/filetype-text-xl';
-import { Video } from '../../icons/filetype-video-xl';
-import type { IconProps } from '../../icons/utils/base';
-
 // https://www.iana.org/assignments/media-types/media-types.xhtml#audio
 const audioFileTypes = [
   'audio/1d-interleaved-parityfec',
@@ -349,49 +340,49 @@ const codeFileTypes = [
   'text/plain',
 ];
 
-const mimeTypeToIconMap: Record<string, React.ComponentType<IconProps>> = {
-  'application/pdf': PDF, // .pdf
+const mimeTypeToIconKeyMap: Record<string, keyof IconsMap> = {
+  'application/pdf': 'PDF', // .pdf
 };
 
 for (const type of audioFileTypes) {
-  mimeTypeToIconMap[type] = Audio;
+  mimeTypeToIconKeyMap[type] = 'Audio';
 }
 
 for (const type of docMimeTypes) {
-  mimeTypeToIconMap[type] = DOC;
+  mimeTypeToIconKeyMap[type] = 'DOC';
 }
 
 for (const type of excelMimeTypes) {
-  mimeTypeToIconMap[type] = SpreadSheet;
+  mimeTypeToIconKeyMap[type] = 'SpreadSheet';
 }
 
 for (const type of powerpointMimeTypes) {
-  mimeTypeToIconMap[type] = Presentation;
+  mimeTypeToIconKeyMap[type] = 'Presentation';
 }
 
 for (const type of zipFileTypes) {
-  mimeTypeToIconMap[type] = ZIP;
+  mimeTypeToIconKeyMap[type] = 'ZIP';
 }
 
 for (const type of videoFileTypes) {
-  mimeTypeToIconMap[type] = Video;
+  mimeTypeToIconKeyMap[type] = 'Video';
 }
 
 for (const type of codeFileTypes) {
-  mimeTypeToIconMap[type] = Code;
+  mimeTypeToIconKeyMap[type] = 'Code';
 }
 
-function mimeTypeToIcon(mimeType?: string): React.ComponentType<IconProps> {
+function mimeTypeToIconKey(mimeType?: string): keyof IconsMap {
   if (!mimeType) {
-    return OtherFileIcon;
+    return 'OtherFileIcon';
   }
 
-  const Icon = mimeTypeToIconMap[mimeType];
-  if (Icon) {
-    return Icon;
+  const iconKey = mimeTypeToIconKeyMap[mimeType];
+  if (iconKey) {
+    return iconKey;
   }
 
-  return OtherFileIcon;
+  return 'OtherFileIcon';
 }
 
 export type FileIconProps = {
@@ -426,8 +417,9 @@ export const FileIcon = ({ mimeType, size = 'md' }: FileIconProps) => {
       },
     },
   } = useTheme();
+  const { icons } = useComponentsContext();
 
-  const Icon = mimeTypeToIcon(mimeType);
+  const Icon = icons[mimeTypeToIconKey(mimeType)];
 
   return <Icon {...(size ? sizeToNumber(size) : {})} {...icon} />;
 };

package/src/components/Attachment/Giphy/Giphy.tsx

@@ -5,6 +5,7 @@ import type { Attachment } from 'stream-chat';
 
 import { GiphyImage } from './GiphyImage';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -16,7 +17,6 @@ import {
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
-import { EyeOpen } from '../../../icons/EyeOpen';
 import { components, primitives } from '../../../theme';
 import { Button } from '../../ui/';
 
@@ -43,6 +43,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
 
   const { actions, image_url, thumb_url } = attachment;
 
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
 
   const {
@@ -68,7 +69,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
       testID='giphy-action-attachment'
     >
       <View style={[styles.header, header]}>
-        <EyeOpen height={16} width={16} fill={semantics.chatTextOutgoing} />
+        <icons.EyeOpen height={16} width={16} fill={semantics.chatTextOutgoing} />
         <Text style={[styles.headerText, giphyHeaderText]}>{t('Only visible to you')}</Text>
       </View>
       <GiphyImage attachment={attachment} giphyVersion={giphyVersion} preview />

package/src/components/Attachment/UrlPreview/URLPreview.tsx

@@ -25,7 +25,6 @@ import {
   useMessagesContext,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Link } from '../../../icons/link';
 import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
 import { makeImageCompatibleUrl } from '../../../utils/utils';
@@ -67,6 +66,8 @@ const URLPreviewWithContext = (props: URLPreviewPropsWithContext) => {
     styles: stylesProp = {},
   } = props;
 
+  const { icons } = useComponentsContext();
+
   const {
     theme: { semantics },
   } = useTheme();
@@ -155,7 +156,7 @@ const URLPreviewWithContext = (props: URLPreviewPropsWithContext) => {
           </Text>
         ) : null}
         <View style={[styles.linkPreview, linkPreview, stylesProp.linkPreview]}>
-          <Link height={12} width={12} stroke={semantics.chatTextIncoming} />
+          <icons.Link height={12} width={12} stroke={semantics.chatTextIncoming} />
           <Text
             numberOfLines={1}
             style={[styles.linkPreviewText, linkPreviewText, stylesProp.linkPreviewText]}

package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx

@@ -25,7 +25,6 @@ import {
   useMessagesContext,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Link } from '../../../icons/link';
 import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
 import { makeImageCompatibleUrl } from '../../../utils/utils';
@@ -63,6 +62,8 @@ const URLPreviewCompactWithContext = (props: URLPreviewCompactPropsWithContext)
     styles: stylesProp = {},
   } = props;
 
+  const { icons } = useComponentsContext();
+
   const {
     theme: { semantics },
   } = useTheme();
@@ -157,7 +158,7 @@ const URLPreviewCompactWithContext = (props: URLPreviewCompactPropsWithContext)
             </Text>
           ) : null}
           <View style={[styles.linkPreview, linkPreview, stylesProp.linkPreview]}>
-            <Link height={12} width={12} stroke={semantics.chatTextIncoming} />
+            <icons.Link height={12} width={12} stroke={semantics.chatTextIncoming} />
             <Text
               numberOfLines={1}
               style={[styles.linkPreviewText, linkPreviewText, stylesProp.linkPreviewText]}

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx

@@ -5,9 +5,9 @@ import { renderAttachmentPickerItem } from './AttachmentPickerItem';
 import { IOS_LIMITED_DEEPLINK, type PhotoContentItemType } from './shared';
 
 import { useAttachmentPickerContext, useTheme, useTranslationContext } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 
 import { useStableCallback } from '../../../../hooks';
-import { Picture } from '../../../../icons';
 
 import { NativeHandlers } from '../../../../native';
 import { BottomSheetFlatList } from '../../../BottomSheetCompatibility/BottomSheetFlatList';
@@ -38,8 +38,9 @@ export const AttachmentMediaPickerIcon = () => {
   const {
     theme: { semantics },
   } = useTheme();
+  const { icons } = useComponentsContext();
 
-  return <Picture height={22} stroke={semantics.textTertiary} width={22} />;
+  return <icons.Picture height={22} stroke={semantics.textTertiary} width={22} />;
 };
 
 export const AttachmentMediaPicker = (props: AttachmentPickerContentProps) => {

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx

@@ -15,7 +15,6 @@ import { useMessageInputContext } from '../../../../contexts/messageInputContext
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useViewport } from '../../../../hooks/useViewport';
-import { Plus } from '../../../../icons/plus';
 import { NativeHandlers } from '../../../../native';
 import { primitives } from '../../../../theme';
 import type { File } from '../../../../types/types';
@@ -163,6 +162,7 @@ const AttachmentImage = (props: AttachmentPickerItemType) => {
 
 const AttachmentIosLimited = () => {
   const { numberOfAttachmentPickerImageColumns } = useAttachmentPickerContext();
+  const { icons } = useComponentsContext();
   const { vw } = useViewport();
   const { t } = useTranslationContext();
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
@@ -178,7 +178,7 @@ const AttachmentIosLimited = () => {
       ]}
       onPress={NativeHandlers.iOS14RefreshGallerySelection}
     >
-      <Plus width={20} height={20} stroke={styles.iosLimitedIcon.color} strokeWidth={1.5} />
+      <icons.Plus width={20} height={20} stroke={styles.iosLimitedIcon.color} strokeWidth={1.5} />
       <Text style={styles.iosLimitedText}>{t('Add more')}</Text>
     </BottomSheetTouchableOpacity>
   );

package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx

@@ -19,9 +19,9 @@ import {
   useMessageInputContext,
   useTranslationContext,
 } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useAttachmentPickerState, useStableCallback } from '../../../hooks';
-import { Camera, FilePickerIcon, PollThumbnail, VideoIcon } from '../../../icons';
 import { primitives } from '../../../theme';
 import { CommandSuggestionItem } from '../../AutoCompleteInput/AutoCompleteSuggestionItem';
 
@@ -149,6 +149,7 @@ export const AttachmentCommandPicker = () => {
 
 export const AttachmentPollPicker = (props: AttachmentPickerContentProps) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const { height } = props;
   const { openPollCreationDialog, sendMessage } = useMessageInputContext();
 
@@ -158,7 +159,7 @@ export const AttachmentPollPicker = (props: AttachmentPickerContentProps) => {
 
   return (
     <AttachmentPickerGenericContent
-      Icon={PollThumbnail}
+      Icon={icons.PollThumbnail}
       onPress={openPollCreationModal}
       height={height}
       buttonText={t('Create Poll')}
@@ -172,6 +173,7 @@ export const AttachmentCameraPicker = (
 ) => {
   const [permissionDenied, setPermissionDenied] = useState(false);
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const { height, videoOnly } = props;
   const { takeAndUploadImage } = useMessageInputContext();
 
@@ -198,7 +200,7 @@ export const AttachmentCameraPicker = (
 
   return permissionDenied ? (
     <AttachmentPickerGenericContent
-      Icon={Camera}
+      Icon={icons.Camera}
       onPress={openSettings}
       height={height}
       buttonText={t('Change in Settings')}
@@ -206,7 +208,7 @@ export const AttachmentCameraPicker = (
     />
   ) : (
     <AttachmentPickerGenericContent
-      Icon={videoOnly ? VideoIcon : Camera}
+      Icon={videoOnly ? icons.VideoIcon : icons.Camera}
       onPress={openCameraPicker}
       height={height}
       buttonText={t('Open Camera')}
@@ -217,12 +219,13 @@ export const AttachmentCameraPicker = (
 
 export const AttachmentFilePicker = (props: AttachmentPickerContentProps) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const { height } = props;
   const { pickFile } = useMessageInputContext();
 
   return (
     <AttachmentPickerGenericContent
-      Icon={FilePickerIcon}
+      Icon={icons.FilePickerIcon}
       onPress={pickFile}
       height={height}
       buttonText={t('Open Files')}

package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx

@@ -13,17 +13,10 @@ import {
   useMessagesContext,
   useOwnCapabilitiesContext,
 } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useStableCallback } from '../../../hooks';
 import { useAttachmentPickerState } from '../../../hooks/useAttachmentPickerState';
-import {
-  Camera,
-  Picture,
-  VideoIcon,
-  FilePickerIcon,
-  PollThumbnail,
-  CommandsIcon,
-  IconProps,
-} from '../../../icons';
+import { IconProps } from '../../../icons';
 import { Button, ButtonProps } from '../../ui';
 import { BottomSheetModal } from '../../UIComponents';
 
@@ -71,6 +64,7 @@ export const AttachmentTypePickerButton = ({
 export const MediaPickerButton = () => {
   const { hasImagePicker, pickAndUploadImageFromNativePicker } = useMessageInputContext();
   const { attachmentPickerStore, disableAttachmentPicker } = useAttachmentPickerContext();
+  const { icons } = useComponentsContext();
   const { selectedPicker } = useAttachmentPickerState();
 
   const setImagePicker = useStableCallback(() => {
@@ -85,7 +79,7 @@ export const MediaPickerButton = () => {
     <AttachmentTypePickerButton
       accessibilityLabelKey='a11y/Open photo picker'
       testID='upload-photo-touchable'
-      Icon={Picture}
+      Icon={icons.Picture}
       selected={selectedPicker === 'images'}
       onPress={setImagePicker}
     />
@@ -94,6 +88,7 @@ export const MediaPickerButton = () => {
 
 export const CameraPickerButton = () => {
   const { attachmentPickerStore, disableAttachmentPicker } = useAttachmentPickerContext();
+  const { icons } = useComponentsContext();
   const { selectedPicker } = useAttachmentPickerState();
 
   const { hasCameraPicker, takeAndUploadImage } = useMessageInputContext();
@@ -119,14 +114,14 @@ export const CameraPickerButton = () => {
       <AttachmentTypePickerButton
         accessibilityLabelKey='a11y/Open camera'
         testID='take-photo-touchable'
-        Icon={Camera}
+        Icon={icons.Camera}
         selected={selectedPicker === 'camera-photo'}
         onPress={onCameraPickerPress}
       />
       {Platform.OS === 'android' ? (
         <AttachmentTypePickerButton
           accessibilityLabelKey='a11y/Open video recorder'
-          Icon={VideoIcon}
+          Icon={icons.VideoIcon}
           selected={selectedPicker === 'camera-video'}
           onPress={onVideoRecorderPickerPress}
         />
@@ -137,6 +132,7 @@ export const CameraPickerButton = () => {
 
 export const FilePickerButton = () => {
   const { attachmentPickerStore, disableAttachmentPicker } = useAttachmentPickerContext();
+  const { icons } = useComponentsContext();
   const { selectedPicker } = useAttachmentPickerState();
 
   const { hasFilePicker, pickFile } = useMessageInputContext();
@@ -152,7 +148,7 @@ export const FilePickerButton = () => {
     <AttachmentTypePickerButton
       accessibilityLabelKey='a11y/Open file picker'
       testID='upload-file-touchable'
-      Icon={FilePickerIcon}
+      Icon={icons.FilePickerIcon}
       selected={selectedPicker === 'files'}
       onPress={openFilePicker}
     />
@@ -164,6 +160,7 @@ export const PollPickerButton = () => {
   const { selectedPicker } = useAttachmentPickerState();
 
   const { threadList } = useChannelContext();
+  const { icons } = useComponentsContext();
   const { hasCreatePoll } = useMessagesContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
@@ -180,7 +177,7 @@ export const PollPickerButton = () => {
     <AttachmentTypePickerButton
       accessibilityLabelKey='a11y/Open poll creation'
       testID='create-poll-touchable'
-      Icon={PollThumbnail}
+      Icon={icons.PollThumbnail}
       selected={selectedPicker === 'polls'}
       onPress={openPollCreationModal}
     />
@@ -191,6 +188,7 @@ export const CommandsPickerButton = () => {
   const [showCommandsSheet, setShowCommandsSheet] = useState(false);
   const { hasCommands } = useMessageInputContext();
   const { attachmentPickerStore, disableAttachmentPicker } = useAttachmentPickerContext();
+  const { icons } = useComponentsContext();
   const { selectedPicker } = useAttachmentPickerState();
 
   const setCommandsPicker = useStableCallback(() => {
@@ -208,7 +206,7 @@ export const CommandsPickerButton = () => {
       <AttachmentTypePickerButton
         accessibilityLabelKey='a11y/Open commands'
         testID='commands-touchable'
-        Icon={CommandsIcon}
+        Icon={icons.CommandsIcon}
         selected={selectedPicker === 'commands'}
         onPress={setCommandsPicker}
       />

package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx

@@ -3,32 +3,31 @@ import { StyleSheet, View } from 'react-native';
 
 import { CommandVariants } from 'stream-chat';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Flag, GiphyIcon, Mute, Sound, UserAdd, UserDelete } from '../../icons';
-import { Lightning } from '../../icons/bolt';
-import { Imgur } from '../../icons/imgur';
 
 export const SuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
   const {
     theme: { semantics },
   } = useTheme();
+  const { icons } = useComponentsContext();
 
   if (name === 'ban') {
-    return <UserDelete height={20} stroke={semantics.textSecondary} width={20} />;
+    return <icons.UserDelete height={20} stroke={semantics.textSecondary} width={20} />;
   } else if (name === 'flag') {
-    return <Flag height={20} stroke={semantics.textSecondary} width={20} />;
+    return <icons.Flag height={20} stroke={semantics.textSecondary} width={20} />;
   } else if (name === 'giphy') {
-    return <GiphyIcon height={20} width={20} />;
+    return <icons.GiphyIcon height={20} width={20} />;
   } else if (name === 'imgur') {
-    return <Imgur height={20} width={20} />;
+    return <icons.Imgur height={20} width={20} />;
   } else if (name === 'mute') {
-    return <Mute height={20} fill={semantics.textSecondary} width={20} />;
+    return <icons.Mute height={20} fill={semantics.textSecondary} width={20} />;
   } else if (name === 'unban') {
-    return <UserAdd height={20} stroke={semantics.textSecondary} width={20} />;
+    return <icons.UserAdd height={20} stroke={semantics.textSecondary} width={20} />;
   } else if (name === 'unmute') {
-    return <Sound height={20} stroke={semantics.textSecondary} width={20} />;
+    return <icons.Sound height={20} stroke={semantics.textSecondary} width={20} />;
   } else {
-    return <Lightning fill={semantics.textSecondary} height={16} width={16} />;
+    return <icons.Lightning fill={semantics.textSecondary} height={16} width={16} />;
   }
 };
 

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import { Smile } from '../../icons/emoji';
 import { primitives } from '../../theme';
 
 export type AutoCompleteSuggestionHeaderProps = {
@@ -48,11 +48,12 @@ export const EmojiHeader: React.FC<AutoCompleteSuggestionHeaderProps> = ({ query
       semantics,
     },
   } = useTheme();
+  const { icons } = useComponentsContext();
   const styles = useStyles();
 
   return (
     <View style={[styles.container, container]}>
-      <Smile pathFill={semantics.accentPrimary} />
+      <icons.Smile pathFill={semantics.accentPrimary} />
       <Text accessibilityRole='header' style={[styles.title, title]} testID='emojis-header-title'>
         {`Emoji matching "${queryText}"`}
       </Text>

package/src/components/AutoCompleteInput/mentionItems/MentionBroadcastItem.tsx

@@ -6,8 +6,8 @@ import { EnhancedMentionContent } from './EnhancedMentionContent';
 import { EnhancedMentionIcon } from './EnhancedMentionIcon';
 import { MentionItem } from './MentionItem';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { Megaphone } from '../../../icons/megaphone';
 
 export type MentionBroadcastItemProps = {
   entity: ChannelMentionSuggestion | HereMentionSuggestion;
@@ -24,8 +24,9 @@ const SUBTITLE_KEY = {
 
 export const MentionBroadcastItem = ({ entity }: MentionBroadcastItemProps) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   return (
-    <MentionItem leading={<EnhancedMentionIcon Icon={Megaphone} />}>
+    <MentionItem leading={<EnhancedMentionIcon Icon={icons.Megaphone} />}>
       <EnhancedMentionContent
         subtitle={t(SUBTITLE_KEY[entity.mentionType])}
         testID='mentions-item-name'

package/src/components/AutoCompleteInput/mentionItems/MentionRoleItem.tsx

@@ -6,8 +6,8 @@ import { EnhancedMentionContent } from './EnhancedMentionContent';
 import { EnhancedMentionIcon } from './EnhancedMentionIcon';
 import { MentionItem } from './MentionItem';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { Shield } from '../../../icons/shield';
 
 export type MentionRoleItemProps = {
   entity: RoleMentionSuggestion;
@@ -15,8 +15,9 @@ export type MentionRoleItemProps = {
 
 export const MentionRoleItem = ({ entity }: MentionRoleItemProps) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   return (
-    <MentionItem leading={<EnhancedMentionIcon Icon={Shield} />}>
+    <MentionItem leading={<EnhancedMentionIcon Icon={icons.Shield} />}>
       <EnhancedMentionContent
         subtitle={t('Notify all {{ role }} members', { role: entity.name })}
         testID='mentions-item-name'

package/src/components/AutoCompleteInput/mentionItems/MentionUserGroupItem.tsx

@@ -6,18 +6,21 @@ import { EnhancedMentionContent } from './EnhancedMentionContent';
 import { EnhancedMentionIcon } from './EnhancedMentionIcon';
 import { MentionItem } from './MentionItem';
 
-import { PeopleIcon } from '../../../icons/users';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 export type MentionUserGroupItemProps = {
   entity: UserGroupMentionSuggestion;
 };
 
-export const MentionUserGroupItem = ({ entity }: MentionUserGroupItemProps) => (
-  <MentionItem leading={<EnhancedMentionIcon Icon={PeopleIcon} />}>
-    <EnhancedMentionContent
-      subtitle={entity.description}
-      testID='mentions-item-name'
-      title={`@${entity.name}`}
-    />
-  </MentionItem>
-);
+export const MentionUserGroupItem = ({ entity }: MentionUserGroupItemProps) => {
+  const { icons } = useComponentsContext();
+  return (
+    <MentionItem leading={<EnhancedMentionIcon Icon={icons.PeopleIcon} />}>
+      <EnhancedMentionContent
+        subtitle={entity.description}
+        testID='mentions-item-name'
+        title={`@${entity.name}`}
+      />
+    </MentionItem>
+  );
+};

package/src/components/ChannelDetails/components/ChannelDetailsNavHeader.tsx

@@ -4,10 +4,10 @@ import { I18nManager, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useIsDirectChat } from '../../../hooks/useIsDirectChat';
-import { ChevronLeft } from '../../../icons/chevron-left';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui/Button/Button';
 
@@ -26,6 +26,7 @@ export const ChannelDetailsNavHeader = ({
   title,
 }: ChannelDetailsNavHeaderProps) => {
   const { channel } = useChannelDetailsContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const {
     theme: {
@@ -54,7 +55,7 @@ export const ChannelDetailsNavHeader = ({
           <Button
             accessibilityLabelKey='a11y/Back'
             iconOnly
-            LeadingIcon={ChevronLeft}
+            LeadingIcon={icons.ChevronLeft}
             onPress={onBack}
             size='md'
             testID='channel-details-back-button'

package/src/components/ChannelDetails/components/ChannelDetailsNavigationSection.tsx

@@ -8,8 +8,6 @@ import { ModalHeader } from './modal/ModalHeader';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { ChevronRight } from '../../../icons';
-import { ChevronLeft } from '../../../icons/chevron-left';
 import { primitives } from '../../../theme';
 import { ImageGallery } from '../../ImageGallery/ImageGallery';
 import {
@@ -40,7 +38,7 @@ export const ChannelDetailsNavigationSection = ({
     },
   } = useTheme();
   const styles = useStyles();
-  const { FileAttachmentList, MediaList, PinnedMessageList } = useComponentsContext();
+  const { FileAttachmentList, icons, MediaList, PinnedMessageList } = useComponentsContext();
   const items = useChannelDetailsNavigationItems({ getNavigationItems });
   const [activeSection, setActiveSection] = useState<ChannelDetailsNavigationSectionType | null>(
     null,
@@ -74,15 +72,15 @@ export const ChannelDetailsNavigationSection = ({
   const chevron = useMemo(
     () => (
       <View accessibilityElementsHidden importantForAccessibility='no-hide-descendants'>
-        <ChevronRight height={20} stroke={semantics.textTertiary} width={20} />
+        <icons.ChevronRight height={20} stroke={semantics.textTertiary} width={20} />
       </View>
     ),
-    [semantics.textTertiary],
+    [icons, semantics.textTertiary],
   );
 
   const closeButtonProps = useMemo(
-    () => ({ type: 'ghost' as const, LeadingIcon: ChevronLeft }),
-    [],
+    () => ({ type: 'ghost' as const, LeadingIcon: icons.ChevronLeft }),
+    [icons],
   );
 
   return (

package/src/components/ChannelDetails/components/ChannelDetailsProfile.tsx

@@ -3,10 +3,10 @@ import { I18nManager, StyleSheet, Text, View } from 'react-native';
 
 import { composeAccessibilityLabel } from '../../../a11y/a11yUtils';
 import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useChannelMuteActive } from '../../../hooks/useChannelMuteActive';
-import { Mute } from '../../../icons/mute';
 import { primitives } from '../../../theme';
 import { useChannelPreviewDisplayName } from '../../ChannelPreview/hooks/useChannelPreviewDisplayName';
 import { ChannelAvatar } from '../../ui/Avatar/ChannelAvatar';
@@ -14,6 +14,7 @@ import { useChannelDetailsMemberStatusText } from '../hooks/useChannelDetailsMem
 
 export const ChannelDetailsProfile = () => {
   const { channel } = useChannelDetailsContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const {
     theme: {
@@ -53,7 +54,7 @@ export const ChannelDetailsProfile = () => {
             {displayName ?? ''}
           </Text>
           {muted ? (
-            <Mute
+            <icons.Mute
               fill={semantics.textTertiary}
               height={20}
               testID='channel-details-profile-muted-indicator'