Add icons to drawer (#3956)

src/view/shell/Drawer.tsx

@@ -27,19 +27,6 @@ import {useAnalytics} from 'lib/analytics/analytics'
 import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
 import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
 import {usePalette} from 'lib/hooks/usePalette'
-import {
-  BellIcon,
-  BellIconSolid,
-  CogIcon,
-  HashtagIcon,
-  HomeIcon,
-  HomeIconSolid,
-  ListIcon,
-  MagnifyingGlassIcon2,
-  MagnifyingGlassIcon2Solid,
-  UserIcon,
-  UserIconSolid,
-} from 'lib/icons'
 import {getTabState, TabState} from 'lib/routes/helpers'
 import {NavigationProp} from 'lib/routes/types'
 import {colors, s} from 'lib/styles'
@@ -50,8 +37,30 @@ import {formatCountShortOnly} from 'view/com/util/numeric/format'
 import {Text} from 'view/com/util/text/Text'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {useTheme as useAlfTheme} from '#/alf'
+import {
+  Bell_Filled_Corner0_Rounded as BellFilled,
+  Bell_Stroke2_Corner0_Rounded as Bell,
+} from '#/components/icons/Bell'
+import {BulletList_Stroke2_Corner0_Rounded as List} from '#/components/icons/BulletList'
+import {
+  Hashtag_Filled_Corner0_Rounded as HashtagFilled,
+  Hashtag_Stroke2_Corner0_Rounded as Hashtag,
+} from '#/components/icons/Hashtag'
+import {
+  HomeOpen_Filled_Corner0_Rounded as HomeFilled,
+  HomeOpen_Stoke2_Corner0_Rounded as Home,
+} from '#/components/icons/HomeOpen'
+import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass'
+import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
+import {SettingsGear2_Stroke2_Corner0_Rounded as Settings} from '#/components/icons/SettingsGear2'
+import {
+  UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
+  UserCircle_Stroke2_Corner0_Rounded as UserCircle,
+} from '#/components/icons/UserCircle'
 import {TextLink} from '../com/util/Link'
 
+const iconWidth = 28
+
 let DrawerProfileCard = ({
   account,
   onPressProfile,
@@ -370,16 +379,14 @@ let SearchMenuItem = ({
     <MenuItem
       icon={
         isActive ? (
-          <MagnifyingGlassIcon2Solid
+          <MagnifyingGlassFilled
             style={pal.text as StyleProp<ViewStyle>}
-            size={24}
+            width={iconWidth}
-            strokeWidth={1.7}
           />
         ) : (
-          <MagnifyingGlassIcon2
+          <MagnifyingGlass
             style={pal.text as StyleProp<ViewStyle>}
-            size={24}
+            width={iconWidth}
-            strokeWidth={1.7}
           />
         )
       }
@@ -406,17 +413,12 @@ let HomeMenuItem = ({
     <MenuItem
       icon={
         isActive ? (
-          <HomeIconSolid
+          <HomeFilled
             style={pal.text as StyleProp<ViewStyle>}
-            size="24"
+            width={iconWidth}
-            strokeWidth={3.25}
           />
         ) : (
-          <HomeIcon
+          <Home style={pal.text as StyleProp<ViewStyle>} width={iconWidth} />
-            style={pal.text as StyleProp<ViewStyle>}
-            size="24"
-            strokeWidth={3.25}
-          />
         )
       }
       label={_(msg`Home`)}
@@ -443,17 +445,12 @@ let NotificationsMenuItem = ({
     <MenuItem
       icon={
         isActive ? (
-          <BellIconSolid
+          <BellFilled
             style={pal.text as StyleProp<ViewStyle>}
-            size="24"
+            width={iconWidth}
-            strokeWidth={1.7}
           />
         ) : (
-          <BellIcon
+          <Bell style={pal.text as StyleProp<ViewStyle>} width={iconWidth} />
-            style={pal.text as StyleProp<ViewStyle>}
-            size="24"
-            strokeWidth={1.7}
-          />
         )
       }
       label={_(msg`Notifications`)}
@@ -484,17 +481,12 @@ let FeedsMenuItem = ({
     <MenuItem
       icon={
         isActive ? (
-          <HashtagIcon
+          <HashtagFilled
-            strokeWidth={3}
+            width={iconWidth}
             style={pal.text as FontAwesomeIconStyle}
-            size={24}
           />
         ) : (
-          <HashtagIcon
+          <Hashtag width={iconWidth} style={pal.text as FontAwesomeIconStyle} />
-            strokeWidth={2}
-            style={pal.text as FontAwesomeIconStyle}
-            size={24}
-          />
         )
       }
       label={_(msg`Feeds`)}
@@ -512,7 +504,7 @@ let ListsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
   const pal = usePalette('default')
   return (
     <MenuItem
-      icon={<ListIcon strokeWidth={2} style={pal.text} size={26} />}
+      icon={<List style={pal.text} width={iconWidth} />}
       label={_(msg`Lists`)}
       accessibilityLabel={_(msg`Lists`)}
       accessibilityHint=""
@@ -535,16 +527,14 @@ let ProfileMenuItem = ({
     <MenuItem
       icon={
         isActive ? (
-          <UserIconSolid
+          <UserCircleFilled
             style={pal.text as StyleProp<ViewStyle>}
-            size="26"
+            width={iconWidth}
-            strokeWidth={1.5}
           />
         ) : (
-          <UserIcon
+          <UserCircle
             style={pal.text as StyleProp<ViewStyle>}
-            size="26"
+            width={iconWidth}
-            strokeWidth={1.5}
           />
         )
       }
@@ -563,11 +553,7 @@ let SettingsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
   return (
     <MenuItem
       icon={
-        <CogIcon
+        <Settings style={pal.text as StyleProp<ViewStyle>} width={iconWidth} />
-          style={pal.text as StyleProp<ViewStyle>}
-          size="26"
-          strokeWidth={1.75}
-        />
       }
       label={_(msg`Settings`)}
       accessibilityLabel={_(msg`Settings`)}