Light icons

2 files changed, 56 insertions, 2 deletions

diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx
new file mode 100644
index 000000000..6e6bcb775
--- /dev/null
+++ b/src/view/lib/icons.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import {StyleProp, ViewStyle} from 'react-native'
+import Svg, {Circle, Line, G, Path} from 'react-native-svg'
+
+export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) {
+  const DIM = 4
+  const ARC = 2
+  return (
+    <Svg width="24" height="24" style={style}>
+      <Path
+        d={`M4,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
+        strokeWidth={2}
+        stroke="#000"
+      />
+      <Path
+        d={`M16,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
+        strokeWidth={2}
+        stroke="#000"
+      />
+      <Path
+        d={`M4,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
+        strokeWidth={2}
+        stroke="#000"
+      />
+      <Path
+        d={`M16,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
+        strokeWidth={2}
+        stroke="#000"
+      />
+    </Svg>
+  )
+}
+
+export function HomeIcon({style}: {style?: StyleProp<ViewStyle>}) {
+  return (
+    <Svg viewBox="0 0 48 48" width="24" height="24" style={style}>
+      <Path
+        strokeWidth={4}
+        stroke="#000"
+        d="M 23.951 2 C 23.631 2.011 23.323 2.124 23.072 2.322 L 8.859 13.52 C 7.055 14.941 6 17.114 6 19.41 L 6 38.5 C 6 39.864 7.136 41 8.5 41 L 18.5 41 C 19.864 41 21 39.864 21 38.5 L 21 28.5 C 21 28.205 21.205 28 21.5 28 L 26.5 28 C 26.795 28 27 28.205 27 28.5 L 27 38.5 C 27 39.864 28.136 41 29.5 41 L 39.5 41 C 40.864 41 42 39.864 42 38.5 L 42 19.41 C 42 17.114 40.945 14.941 39.141 13.52 L 24.928 2.322 C 24.65 2.103 24.304 1.989 23.951 2 Z"
+      />
+    </Svg>
+  )
+}
diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index 17ae47ed9..4acbbfd93 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/src/view/shell/mobile/index.tsx
@@ -33,6 +33,7 @@ import {createBackMenu, createForwardMenu} from './history-menu'
 import {createAccountsMenu} from './accounts-menu'
 import {createLocationMenu} from './location-menu'
 import {s, colors} from '../../lib/styles'
+import {GridIcon, HomeIcon} from '../../lib/icons'
 import {DEF_AVATER} from '../../lib/assets'
 
 const locationIconNeedsNudgeUp = (icon: IconProp) => icon === 'house'
@@ -85,10 +86,19 @@ const Btn = ({
   onPress?: (event: GestureResponderEvent) => void
   onLongPress?: (event: GestureResponderEvent) => void
 }) => {
+  let IconEl
+  if (icon === 'bars') {
+    IconEl = GridIcon
+  } else if (icon === 'house') {
+    IconEl = HomeIcon
+  } else {
+    IconEl = FontAwesomeIcon
+  }
+
   if (inactive) {
     return (
       <View style={styles.ctrl}>
-        <FontAwesomeIcon
+        <IconEl
           size={21}
           style={[styles.ctrlIcon, styles.inactive]}
           icon={icon}
@@ -101,7 +111,7 @@ const Btn = ({
       style={styles.ctrl}
       onPress={onPress}
       onLongPress={onLongPress}>
-      <FontAwesomeIcon size={21} style={styles.ctrlIcon} icon={icon} />
+      <IconEl size={21} style={styles.ctrlIcon} icon={icon} />
     </TouchableOpacity>
   )
 }