fix: refactor icons in the SDK (#3445)

Author: khushal87

package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx

@@ -4,15 +4,13 @@ import { StyleSheet, View } from 'react-native';
 import { CommandVariants } from 'stream-chat';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Flag, GiphyIcon, Lightning, Mute, Sound, UserAdd, UserDelete } from '../../icons';
+import { Flag, GiphyIcon, Mute, Sound, UserAdd, UserDelete } from '../../icons';
 import { Imgur } from '../../icons/Imgur';
+import { Lightning } from '../../icons/Lightning';
 
 export const SuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
   const {
-    theme: {
-      semantics,
-      colors: { white },
-    },
+    theme: { semantics },
   } = useTheme();
 
   if (name === 'ban') {
@@ -30,7 +28,7 @@ export const SuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
   } else if (name === 'unmute') {
     return <Sound height={20} stroke={semantics.textSecondary} width={20} />;
   } else {
-    return <Lightning fill={white} size={16} />;
+    return <Lightning fill={semantics.textSecondary} height={16} width={16} />;
   }
 };
 

package/src/components/ui/GiphyChip.tsx

@@ -7,7 +7,7 @@ import { useMessageComposer } from '../../contexts/messageInputContext/hooks/use
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
 import { Cross } from '../../icons/Cross';
-import { NewLightning } from '../../icons/NewLightning';
+import { Lightning } from '../../icons/Lightning';
 import { primitives } from '../../theme';
 
 const textComposerStateSelector = (state: TextComposerState) => ({
@@ -32,7 +32,7 @@ export const GiphyChip = () => {
 
   return (
     <View style={styles.container}>
-      <NewLightning fill={semantics.textInverse} height={16} width={16} />
+      <Lightning fill={semantics.textInverse} height={16} width={16} />
       <Text style={styles.text}>{commandName}</Text>
       <Pressable onPress={onPressHandler}>
         <Cross stroke={semantics.textInverse} height={16} width={16} />

package/src/icons/Archive.tsx

@@ -1,17 +1,13 @@
 import React from 'react';
 
-import Svg, { Path } from 'react-native-svg';
+import { Path, Svg } from 'react-native-svg';
 
 import { IconProps } from './utils/base';
 
-type Props = IconProps & {
-  size: number;
-};
-
-export const Lightning = ({ size = 32, ...rest }: Props) => (
-  <Svg height={size} viewBox={`0 0 ${size} ${size}`} width={size} {...rest}>
+export const Lightning = ({ height, width, ...rest }: IconProps) => (
+  <Svg fill={'none'} height={height} viewBox={'0 0 12 12'} width={width} {...rest}>
     <Path
-      d='M14.8522 28H13.5188L14.8522 18.6667H10.1855C9.01218 18.6667 9.74551 17.6667 9.77218 17.6267C11.4922 14.5867 14.0788 10.0533 17.5322 4H18.8655L17.5322 13.3333H22.2122C22.7455 13.3333 23.0388 13.5867 22.7455 14.2133C17.4788 23.4 14.8522 28 14.8522 28Z'
+      d='M8.2266 1.16648C8.524 0.279984 7.4007 -0.417073 6.7514 0.291481L1.73231 5.76855C1.21953 6.32815 1.60932 7.24205 2.37725 7.24205H4.79225C4.87431 7.24205 4.93956 7.3243 4.91215 7.41115L3.82717 10.8489C3.54697 11.7367 4.67246 12.4136 5.3123 11.7034L10.2732 6.1964C10.7789 5.6351 10.3876 4.72846 9.6232 4.72846H7.20825C7.1253 4.72846 7.0598 4.64444 7.0891 4.5571L8.2266 1.16648Z'
       {...rest}
     />
   </Svg>