Avatar component represents an object or entity and displays initials or icon.
npm install @paprika/avatarAvatar component represents an object or entity and displays initials or icon.
``
yarn add @paprika/avatar
or with npm:
`
npm install @paprika/avatar
| Prop | Type | required | default | Description |
| --------------- | ----------------------------------------------------------------------------- | -------- | ----------------------- | ----------------------------------------------------- |
| children | node | false | null | Avatar content. It can be initial as a string or icon |
| backgroundColor | string | false | null | Background color of the Avatar |
| color | string | false | null | Color for the initial or icon |
| isRound | bool | false | false | Shape of the Avatar |
| size | [ Avatar.types.size.SMALL, Avatar.types.size.MEDIUM, Avatar.types.size.LARGE] | false | Avatar.types.size.LARGE | Size of Avatar |
Avatar component represents an object or entity and displays initials or icon.
By default, Avatar component sets the background and text color using the getAvatarColorfunction with the children props value as the parameter.
`js
import Avatar from "@paprika/avatar";
`
Access getAvatarColors
`js
import Avatar from "@paprika/avatar";
import { getAvatarColors } from "@paprika/avatar/lib/helpers";
const color = getAvatarColors("Terry Fox");
Terry Fox
`
Set custom size, background and text color
`js
import Avatar from "@paprika/avatar";
Terry Fox
``
- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG