add icons

src/screens/Onboarding/StepProfile/index.tsx

@@ -29,6 +29,7 @@ import {IconCircle} from '#/components/IconCircle'
 import {Image} from 'expo-image'
 import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions'
 import {openCropper, openPicker} from 'lib/media/picker'
+import {Emoji, emojis, emojiItems} from './types'
 import {SelectImageButton} from '#/screens/Onboarding/StepProfile/SelectImageButton'
 
 interface Avatar {
@@ -75,10 +76,13 @@ export function StepProfile() {
           <IconCircle icon={StreamingLive} style={[a.mb_2xl]} />
 
           <Title>
-            <Trans>Upload a profile picture</Trans>
+            <Trans>Set your profile picture</Trans>
           </Title>
           <Description>
-            <Trans>Help people know you're not a bot!</Trans>
+            <Trans>
+              Help people know you're not a bot by uploading a picture or
+              creating an avatar!
+            </Trans>
           </Description>
 
           <View style={[a.pt_5xl, a.gap_3xl]}>
@@ -112,6 +116,7 @@ export function StepProfile() {
 function AvatarCircle() {
   const t = useTheme()
   const avatar = useAvatar()
+  const Icon = emojiItems[avatar.placeholder]
 
   console.log(avatar)
 
@@ -131,7 +136,7 @@ function AvatarCircle() {
         styles.imageContainer,
         {backgroundColor: avatar.backgroundColor},
       ]}>
-      <Text style={[a.text_5xl]}>{emojiItems[avatar.placeholder]}</Text>
+      <Icon height={85} width={85} style={{color: 'white'}} />
     </View>
   )
 }
@@ -146,14 +151,6 @@ const colors = [
 ] as const
 type Color = (typeof colors)[number]
 
-const emojis = ['camera', 'smile', 'frown', 'eyes'] as const
-type Emoji = (typeof emojis)[number]
-const emojiItems: Record<Emoji, string> = {
-  smile: '😊',
-  frown: '☹️',
-  eyes: '👀',
-}
-
 function ColorItem({color}: {color: Color}) {
   const t = useTheme()
   const avatar = useAvatar()
@@ -190,6 +187,7 @@ function EmojiItem({emoji}: {emoji: Emoji}) {
   const t = useTheme()
   const avatar = useAvatar()
   const setAvatar = useSetAvatar()
+  const Icon = emojiItems[emoji]
 
   const onPress = React.useCallback(() => {
     setAvatar(prev => ({
@@ -214,7 +212,7 @@ function EmojiItem({emoji}: {emoji: Emoji}) {
         },
       ]}
       onPress={onPress}>
-      <Text style={[a.text_5xl]}>{emojiItems[emoji]}</Text>
+      <Icon height={35} width={35} style={[t.atoms.text_contrast_medium]} />
     </Pressable>
   )
 }

src/screens/Onboarding/StepProfile/types.ts

@@ -0,0 +1,42 @@
+import {
+  EmojiSmile_Stroke2_Corner0_Rounded as EmojiSmile,
+  EmojiSad_Stroke2_Corner0_Rounded as EmojiSad,
+  EmojiAlt_Stroke2_Corner0_Rounded as EmojiAlt,
+  EmojiArc_Stroke2_Corner0_Rounded as EmojiArc,
+  EmojiHeartEyes_Stroke2_Corner0_Rounded as EmojiHeartEyes,
+} from '#/components/icons/Emoji'
+import {Alien_Stroke2_Corner0_Rounded as Alien} from '#/components/icons/Alien'
+import {Bubbles_Stroke2_Corner0_Rounded as Bubbles} from '#/components/icons/Bubbles'
+import {Explosion_Stroke2_Corner0_Rounded as Explosion} from '#/components/icons/Explosion'
+import {Lab_Stroke2_Corner0_Rounded as Lab} from '#/components/icons/Lab'
+import {PiggyBank_Stroke2_Corner0_Rounded as PiggyBank} from '#/components/icons/PiggyBank'
+import {Poop_Stroke2_Corner0_Rounded as Poop} from '#/components/icons/Poop'
+
+export const emojis = [
+  'camera',
+  'smile',
+  'sad',
+  'alt',
+  'arc',
+  'heartEyes',
+  'alien',
+  'bubbles',
+  'explosion',
+  'lab',
+  'piggyBank',
+  'poop',
+] as const
+export type Emoji = (typeof emojis)[number]
+export const emojiItems: Record<Emoji, typeof EmojiSmile> = {
+  smile: EmojiSmile,
+  sad: EmojiSad,
+  alt: EmojiAlt,
+  arc: EmojiArc,
+  heartEyes: EmojiHeartEyes,
+  alien: Alien,
+  bubbles: Bubbles,
+  explosion: Explosion,
+  lab: Lab,
+  piggyBank: PiggyBank,
+  poop: Poop,
+}