Open Source

React Avatar

The Ignite UI for React Avatar helps to display initials, images, or icons in your application.

React Icon Avatar Example

Usage

First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

npm install igniteui-react

You will then need to import the IgrAvatar and its necessary CSS, like so:

import { IgrAvatar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

Before using the IgrAvatar, you need to register it as follows:

For a complete introduction to the Ignite UI for React, read the Getting Started topic.

The IgrAvatar is capable of displaying images, initials, or any other content, including icons. Declaring an IgrAvatar is as simple as:

<IgrAvatar />

The avatar has several attributes that allow rendering different content based on the context. The most basic way to display content in the boundaries of the avatar is to provide content between the opening and closing tags.

<IgrAvatar>
    <IgrIcon name="home" />
</IgrAvatar>

Initials

If the Initials attribute is set all children elements of the avatar will be ignored and the string passed to this attribute will be displayed.

<IgrAvatar initials="AZ">
    <IgrIcon name="home" />
</IgrAvatar>

Image

The avatar can also display an image when the Src attribute is assigned a valid URL to a static asset. In that case the Initials value will be ignored and children elements will not be rendered.

<IgrAvatar initials="AZ"
           src="https://static.infragistics.com/xplatform/images/people/men/1.jpg"
           alt="A photo of a man.">
    <IgrIcon name="home" />
</IgrAvatar>

Shape

The avatar supports three shapes - circle, rounded, and square. The default shape of the avatar is square and it can be changed via the shape attribute.

Size

Apart from the shape, the size of the avatar can also be changed by utilizing the --ig-size CSS variable. The supported sizes are small (default), medium, and large. The following code snippet shows how to use a different component size:

igc-avatar {
  --ig-size: var(--ig-size-large);
}

Styling

The IgrAvatar component exposes several CSS parts, giving you full control over its style:

Name	Description
`base`	The base wrapper of the avatar.
`initials`	The initials wrapper of the avatar.
`image`	The image wrapper of the avatar.
`icon`	The icon wrapper of the avatar.

igc-avatar::part(base) {
  --size: 60px;
  color: var(--ig-success-500-contrast);
  background: var(--ig-success-500);;
  border-radius: 20px;
}