[NoQA] Migrate icons navigations, arrows, and avatars to lazy loading

src/components/AccountSwitcher.tsx

@@ -3,6 +3,7 @@ import {Str} from 'expensify-common';
 import React, {useRef, useState} from 'react';
 import {View} from 'react-native';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
@@ -23,6 +24,7 @@ import type {Errors} from '@src/types/onyx/OnyxCommon';
 import Avatar from './Avatar';
 import ConfirmModal from './ConfirmModal';
 import Icon from './Icon';
+// eslint-disable-next-line no-restricted-imports
 import * as Expensicons from './Icon/Expensicons';
 import type {PopoverMenuItem} from './PopoverMenu';
 import PopoverMenu from './PopoverMenu';
@@ -55,6 +57,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
 
     const buttonRef = useRef<HTMLDivElement>(null);
     const {windowHeight} = useWindowDimensions();
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['CaretUpDown'] as const);
 
     const [shouldShowDelegatorMenu, setShouldShowDelegatorMenu] = useState(false);
     const [shouldShowOfflineModal, setShouldShowOfflineModal] = useState(false);
@@ -219,7 +222,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
                                     <View style={styles.justifyContentCenter}>
                                         <Icon
                                             fill={theme.icon}
-                                            src={Expensicons.CaretUpDown}
+                                            src={expensifyIcons.CaretUpDown}
                                             height={variables.iconSizeSmall}
                                             width={variables.iconSizeSmall}
                                         />

src/components/AnimatedCollapsible/index.tsx

