Improve Expensicon lib

src/components/Expensicons/ICON_NAMES.js

@@ -0,0 +1,4 @@
+export default {
+    EXPENSIFY_CASH_LOGO: 'expensifyCashLogo',
+    PIN: 'pin',
+};

src/components/Expensicons/Icons.js

@@ -0,0 +1,14 @@
+import ICON_NAMES from './ICON_NAMES';
+import ExpensifyCashLogoIcon from '../../../assets/images/expensify-cash.svg';
+import PinIcon from '../../../assets/images/pin.svg';
+
+export default {
+    [ICON_NAMES.EXPENSIFY_CASH_LOGO]: {
+        icon: ExpensifyCashLogoIcon,
+        isAssetColored: true,
+    },
+    [ICON_NAMES.PIN]: {
+        icon: PinIcon,
+        isAssetColored: false,
+    },
+};

src/components/Expensicons/index.js

@@ -1,7 +1,45 @@
-import ExpensifyCashLogoIcon from './ExpensifyCashLogoIcon';
-import PinIcon from './PinIcon';
+import React, {memo} from 'react';
+import PropTypes from 'prop-types';
+import themeColors from '../../styles/themes/default';
+import variables from '../../styles/variables';
+import Expensicons from './Icons';
+import ICON_NAMES from './ICON_NAMES';
 
+const propTypes = {
+    name: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    isEnabled: PropTypes.bool,
+};
+
+const defaultProps = {
+    width: variables.iconSizeSmall,
+    height: variables.iconSizeSmall,
+    isEnabled: false,
+};
+
+const Expensicon = (props) => {
+    const Icon = Expensicons[props.name].icon;
+    let fillColor = props.isEnabled ? themeColors.heading : themeColors.icon;
+
+    // If we have a colored asset, do not pass a fill color
+    if (Expensicons[props.name].isAssetColored) {
+        fillColor = undefined;
+    }
+
+    return (
+        <Icon
+            width={props.width}
+            height={props.height}
+            fill={fillColor}
+        />
+    );
+};
+
+Expensicon.propTypes = propTypes;
+Expensicon.defaultProps = defaultProps;
+
+export default memo(Expensicon);
 export {
-    ExpensifyCashLogoIcon,
-    PinIcon,
+    ICON_NAMES,
 };

src/pages/SetPasswordPage.js

@@ -13,7 +13,7 @@ import lodashHas from 'lodash.has';
 import compose from '../libs/compose';
 import {Redirect, withRouter} from '../libs/Router';
 import styles from '../styles/styles';
-import {ExpensifyCashLogoIcon} from '../components/Expensicons';
+import Expensicon, {ICON_NAMES} from '../components/Expensicons';
 import CustomStatusBar from '../components/CustomStatusBar';
 import {setPassword} from '../libs/actions/Session';
 import ONYXKEYS from '../ONYXKEYS';
@@ -94,7 +94,8 @@ class SetPasswordPage extends Component {
                 <SafeAreaView style={[styles.signInPage]}>
                     <View style={[styles.signInPageInner]}>
                         <View style={[styles.signInPageLogo]}>
-                            <ExpensifyCashLogoIcon
+                            <Expensicon
+                                name={ICON_NAMES.EXPENSIFY_CASH_LOGO}
                                 width={variables.componentSizeLarge}
                                 height={variables.componentSizeLarge}
                             />

src/pages/home/HeaderView.js

@@ -7,7 +7,7 @@ import styles from '../../styles/styles';
 import ONYXKEYS from '../../ONYXKEYS';
 import {withRouter} from '../../libs/Router';
 import LHNToggle from '../../../assets/images/icon-menu-toggle.png';
-import {PinIcon} from '../../components/Expensicons';
+import Expensicon, {ICON_NAMES} from '../../components/Expensicons';
 import compose from '../../libs/compose';
 import {togglePinnedState} from '../../libs/actions/Report';
 
@@ -70,7 +70,7 @@ const HeaderView = props => (
                             onPress={() => togglePinnedState(props.report)}
                             style={[styles.touchableButtonImage, styles.mr0]}
                         >
-                            <PinIcon height={20} width={20} isEnabled={props.report.isPinned} />
+                            <Expensicon name={ICON_NAMES.PIN} isEnabled={props.report.isPinned} />
                         </TouchableOpacity>
                     </View>
                 </View>

src/pages/home/sidebar/ChatSwitcherSearchForm.js

@@ -9,7 +9,8 @@ import {
 import PropTypes from 'prop-types';
 import styles from '../../../styles/styles';
 import themeColors from '../../../styles/themes/default';
-import {ExpensifyCashLogoIcon} from '../../../components/Expensicons';
+import variables from '../../../styles/variables';
+import Expensicon, {ICON_NAMES} from '../../../components/Expensicons';
 import TextInputWithFocusStyles from '../../../components/TextInputWithFocusStyles';
 import iconX from '../../../../assets/images/icon-x.png';
 import {getDisplayName} from '../../../libs/actions/PersonalDetails';
@@ -59,7 +60,11 @@ const ChatSwitcherSearchForm = props => (
     <View style={[styles.flexRow, styles.sidebarHeaderTop]}>
         {props.isLogoVisible && (
             <View style={[styles.mr3]}>
-                <ExpensifyCashLogoIcon />
+                <Expensicon
+                    name={ICON_NAMES.EXPENSIFY_CASH_LOGO}
+                    width={variables.componentSizeNormal}
+                    height={variables.componentSizeNormal}
+                />
             </View>
         )}
 

src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js

@@ -5,7 +5,7 @@ import {
 import PropTypes from 'prop-types';
 import styles from '../../../styles/styles';
 import variables from '../../../styles/variables';
-import {ExpensifyCashLogoIcon} from '../../../components/Expensicons';
+import Expensicon, {ICON_NAMES} from '../../../components/Expensicons';
 
 const propTypes = {
     // The children to show inside the layout
@@ -17,9 +17,10 @@ const SignInPageLayoutNarrow = ({children}) => (
         <View>
             <View style={[styles.signInPageInnerNative]}>
                 <View style={[styles.signInPageLogoNative]}>
-                    <ExpensifyCashLogoIcon
+                    <Expensicon
+                        name={ICON_NAMES.EXPENSIFY_CASH_LOGO}
                         width={variables.componentSizeLarge}
-                        height={variables.componentSizeNormal}
+                        height={variables.componentSizeLarge}
                     />
                 </View>
 

src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js

@@ -4,7 +4,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../../styles/styles';
-import {ExpensifyCashLogoIcon} from '../../../components/Expensicons';
+import Expensicon, {ICON_NAMES} from '../../../components/Expensicons';
 import welcomeScreenshot from '../../../../assets/images/welcome-screenshot-wide.png';
 import variables from '../../../styles/variables';
 
@@ -27,7 +27,8 @@ const SignInPageLayoutWide = ({children}) => (
             </View>
             <View style={[styles.flex1, styles.w50]}>
                 <View style={[styles.signInPageLogo, styles.mt6, styles.mb5]}>
-                    <ExpensifyCashLogoIcon
+                    <Expensicon
+                        name={ICON_NAMES.EXPENSIFY_CASH_LOGO}
                         width={variables.componentSizeLarge}
                         height={variables.componentSizeLarge}
                     />

src/styles/variables.js

@@ -9,6 +9,7 @@ export default {
     fontSizeNormal: 15,
     fontSizeLarge: 17,
     fontSizeh1: 19,
+    iconSizeSmall: 20,
     mobileResponsiveWidthBreakpoint: 1000,
     safeInsertPercentage: 0.7,
     sideBarWidth: 300,