A component for rendering profile images
yarn add @commercetools-uikit/avatar
npm --save install @commercetools-uikit/avatar
Additionally install the peer dependencies (if not present)
yarn add react
npm --save install react
import Avatar from '@commercetools-uikit/avatar';
const Example = () => (
<Avatar
gravatarHash="20c9c1b252b46ab49d6f7a4cee9c3e68"
firstName="John"
lastName="Doe"
size="s"
/>
);
export default Example;
Props | Type | Required | Default | Description |
---|---|---|---|---|
firstName |
string |
'' |
The first name of the user. | |
lastName |
string |
'' |
The last name of the user. | |
gravatarHash |
string |
✅ | The hashed string of the user gravatar. | |
isHighlighted |
boolean |
false |
Enhances the appearance of the avatar. | |
size |
union Possible values: 's' , 'm' , 'l'
|
's' |
The size of the rendered avatar. | |
color |
union Possible values: 'accent' , 'purple' , 'turquoise' , 'brown'
|
'accent' |
The color of the avatar. | |
icon |
ReactElement |
an component |