npm package: @paprika/avatar
Description: Avatar component represents an object or entity and displays initials or icon.
Author: @paprika
Latest version: 2.2.21

<!-- start: Autogenerated - do not modify -->

# @paprika/avatar

## Description

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

## Installation

```
yarn add @paprika/avatar
```

or with npm:

```
npm install @paprika/avatar
```

## Props

### 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                                        |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## 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 `getAvatarColor`function with the children props value as the parameter.

```js
import Avatar from "@paprika/avatar";

<Avatar>Terry Fox</Avatar>;
```

Access `getAvatarColors`

```js
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

```js
import Avatar from "@paprika/avatar";

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

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/display-avatar--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Avatar/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/avatar%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Avatar/CHANGELOG.md)