@paprika/avatar

Avatar

Avatar component represents an object or entity and displays initials or icon.

Usage

By default, Avatar component sets the background and text color using the getAvatarColorfunction with the children props value as the parameter.

import Avatar from "@paprika/avatar";

<Avatar>Terry Fox</Avatar>;

Access getAvatarColors

import Avatar from "@paprika/avatar";
import { getAvatarColors } from "@paprika/avatar/lib/helpers";

const color = getAvatarColors("Terry Fox");

<Avatar backgroundColor={color.backgroundColor} color={color.fontColor}>
  Terry Fox
</Avatar>;

Set custom size, background and text color

import Avatar from "@paprika/avatar";

<Avatar backgroundColor="black" color="white" size="small">
  Terry Fox
</Avatar>;