@@ -5,9 +5,9 @@ import type {StyleProp, ViewStyle} from 'react-native';
 import Animated, {useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
 import {scheduleOnRN} from 'react-native-worklets';
 import Icon from '@components/Icon';
-import * as Expensicons from '@components/Icon/Expensicons';
 import {easing} from '@components/Modal/ReanimatedModal/utils';
 import {PressableWithFeedback} from '@components/Pressable';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -69,6 +69,7 @@ function AnimatedCollapsible({
     const contentHeight = useSharedValue(0);
     const hasExpanded = useSharedValue(isExpanded);
     const [isRendered, setIsRendered] = React.useState(isExpanded);
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['DownArrow', 'UpArrow'] as const);
 
     useEffect(() => {
         hasExpanded.set(isExpanded);
@@ -121,7 +122,7 @@ function AnimatedCollapsible({
                     >
                         {({hovered}) => (
                             <Icon
-                                src={isExpanded ? Expensicons.UpArrow : Expensicons.DownArrow}
+                                src={isExpanded ? expensifyIcons.UpArrow : expensifyIcons.DownArrow}
                                 fill={theme.icon}
                                 additionalStyles={!hovered && styles.opacitySemiTransparent}
                                 small

src/components/ApprovalWorkflowSection.tsx

@@ -29,6 +29,7 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress}: ApprovalWorkflowSe
     const theme = useTheme();
     const {translate, toLocaleOrdinal, localeCompare} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['ArrowRight'] as const);
 
     const approverTitle = useCallback(
         (index: number) =>
@@ -107,7 +108,7 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress}: ApprovalWorkflowSe
                 ))}
             </View>
             <Icon
-                src={Expensicons.ArrowRight}
+                src={expensifyIcons.ArrowRight}
                 fill={theme.icon}
                 additionalStyles={[styles.alignSelfCenter]}
             />

src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import {View} from 'react-native';
 import type {Attachment} from '@components/Attachments/types';
 import Button from '@components/Button';
-import * as Expensicons from '@components/Icon/Expensicons';
 import Tooltip from '@components/Tooltip';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
@@ -39,6 +39,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
     const isForwardDisabled = page === attachments.length - 1;
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['ArrowRight', 'BackArrow'] as const);
 
     return shouldShowArrows ? (
         <>
@@ -48,7 +49,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
                         <Button
                             small
                             innerStyles={[styles.arrowIcon]}
-                            icon={Expensicons.BackArrow}
+                            icon={expensifyIcons.BackArrow}
                             iconFill={theme.text}
                             onPress={onBack}
                             onPressIn={cancelAutoHideArrow}
@@ -63,7 +64,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
                         <Button
                             small
                             innerStyles={[styles.arrowIcon]}
-                            icon={Expensicons.ArrowRight}
+                            icon={expensifyIcons.ArrowRight}
                             iconFill={theme.text}
                             onPress={onForward}
                             onPressIn={cancelAutoHideArrow}

src/components/Attachments/AttachmentView/index.tsx

@@ -9,8 +9,6 @@ import Button from '@components/Button';
 import DistanceEReceipt from '@components/DistanceEReceipt';
 import EReceipt from '@components/EReceipt';
 import Icon from '@components/Icon';
-// eslint-disable-next-line no-restricted-imports
-import {ArrowCircleClockwise} from '@components/Icon/Expensicons';
 import PerDiemEReceipt from '@components/PerDiemEReceipt';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
@@ -133,7 +131,7 @@ function AttachmentView({
     reportID,
     transaction: transactionProp,
 }: AttachmentViewProps) {
-    const icons = useMemoizedLazyExpensifyIcons(['Gallery'] as const);
+    const icons = useMemoizedLazyExpensifyIcons(['ArrowCircleClockwise', 'Gallery'] as const);
     const [transactionFromOnyx] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(transactionID)}`, {canBeMissing: true});
     const transaction = transactionProp ?? transactionFromOnyx;
     const {translate} = useLocalize();
@@ -294,7 +292,7 @@ function AttachmentView({
                     </View>
                     <Button
                         text={translate('attachmentView.retry')}
-                        icon={ArrowCircleClockwise}
+                        icon={icons.ArrowCircleClockwise}
                         onPress={() => {
                             if (isOffline) {
                                 return;

src/components/Avatar.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import type {ImageStyle, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import useDefaultAvatars from '@hooks/useDefaultAvatars';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -13,7 +14,6 @@ import type {AvatarSizeName} from '@styles/utils';
 import CONST from '@src/CONST';
 import type {AvatarType} from '@src/types/onyx/OnyxCommon';
 import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
 import Image from './Image';
 
 type AvatarProps = {
@@ -66,7 +66,7 @@ function Avatar({
     containerStyles,
     size = CONST.AVATAR_SIZE.DEFAULT,
     fill,
-    fallbackIcon = Expensicons.FallbackAvatar,
+    fallbackIcon,
     fallbackIconTestID = '',
     type,
     name = '',
@@ -77,6 +77,7 @@ function Avatar({
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const [imageError, setImageError] = useState(false);
+    const defaultAvatars = useDefaultAvatars();
 
     useNetwork({onReconnect: () => setImageError(false)});
 
@@ -87,15 +88,20 @@ function Avatar({
     const isWorkspace = type === CONST.ICON_TYPE_WORKSPACE;
     const userAccountID = isWorkspace ? undefined : (avatarID as number);
 
-    const source = isWorkspace ? originalSource : getAvatar({avatarSource: originalSource, accountID: userAccountID});
+    const source = isWorkspace ? originalSource : getAvatar({avatarSource: originalSource, accountID: userAccountID, defaultAvatars});
     let optimizedSource = source;
     const maybeDefaultAvatarName = getPresetAvatarNameFromURL(source);
 
     if (maybeDefaultAvatarName) {
         optimizedSource = getAvatarLocal(maybeDefaultAvatarName);
     }
-    const useFallBackAvatar = imageError || !source || source === Expensicons.FallbackAvatar;
-    const fallbackAvatar = isWorkspace ? getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar;
+    const useFallBackAvatar = imageError || !source || source === defaultAvatars.FallbackAvatar;
+    let fallbackAvatar;
+    if (isWorkspace) {
+        fallbackAvatar = getDefaultWorkspaceAvatar(name);
+    } else {
+        fallbackAvatar = fallbackIcon ?? defaultAvatars.FallbackAvatar;
+    }
     const fallbackAvatarTestID = isWorkspace ? getDefaultWorkspaceAvatarTestID(name) : fallbackIconTestID || 'SvgFallbackAvatar Icon';
     const avatarSource = useFallBackAvatar ? fallbackAvatar : optimizedSource;
 
@@ -108,7 +114,7 @@ function Avatar({
     if (isWorkspace) {
         iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(avatarID?.toString() ?? '');
         // Assign the icon fill color only for the default fallback avatar
-    } else if (useFallBackAvatar && avatarSource === Expensicons.FallbackAvatar) {
+    } else if (useFallBackAvatar && avatarSource === defaultAvatars.FallbackAvatar) {
         iconColors = StyleUtils.getBackgroundColorAndFill(theme.buttonHoveredBG, theme.icon);
     } else {
         iconColors = null;

src/components/AvatarButtonWithIcon.tsx

@@ -2,6 +2,7 @@ import type {RefObject} from 'react';
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import type {ImageStyle, StyleProp, ViewStyle} from 'react-native';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {AvatarSource} from '@libs/UserAvatarUtils';
@@ -11,6 +12,7 @@ import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import type IconAsset from '@src/types/utils/IconAsset';
 import Avatar from './Avatar';
 import Icon from './Icon';
+// eslint-disable-next-line no-restricted-imports
 import * as Expensicons from './Icon/Expensicons';
 import OfflineWithFeedback from './OfflineWithFeedback';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
@@ -78,7 +80,7 @@ function AvatarButtonWithIcon({
     onPress,
     source = '',
     avatarID,
-    fallbackIcon = Expensicons.FallbackAvatar,
+    fallbackIcon,
     size = CONST.AVATAR_SIZE.DEFAULT,
     type = CONST.ICON_TYPE_AVATAR,
     avatarStyle,
@@ -89,6 +91,7 @@ function AvatarButtonWithIcon({
 }: AvatarButtonWithIconProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['FallbackAvatar'] as const);
 
     return (
         <Tooltip
@@ -111,7 +114,7 @@ function AvatarButtonWithIcon({
                             imageStyles={[styles.alignSelfCenter, avatarStyle]}
                             source={source}
                             avatarID={avatarID}
-                            fallbackIcon={fallbackIcon}
+                            fallbackIcon={fallbackIcon ?? expensifyIcons.FallbackAvatar}
                             size={size}
                             type={type}
                             name={name}

src/components/AvatarWithImagePicker.tsx

@@ -89,7 +89,7 @@ function AvatarWithImagePicker({
     onErrorClose = () => {},
     source = '',
     avatarID,
-    fallbackIcon = Expensicons.FallbackAvatar,
+    fallbackIcon,
     size = CONST.AVATAR_SIZE.DEFAULT,
     type = CONST.ICON_TYPE_AVATAR,
     isUsingDefaultAvatar = false,
@@ -118,6 +118,7 @@ function AvatarWithImagePicker({
     const {calculatePopoverPosition} = usePopoverPosition();
     const anchorRef = useRef<View>(null);
     const {translate} = useLocalize();
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['FallbackAvatar'] as const);
 
     const setError = (error: TranslationPaths | null, phraseParam: Record<string, unknown>) => {
         setErrorData({
@@ -263,7 +264,7 @@ function AvatarWithImagePicker({
                                         onPress={() => onPressAvatar(openPicker)}
                                         avatarStyle={avatarStyle}
                                         pendingAction={pendingAction}
-                                        fallbackIcon={fallbackIcon}
+                                        fallbackIcon={fallbackIcon ?? expensifyIcons.FallbackAvatar}
                                         anchorRef={anchorRef}
                                         DefaultAvatar={DefaultAvatar}
                                         editIcon={editIcon}

src/components/AvatarWithIndicator.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import {View} from 'react-native';
+import useDefaultAvatars from '@hooks/useDefaultAvatars';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getSmallSizeAvatar} from '@libs/UserAvatarUtils';
 import type {AvatarSource} from '@libs/UserAvatarUtils';
 import CONST from '@src/CONST';
 import Avatar from './Avatar';
 import AvatarSkeleton from './AvatarSkeleton';
-import * as Expensicons from './Icon/Expensicons';
 import Indicator from './Indicator';
 import Tooltip from './Tooltip';
 
@@ -27,8 +27,9 @@ type AvatarWithIndicatorProps = {
     isLoading?: boolean;
 };
 
-function AvatarWithIndicator({source, accountID, tooltipText = '', fallbackIcon = Expensicons.FallbackAvatar, isLoading = true}: AvatarWithIndicatorProps) {
+function AvatarWithIndicator({source, accountID, tooltipText = '', fallbackIcon, isLoading = true}: AvatarWithIndicatorProps) {
     const styles = useThemeStyles();
+    const defaultAvatars = useDefaultAvatars();
 
     return (
         <Tooltip text={tooltipText}>
@@ -39,8 +40,8 @@ function AvatarWithIndicator({source, accountID, tooltipText = '', fallbackIcon
                     <>
                         <Avatar
                             size={CONST.AVATAR_SIZE.SMALL}
-                            source={getSmallSizeAvatar({avatarSource: source, accountID})}
-                            fallbackIcon={fallbackIcon}
+                            source={getSmallSizeAvatar({avatarSource: source, accountID, defaultAvatars})}
+                            fallbackIcon={fallbackIcon ?? defaultAvatars.FallbackAvatar}
                             avatarID={accountID}
                             type={CONST.ICON_TYPE_AVATAR}
                         />

src/components/BigNumberPad.tsx

@@ -1,11 +1,11 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
 import Button from './Button';
-import * as Expensicons from './Icon/Expensicons';
 
 type BigNumberPadProps = {
     /** Callback to inform parent modal with key pressed */
@@ -30,6 +30,7 @@ const padNumbers = [
 
 function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, id = 'numPadView', isLongPressDisabled = false}: BigNumberPadProps) {
     const {toLocaleDigit} = useLocalize();
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['BackArrow'] as const);
 
     const styles = useThemeStyles();
     const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
@@ -81,7 +82,7 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
                                 shouldEnableHapticFeedback
                                 style={[styles.flex1, marginLeft]}
                                 text={column === '<' ? undefined : toLocaleDigit(column)}
-                                icon={column === '<' ? Expensicons.BackArrow : undefined}
+                                icon={column === '<' ? expensifyIcons.BackArrow : undefined}
                                 onLongPress={() => handleLongPress(column)}
                                 onPress={() => numberPressed(column)}
                                 onPressIn={ControlSelection.block}

src/components/Button/index.tsx

@@ -5,13 +5,13 @@ import type {GestureResponderEvent, LayoutChangeEvent, StyleProp, TextStyle, Vie
 import {StyleSheet, View} from 'react-native';
 import ActivityIndicator from '@components/ActivityIndicator';
 import Icon from '@components/Icon';
-import * as Expensicons from '@components/Icon/Expensicons';
 import type {PressableRef} from '@components/Pressable/GenericPressable/types';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useActiveElementRole from '@hooks/useActiveElementRole';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -227,7 +227,7 @@ KeyboardShortcutComponent.displayName = 'KeyboardShortcutComponent';
 function Button({
     allowBubble = false,
 
-    iconRight = Expensicons.ArrowRight,
+    iconRight,
     iconFill,
     iconHoverFill,
     icon = null,
@@ -289,6 +289,7 @@ function Button({
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const [isHovered, setIsHovered] = useState(false);
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['ArrowRight'] as const);
 
     const renderContent = () => {
         if ('children' in rest) {
@@ -371,7 +372,7 @@ function Button({
                         <View style={[styles.justifyContentCenter, large ? styles.ml2 : styles.ml1, iconRightStyles]}>
                             {!isSplitButton ? (
                                 <Icon
-                                    src={iconRight}
+                                    src={iconRight ?? expensifyIcons.ArrowRight}
                                     fill={isHovered ? (iconHoverFill ?? defaultFill) : (iconFill ?? defaultFill)}
                                     extraSmall={extraSmall}
                                     small={small}
@@ -381,7 +382,7 @@ function Button({
                                 />
                             ) : (
                                 <Icon
-                                    src={iconRight}
+                                    src={iconRight ?? expensifyIcons.ArrowRight}
                                     fill={isHovered ? (iconHoverFill ?? defaultFill) : (iconFill ?? defaultFill)}
                                     extraSmall={extraSmall}
                                     small={small}