feat: allow custom icons

Author: szuperaz

package/src/components/Attachment/Audio/PlayPauseButton.tsx

@@ -2,8 +2,7 @@ import React, { useMemo } from 'react';
 import { Pressable, PressableProps, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Pause } from '../../../icons/pause-fill';
-import { Play } from '../../../icons/play-fill';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../theme';
 import { buttonSizes } from '../../ui/Button/constants';
 
@@ -31,6 +30,7 @@ export const PlayPauseButton = ({
   const {
     theme: { semantics },
   } = useTheme();
+  const { icons } = useComponentsContext();
   const styles = useStyles();
   return (
     <Pressable
@@ -45,9 +45,9 @@ export const PlayPauseButton = ({
       {...rest}
     >
       {isPlaying ? (
-        <Pause fill={semantics.textSecondary} height={20} width={20} strokeWidth={1.5} />
+        <icons.Pause fill={semantics.textSecondary} height={20} width={20} strokeWidth={1.5} />
       ) : (
-        <Play fill={semantics.textSecondary} height={20} width={20} strokeWidth={1.5} />
+        <icons.Play fill={semantics.textSecondary} height={20} width={20} strokeWidth={1.5} />
       )}
     </Pressable>
   );

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,15 +200,15 @@ export const AttachmentCameraPicker = (
 
   return permissionDenied ? (
     <AttachmentPickerGenericContent
-      Icon={Camera}
+      Icon={icons.Camera}
       onPress={openSettings}
       height={height}
       buttonText={t('Change in Settings')}
       description={t('You have not granted access to your camera')}
     />
   ) : (
     <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')}