Avatar

The Avatar component is a versatile and reusable component that allows us to display user avatars or profile pictures in our app. We can customize it by passing various props to suit our component needs. In this guide, we'll walk through how to use the Avatar component in codebase.

Importing the Avatar Component

To use the Avatar component in our app, we need to import it from our styled components. Here's how we can import it:

import { Avatar } from "StyledComponents";

Using the Avatar Component

The Avatar component can be used with various props to control its appearance. Here are some examples of how we can use it:

<Avatar
  url={company.logo || logo}
/>

<Avatar
  name="Hello Moto"
/>

<Avatar
  name="Hello Moto"
  initialsLetterCount={1}
/>

<Avatar
  classNameImg="mr-5"
  classNameInitials="lg:text-5xl text-lg font-bold capitalize text-white"
  classNameInitialsWrapper="mr-5 bg-miru-gray-1000"
  initialsLetterCount={1}
  name={company.name}
  size="h-10 w-10 lg:h-20 lg:w-20"
  url={company.logo || logo}
/>

Avatar Component Props

Name	Description	Default Value
url	Provide the url of the logo	""
name	Pass any name or string value, so that it will display the avatar with initials.	""
initialsLetterCount	Number of initials to appear in the avatar if the name is provided instead of url	2
size	Specify the size of the avatar.	"md:h-10 md:w-10 h-6 w-6"
classNameImg	Specify the style classes needed avatar image	"inline-block rounded-full"
classNameInitials	To provide external classnames for the initials styling. Should be a string.	"md:text-xl text-xs md:font-medium font-light leading-none text-white"
classNameInitialsWrapper	To provide external classnames for the initials wrapper styling. Should be a string.	"inline-flex rounded-full items-center justify-center bg-gray-500"
style	Custom css styles which are not the part of tailwind.	""