styles.ts

import { mq } from '@revolut/ui-kit'
import { size } from 'polished'
import { css } from 'styled-components'

const AVATAR_S = css`
  ${size(40)}
  
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
    
  @media ${mq('md')} {
    ${size(48)}
    font-size: 1.5rem;
  }
`

const AVATAR_M = css`
  ${size(48)}
  
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  
  @media ${mq('md')} {
    ${size(56)}
    font-size: 1.75rem;
  }
`

const AVATAR_L = css`
  ${size(64)}
  
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  
  @media ${mq('md')} {
    ${size(72)}
  }
`

export const AVATAR_STYLES = {
  sm: AVATAR_S,
  md: AVATAR_M,
  lg: AVATAR_L,
} as const

user-avatar-circle.ts

import styled from 'styled-components'
import { Circle } from '@revolut/ui-kit' 
import { AVATAR_STYLES } from './styles.ts'

export type UserAvatarCircleProps = {
  size: keyof typeof AVATAR_STYLES
}

export const UserAvatarCircle = styled(Circle)<UserAvatarCircleProps>`
  ${props => AVATAR_STYLES[props.size]}
`
  
UserAvatarCircle.defaultProps = {
  size: 'md',
}

user-avatar.tsx

import { Text } from '@revolut/ui-kit' 
import { UserAvatarCircle, UserAvatarCircleProps  } from './user-avatar-circle' 

type Props = UserAvatarCircleProps & {
  image: string
  name: string
  id: string
}

export const UserAvatar = (props: UserAvatarCircleProps) => (
  <UserAvatarCircle 
    color='white' 
    bg={props.image ? undefined : generateColorFromString(props.id)}
    image={props.image}
  >
    {image ? null : name[0].toUpperCase()}
  </UserAvatarCircle>
)