Add icons to drawer (#3956)

src/view/shell/Drawer.tsx

···
 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'
···
 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,
···
     <MenuItem
       icon={
         isActive ? (
-          <MagnifyingGlassIcon2Solid
+          <MagnifyingGlassFilled
             style={pal.text as StyleProp<ViewStyle>}
-            size={24}
-            strokeWidth={1.7}
+            width={iconWidth}
           />
         ) : (
-          <MagnifyingGlassIcon2
+          <MagnifyingGlass
             style={pal.text as StyleProp<ViewStyle>}
-            size={24}
-            strokeWidth={1.7}
+            width={iconWidth}
           />
         )
       }
···
     <MenuItem
       icon={
         isActive ? (
-          <HomeIconSolid
+          <HomeFilled
             style={pal.text as StyleProp<ViewStyle>}
-            size="24"
-            strokeWidth={3.25}
+            width={iconWidth}
           />
         ) : (
-          <HomeIcon
-            style={pal.text as StyleProp<ViewStyle>}
-            size="24"
-            strokeWidth={3.25}
-          />
+          <Home style={pal.text as StyleProp<ViewStyle>} width={iconWidth} />
         )
       }
       label={_(msg`Home`)}
···
     <MenuItem
       icon={
         isActive ? (
-          <BellIconSolid
+          <BellFilled
             style={pal.text as StyleProp<ViewStyle>}
-            size="24"
-            strokeWidth={1.7}
+            width={iconWidth}
           />
         ) : (
-          <BellIcon
-            style={pal.text as StyleProp<ViewStyle>}
-            size="24"
-            strokeWidth={1.7}
-          />
+          <Bell style={pal.text as StyleProp<ViewStyle>} width={iconWidth} />
         )
       }
       label={_(msg`Notifications`)}
···
     <MenuItem
       icon={
         isActive ? (
-          <HashtagIcon
-            strokeWidth={3}
+          <HashtagFilled
+            width={iconWidth}
             style={pal.text as FontAwesomeIconStyle}
-            size={24}
           />
         ) : (
-          <HashtagIcon
-            strokeWidth={2}
-            style={pal.text as FontAwesomeIconStyle}
-            size={24}
-          />
+          <Hashtag width={iconWidth} style={pal.text as FontAwesomeIconStyle} />
         )
       }
       label={_(msg`Feeds`)}
···
   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=""
···
     <MenuItem
       icon={
         isActive ? (
-          <UserIconSolid
+          <UserCircleFilled
             style={pal.text as StyleProp<ViewStyle>}
-            size="26"
-            strokeWidth={1.5}
+            width={iconWidth}
           />
         ) : (
-          <UserIcon
+          <UserCircle
             style={pal.text as StyleProp<ViewStyle>}
-            size="26"
-            strokeWidth={1.5}
+            width={iconWidth}
           />
         )
       }
···
   return (
     <MenuItem
       icon={
-        <CogIcon
-          style={pal.text as StyleProp<ViewStyle>}
-          size="26"
-          strokeWidth={1.75}
-        />
+        <Settings style={pal.text as StyleProp<ViewStyle>} width={iconWidth} />
       }
       label={_(msg`Settings`)}
       accessibilityLabel={_(msg`Settings`)}