Replace icons

assets/icons/listPlus_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 5a1 1 0 0 0 0 2h16a1 1 0 1 0 0-2H4Zm0 12a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2H4Zm-1-5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm14-3c.552 0 1 .41 1 .917V13.5h3.583c.507 0 .917.448.917 1s-.41 1-.917 1H18v3.583c0 .507-.448.917-1 .917s-1-.41-1-.917V15.5h-3.583c-.507 0-.917-.448-.917-1s.41-1 .917-1H16V9.917C16 9.41 16.448 9 17 9Z" clip-rule="evenodd"/></svg>

assets/icons/menu_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>

src/components/icons/ListPlus.tsx

@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+/*
+ * This icon is off-menu, not part of the icon set
+ */
+
+export const ListPlus_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M4 5a1 1 0 0 0 0 2h16a1 1 0 1 0 0-2H4Zm0 12a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2H4Zm-1-5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm14-3c.552 0 1 .41 1 .917V13.5h3.583c.507 0 .917.448.917 1s-.41 1-.917 1H18v3.583c0 .507-.448.917-1 .917s-1-.41-1-.917V15.5h-3.583c-.507 0-.917-.448-.917-1s.41-1 .917-1H16V9.917C16 9.41 16.448 9 17 9Z',
+})

src/components/icons/Menu.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Menu_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M2 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Z',
+})

src/view/com/home/HomeHeaderLayout.web.tsx

@@ -10,7 +10,7 @@ import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {Logo} from '#/view/icons/Logo'
 import {atoms as a, useTheme} from '#/alf'
-import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
+import {ListPlus_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/ListPlus'
 import {Link} from '#/components/Link'
 import {useKawaiiMode} from '../../../state/preferences/kawaii'
 import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile'
@@ -77,7 +77,7 @@ function HomeHeaderLayoutDesktopAndTablet({
             to="/feeds"
             hitSlop={10}
             label={_(msg`View your feeds and explore more`)}>
-            <ListSparkle size="lg" fill={t.atoms.text_contrast_medium.color} />
+            <FeedsIcon size="lg" fill={t.atoms.text_contrast_medium.color} />
           </Link>
         </View>
       )}

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import Animated from 'react-native-reanimated'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -16,7 +15,8 @@ import {Logo} from '#/view/icons/Logo'
 import {atoms} from '#/alf'
 import {useTheme} from '#/alf'
 import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette'
-import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
+import {ListPlus_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/ListPlus'
+import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import {Link} from '#/components/Link'
 import {IS_DEV} from '#/env'
 
@@ -55,11 +55,7 @@ export function HomeHeaderLayoutMobile({
               msg`Access profile and other navigation links`,
             )}
             hitSlop={HITSLOP_10}>
-            <FontAwesomeIcon
+            <Menu size="lg" fill={t.atoms.text_contrast_medium.color} />
-              icon="bars"
-              size={18}
-              color={pal.colors.textLight}
-            />
           </TouchableOpacity>
         </View>
         <View>
@@ -85,10 +81,7 @@ export function HomeHeaderLayoutMobile({
               to="/feeds"
               hitSlop={HITSLOP_10}
               label={_(msg`View your feeds and explore more`)}>
-              <ListSparkle
+              <FeedsIcon size="lg" fill={t.atoms.text_contrast_medium.color} />
-                size="lg"
-                fill={t.atoms.text_contrast_medium.color}
-              />
             </Link>
           )}
         </View>
@@ -112,7 +105,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: 18,
+    paddingHorizontal: 16,
     paddingVertical: 8,
     width: '100%',
   },

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -21,6 +21,7 @@ import {Text} from '../util/text/Text'
 import {UserAvatar, UserAvatarType} from '../util/UserAvatar'
 import {CenteredView} from '../util/Views'
 import hairlineWidth = StyleSheet.hairlineWidth
+import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 
 export function ProfileSubpageHeader({
   isLoading,
@@ -103,11 +104,7 @@ export function ProfileSubpageHeader({
                 style={[styles.backIcon, pal.text]}
               />
             ) : (
-              <FontAwesomeIcon
+              <Menu size="lg" style={[{marginTop: 4}, pal.textLight]} />
-                size={18}
-                icon="bars"
-                style={[styles.backIcon, pal.textLight]}
-              />
             )}
           </Pressable>
           <View style={{flex: 1}} />
@@ -194,7 +191,7 @@ const styles = StyleSheet.create({
   backBtnWide: {
     width: 20,
     height: 30,
-    paddingHorizontal: 6,
+    marginRight: 4,
   },
   backIcon: {
     marginTop: 6,

src/view/com/util/SimpleViewHeader.tsx

@@ -8,13 +8,15 @@ import {
 } from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
-import {CenteredView} from './Views'
+
+import {isWeb} from '#/platform/detection'
+import {useSetDrawerOpen} from '#/state/shell'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {useAnalytics} from 'lib/analytics/analytics'
 import {NavigationProp} from 'lib/routes/types'
-import {useSetDrawerOpen} from '#/state/shell'
+import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
-import {isWeb} from '#/platform/detection'
+import {CenteredView} from './Views'
 
 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 
@@ -72,11 +74,7 @@ export function SimpleViewHeader({
               style={[styles.backIcon, pal.text]}
             />
           ) : (
-            <FontAwesomeIcon
+            <Menu size="lg" style={[{marginTop: 4}, pal.textLight]} />
-              size={18}
-              icon="bars"
-              style={[styles.backIcon, pal.textLight]}
-            />
           )}
         </TouchableOpacity>
       ) : null}
@@ -110,7 +108,8 @@ const styles = StyleSheet.create({
   backBtnWide: {
     width: 30,
     height: 30,
-    paddingHorizontal: 6,
+    paddingLeft: 4,
+    marginRight: 4,
   },
   backIcon: {
     marginTop: 6,

src/view/com/util/ViewHeader.tsx

@@ -16,6 +16,7 @@ import {useTheme} from '#/alf'
 import {Text} from './text/Text'
 import {CenteredView} from './Views'
 import hairlineWidth = StyleSheet.hairlineWidth
+import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 
 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 
@@ -98,11 +99,7 @@ export function ViewHeader({
                     style={[styles.backIcon, pal.text]}
                   />
                 ) : !isTablet ? (
-                  <FontAwesomeIcon
+                  <Menu size="lg" style={[{marginTop: 4}, pal.textLight]} />
-                    size={18}
-                    icon="bars"
-                    style={[styles.backIcon, pal.textLight]}
-                  />
                 ) : null}
               </TouchableOpacity>
             ) : null}
@@ -269,7 +266,8 @@ const styles = StyleSheet.create({
   backBtnWide: {
     width: 30,
     height: 30,
-    paddingHorizontal: 6,
+    paddingLeft: 4,
+    marginRight: 4,
   },
   backIcon: {
     marginTop: 6,

src/view/screens/Search/Search.tsx

@@ -59,6 +59,7 @@ import {CenteredView, ScrollView} from '#/view/com/util/Views'
 import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search'
 import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
 import {atoms as a} from '#/alf'
+import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 
 function Loader() {
   const pal = usePalette('default')
@@ -712,11 +713,7 @@ export function SearchScreen(
             accessibilityRole="button"
             accessibilityLabel={_(msg`Menu`)}
             accessibilityHint={_(msg`Access navigation links and settings`)}>
-            <FontAwesomeIcon
+            <Menu size="lg" fill={pal.colors.textLight} />
-              icon="bars"
-              size={18}
-              color={pal.colors.textLight}
-            />
           </Pressable>
         )}
         <SearchInputBox