use useravatars for starter pack icon

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -21,7 +21,9 @@ import {Text} from '../util/text/Text'
 import {UserAvatar, UserAvatarType} from '../util/UserAvatar'
 import {CenteredView} from '../util/Views'
 import hairlineWidth = StyleSheet.hairlineWidth
-import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
+import {AppBskyGraphDefs} from '@atproto/api'
+
+import {StarterPackAvatarsIcon} from '#/components/StarterPack/StarterPackAvatarsIcon'
 
 export function ProfileSubpageHeader({
   isLoading,
@@ -31,6 +33,7 @@ export function ProfileSubpageHeader({
   isOwner,
   creator,
   avatarType,
+  starterPack,
   children,
 }: React.PropsWithChildren<{
   isLoading?: boolean
@@ -44,6 +47,7 @@ export function ProfileSubpageHeader({
         handle: string
       }
     | undefined
+  starterPack?: AppBskyGraphDefs.StarterPackView
   avatarType: UserAvatarType | 'starter-pack'
 }>) {
   const setDrawerOpen = useSetDrawerOpen()
@@ -132,7 +136,7 @@ export function ProfileSubpageHeader({
           accessibilityHint=""
           style={{width: 58}}>
           {avatarType === 'starter-pack' ? (
-            <StarterPackIcon width={58} height={58} />
+            <StarterPackAvatarsIcon starterPack={starterPack} />
           ) : (
             <UserAvatar type={avatarType} size={58} avatar={avatar} />
           )}

src/view/com/util/UserAvatar.tsx

@@ -31,7 +31,7 @@ import * as Menu from '#/components/Menu'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {openCamera, openCropper, openPicker} from '../../../lib/media/picker'
 
-export type UserAvatarType = 'user' | 'algo' | 'list' | 'labeler'
+export type UserAvatarType = 'user' | 'algo' | 'list' | 'labeler' | 'square'
 
 interface BaseUserAvatarProps {
   type?: UserAvatarType
@@ -168,6 +168,13 @@ let UserAvatar = ({
   const backgroundColor = pal.colors.backgroundLight
 
   const aviStyle = useMemo(() => {
+    if (type === 'square') {
+      return {
+        width: size,
+        height: size,
+        backgroundColor,
+      }
+    }
     if (type === 'algo' || type === 'list' || type === 'labeler') {
       return {
         width: size,