@commercetools-uikit/avatar

Avatar

Description

A component for rendering profile images

Installation

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

Usage

import Avatar from '@commercetools-uikit/avatar';

const Example = () => (
  <Avatar
    gravatarHash="20c9c1b252b46ab49d6f7a4cee9c3e68"
    firstName="John"
    lastName="Doe"
    size="s"
  />
);

export default Example;

Properties

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