fix: refactor icons in the SDK

Author: khushal87

examples/SampleApp/src/components/AddMemberBottomSheet.tsx

@@ -8,7 +8,7 @@ import {
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { CircleClose, Search, useTheme } from 'stream-chat-react-native';
+import { Search, useTheme } from 'stream-chat-react-native';
 
 import { UserSearchResultsGrid } from './UserSearch/UserSearchResultsGrid';
 
@@ -20,6 +20,7 @@ import {
 import { usePaginatedUsers } from '../hooks/usePaginatedUsers';
 
 import type { UserResponse } from 'stream-chat';
+import { CircleClose } from '../icons/CircleClose';
 
 const styles = StyleSheet.create({
   container: {

examples/SampleApp/src/components/ChannelInfoOverlay.tsx

@@ -14,23 +14,16 @@ import Animated, {
   withDecay,
   withTiming,
 } from 'react-native-reanimated';
-import {
-  CircleClose,
-  Delete,
-  User,
-  UserMinus,
-  useTheme,
-  useViewport,
-  UserAvatar,
-} from 'stream-chat-react-native';
+import { Delete, User, useTheme, useViewport, UserAvatar, Pin } from 'stream-chat-react-native';
 import { ChannelMemberResponse } from 'stream-chat';
 
 import { useAppOverlayContext } from '../context/AppOverlayContext';
 import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayContext';
 import { Archive } from '../icons/Archive';
-import { Pin } from '../icons/Pin';
 import { useChannelInfoOverlayActions } from '../hooks/useChannelInfoOverlayActions';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { UserMinus } from '../icons/UserMinus';
+import { CircleClose } from '../icons/CircleClose';
 
 dayjs.extend(relativeTime);
 
@@ -350,7 +343,7 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
                           ]}
                         >
                           <View style={styles.rowInner}>
-                            <Pin height={24} width={24} />
+                            <Pin height={24} width={24} stroke={grey} />
                           </View>
                           <Text style={[styles.rowText, { color: black }]}>
                             {membership?.pinned_at ? 'Unpin' : 'Pin'}

examples/SampleApp/src/components/ChannelPreview.tsx

@@ -9,7 +9,6 @@ import {
   ChannelPreviewStatus,
   ChannelPreviewStatusProps,
   Delete,
-  MenuPointHorizontal,
   Pin,
   useChannelMembershipState,
   useChatContext,
@@ -24,6 +23,7 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import type { StackNavigatorParamList } from '../types';
 import { ChannelState } from 'stream-chat';
+import { MenuPointHorizontal } from '../icons/MenuPointHorizontal';
 
 const styles = StyleSheet.create({
   leftSwipeableButton: {

examples/SampleApp/src/components/ConfirmationBottomSheet.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Delete, UserMinus, useTheme } from 'stream-chat-react-native';
+import { Delete, useTheme } from 'stream-chat-react-native';
 
 import { useAppOverlayContext } from '../context/AppOverlayContext';
 import {
   isAddMemberBottomSheetData,
   useBottomSheetOverlayContext,
 } from '../context/BottomSheetOverlayContext';
+import { UserMinus } from '../icons/UserMinus';
 
 const styles = StyleSheet.create({
   actionButtonLeft: {

examples/SampleApp/src/components/MenuDrawer.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, Pressable, View } from 'react-native';
-import { Edit, Group, User, useTheme } from 'stream-chat-react-native';
+import { Edit, User, useTheme } from 'stream-chat-react-native';
 
 import { useAppContext } from '../context/AppContext';
 import { SecretMenu } from './SecretMenu.tsx';
 
 import type { DrawerContentComponentProps } from '@react-navigation/drawer';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { Group } from '../icons/Group.tsx';
 
 export const styles = StyleSheet.create({
   avatar: {

examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx

@@ -7,7 +7,6 @@ import {
   MessageInputContextValue,
   Search,
   SendRight,
-  SendUp,
   useChannelContext,
   useMessageInputContext,
   useTheme,
@@ -17,14 +16,16 @@ import { NewDirectMessagingScreenNavigationProp } from '../screens/NewDirectMess
 
 import { useUserSearchContext } from '../context/UserSearchContext';
 import { useAppContext } from '../context/AppContext';
+import { SendUp } from '../icons/SendUp';
 
-type NewDirectMessagingSendButtonPropsWithContext = Pick<MessageInputContextValue, 'giphyActive' | 'sendMessage'> & {
+type NewDirectMessagingSendButtonPropsWithContext = Pick<
+  MessageInputContextValue,
+  'giphyActive' | 'sendMessage'
+> & {
   /** Disables the button */ disabled: boolean;
 };
 
-const SendButtonWithContext = (
-  props: NewDirectMessagingSendButtonPropsWithContext,
-) => {
+const SendButtonWithContext = (props: NewDirectMessagingSendButtonPropsWithContext) => {
   const { disabled = false, giphyActive, sendMessage } = props;
   const {
     theme: {

examples/SampleApp/src/components/SecretMenu.tsx

@@ -14,11 +14,13 @@ import {
   StyleSheet,
   ScrollView,
 } from 'react-native';
-import { Close, Edit, Notification, Delete, Folder, ZIP, useTheme } from 'stream-chat-react-native';
+import { Close, Edit, Delete, ZIP, useTheme } from 'stream-chat-react-native';
 import { styles as menuDrawerStyles } from './MenuDrawer.tsx';
 import AsyncStore from '../utils/AsyncStore.ts';
 import { StreamChat } from 'stream-chat';
 import { LabeledTextInput } from '../screens/AdvancedUserSelectorScreen.tsx';
+import { Notification } from '../icons/Notification.tsx';
+import { Folder } from '../icons/Folder.tsx';
 
 const isAndroid = Platform.OS === 'android';
 

examples/SampleApp/src/components/UserInfoOverlay.tsx

@@ -15,11 +15,9 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import {
-  CircleClose,
   MessageIcon,
   useChatContext,
   User,
-  UserMinus,
   useTheme,
   useViewport,
   UserAvatar,
@@ -32,6 +30,8 @@ import { useAppContext } from '../context/AppContext';
 import { UserResponse } from 'stream-chat';
 import { useUserInfoOverlayActions } from '../hooks/useUserInfoOverlayActions';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { UserMinus } from '../icons/UserMinus';
+import { CircleClose } from '../icons/CircleClose';
 
 dayjs.extend(relativeTime);
 
@@ -123,19 +123,19 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
     }
     showScreen.value = show
       ? withTiming(1, {
-        duration: 150,
-        easing: Easing.in(Easing.ease),
-      })
-      : withTiming(
-        0,
-        {
           duration: 150,
-          easing: Easing.out(Easing.ease),
-        },
-        () => {
-          runOnJS(reset)();
-        },
-      );
+          easing: Easing.in(Easing.ease),
+        })
+      : withTiming(
+          0,
+          {
+            duration: 150,
+            easing: Easing.out(Easing.ease),
+          },
+          () => {
+            runOnJS(reset)();
+          },
+        );
   };
 
   useEffect(() => {
@@ -181,12 +181,12 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
         translateY.value =
           evt.velocityY > 1000
             ? withDecay({
-              velocity: evt.velocityY,
-            })
+                velocity: evt.velocityY,
+              })
             : withTiming(screenHeight, {
-              duration: 200,
-              easing: Easing.out(Easing.ease),
-            });
+                duration: 200,
+                easing: Easing.out(Easing.ease),
+              });
       } else {
         translateY.value = withTiming(0);
         overlayOpacity.value = withTiming(1);
@@ -217,8 +217,8 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
 
   const self = channel
     ? Object.values(channel.state.members).find(
-      (channelMember) => channelMember.user?.id === client.user?.id,
-    )
+        (channelMember) => channelMember.user?.id === client.user?.id,
+      )
     : undefined;
 
   const { viewInfo, messageUser, removeFromGroup, cancel } = useUserInfoOverlayActions();

examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx

@@ -9,14 +9,15 @@ import {
 } from 'react-native';
 import dayjs from 'dayjs';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
-import { CheckSend, Close, useTheme, useViewport, UserAvatar } from 'stream-chat-react-native';
+import { Close, useTheme, useViewport, UserAvatar } from 'stream-chat-react-native';
 
 import { useUserSearchContext } from '../../context/UserSearchContext';
 
 import type { UserResponse } from 'stream-chat';
 
 import { Search } from '../../icons/Search';
 import calendar from 'dayjs/plugin/calendar';
+import { CheckSend } from '../../icons/CheckSend';
 
 dayjs.extend(calendar);
 

examples/SampleApp/src/icons/CheckSend.tsx

@@ -1,24 +1,12 @@
 import React from 'react';
-import Svg, { Path } from 'react-native-svg';
-import { useTheme } from 'stream-chat-react-native';
 
-import { IconProps } from '../utils/base';
+import { IconProps, RootPath, RootSvg } from 'stream-chat-react-native';
 
-export const CheckSend: React.FC<IconProps> = ({ height, width }) => {
-  const {
-    theme: {
-      colors: { accent_blue },
-    },
-  } = useTheme();
-
-  return (
-    <Svg fill='none' height={height} viewBox={`0 0 ${height} ${width}`} width={width}>
-      <Path
-        clipRule='evenodd'
-        d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.707 7.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-2-2a1 1 0 111.414-1.414L11 12.586l3.293-3.293a1 1 0 011.414 0z'
-        fill={accent_blue}
-        fillRule='evenodd'
-      />
-    </Svg>
-  );
-};
+export const CheckSend = (props: IconProps) => (
+  <RootSvg {...props}>
+    <RootPath
+      d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.707 7.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-2-2a1 1 0 111.414-1.414L11 12.586l3.293-3.293a1 1 0 011.414 0z'
+      {...props}
+    />
+  </RootSvg>
+);