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 | unionPossible values:'s' , 'm' , 'l' | | 's' | The size of the rendered avatar. | | color | unionPossible values:'accent' , 'purple' , 'turquoise' , 'brown' | | 'accent' | The color of the avatar. | | icon | ReactElement | | | an component |