Improve Expensicon lib

package.json

@@ -46,7 +46,6 @@
     "html-entities": "^1.3.1",
     "lodash.get": "^4.4.2",
     "lodash.has": "^4.5.2",
-    "lodash.merge": "^4.6.2",
     "lodash.orderby": "^4.6.0",
     "metro-config": "^0.64.0",
     "mime-types": "^2.1.28",

src/components/CreateMenu.js

@@ -8,7 +8,8 @@ import styles from '../styles/styles';
 import CONST from '../CONST';
 import themeColors from '../styles/themes/default';
 import colors from '../styles/colors';
-import {ChatBubbleIcon, UsersIcon} from './Expensicons';
+import Icon from './Icon';
+import {ChatBubble, Users} from './Icon/Expensicons';
 import variables from '../styles/variables';
 
 const propTypes = {
@@ -28,8 +29,8 @@ const CreateMenu = (props) => {
     // This format allows to set individual callbacks to each item
     // while including mutual callbacks first
     const menuItemData = [
-        {IconComponent: ChatBubbleIcon, text: 'New Chat', onPress: () => {}},
-        {IconComponent: UsersIcon, text: 'New Group', onPress: () => {}},
+        {icon: ChatBubble, text: 'New Chat', onPress: () => {}},
+        {icon: Users, text: 'New Group', onPress: () => {}},
     ].map(item => ({
         ...item,
         onPress: () => {
@@ -48,7 +49,7 @@ const CreateMenu = (props) => {
                     : CONST.MODAL.MODAL_TYPE.POPOVER
             }
         >
-            {menuItemData.map(({IconComponent, text, onPress}) => (
+            {menuItemData.map(({icon, text, onPress}) => (
                 <Pressable
                     key={text}
                     onPress={onPress}
@@ -58,7 +59,7 @@ const CreateMenu = (props) => {
                     ])}
                 >
                     <View style={styles.createMenuIcon}>
-                        <IconComponent width={24} height={24} />
+                        <Icon src={icon} width={variables.iconSizeLarge} height={variables.iconSizeLarge} />
                     </View>
                     <View style={styles.justifyContentCenter}>
                         <Text style={[styles.createMenuText, styles.ml3]}>

src/components/FAB.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import {Pressable, Animated, Easing} from 'react-native';
 import PropTypes from 'prop-types';
-import {PlusIcon} from './Expensicons';
+import Icon from './Icon';
+import {Plus} from './Icon/Expensicons';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 
-const AnimatedPlusIcon = Animated.createAnimatedComponent(PlusIcon);
+const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 const propTypes = {
@@ -67,7 +68,7 @@ class FAB extends React.Component {
                     {transform: [{rotate}], backgroundColor},
                 ]}
             >
-                <AnimatedPlusIcon fill={fill} />
+                <AnimatedIcon src={Plus} fill={fill} />
             </AnimatedPressable>
         );
     }

src/components/HeaderWithCloseButton.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-    View, Image, TouchableOpacity,
+    View, TouchableOpacity,
 } from 'react-native';
 import styles from '../styles/styles';
-import exitIcon from '../../assets/images/icon-x--20x20.png';
 import Header from './Header';
+import Icon from './Icon';
+import {Close} from './Icon/Expensicons';
 
 const propTypes = {
     /** Title of the Header */
@@ -37,11 +38,7 @@ const HeaderWithCloseButton = props => (
                     onPress={props.onCloseButtonPress}
                     style={[styles.touchableButtonImage]}
                 >
-                    <Image
-                        resizeMode="contain"
-                        style={[styles.attachmentCloseIcon]}
-                        source={exitIcon}
-                    />
+                    <Icon src={Close} />
                 </TouchableOpacity>
             </View>
         </View>

src/components/Icon/BrandAssets.js

@@ -0,0 +1,6 @@
+import ExpensifyCashLogo from '../../../assets/images/expensify-cash.svg';
+
+export {
+    // eslint-disable-next-line import/prefer-default-export
+    ExpensifyCashLogo,
+};

src/components/Icon/Expensicons.js

@@ -0,0 +1,23 @@
+import BackArrow from '../../../assets/images/back-left.svg';
+import ChatBubble from '../../../assets/images/chatbubble.svg';
+import Close from '../../../assets/images/close.svg';
+import MagnifyingGlass from '../../../assets/images/magnifyingglass.svg';
+import Paperclip from '../../../assets/images/paperclip.svg';
+import Pencil from '../../../assets/images/pencil.svg';
+import Pin from '../../../assets/images/pin.svg';
+import Plus from '../../../assets/images/plus.svg';
+import Send from '../../../assets/images/send.svg';
+import Users from '../../../assets/images/users.svg';
+
+export {
+    BackArrow,
+    ChatBubble,
+    Close,
+    MagnifyingGlass,
+    Paperclip,
+    Pencil,
+    Pin,
+    Plus,
+    Send,
+    Users,
+};