# Avatar

The `Avatar` component is a simple and convenient way to display a user's profile picture. It can automatically generate a unique avatar based on the user's Decentralized Identifier (DID) or display an image from a specified URL.

This component is a direct re-export from the `@arcblock/ux` library, ensuring a consistent look and feel across ArcBlock's ecosystem.

## Import

You can import the `Avatar` component from the library as follows:

```javascript icon=logos:javascript
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
```

## Usage

The most common use case is to display the avatar of the currently logged-in user. You can get the user's information from the `useSession` hook and pass their DID to the `Avatar` component.

```jsx User Profile Example icon=logos:react
import React from 'react';
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
import { useSession } from '@arcblock/did-connect-react';

export default function UserProfile() {
  const { session } = useSession();

  if (!session.user) {
    return <div>Loading user...</div>;
  }

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
      <Avatar size={64} did={session.user.did} />
      <h3>{session.user.fullName || 'Anonymous User'}</h3>
    </div>
  );
}
```

## Props

The `Avatar` component forwards all its props to the underlying component from `@arcblock/ux`. Below are some of the most commonly used props:

<x-field-group>
  <x-field data-name="did" data-type="string" data-required="false">
    <x-field-desc markdown>The user's DID. If provided, a unique, block-based avatar will be generated. This is the preferred method for displaying avatars for DID users.</x-field-desc>
  </x-field>
  <x-field data-name="src" data-type="string" data-required="false">
    <x-field-desc markdown>The URL of a specific image to display. If both `src` and `did` are provided, `src` will take precedence.</x-field-desc>
  </x-field>
  <x-field data-name="size" data-type="number" data-default="40" data-required="false">
    <x-field-desc markdown>The size (width and height) of the avatar in pixels.</x-field-desc>
  </x-field>
  <x-field data-name="shape" data-type="'circle' | 'square'" data-default="'circle'" data-required="false">
    <x-field-desc markdown>Defines the shape of the avatar. Can be either `circle` or `square`.</x-field-desc>
  </x-field>
  <x-field data-name="variant" data-type="string" data-default="'beam'" data-required="false">
    <x-field-desc markdown>The algorithm used to generate the avatar from the DID. Common values include `beam`, `pixel`, `ring`, etc.</x-field-desc>
  </x-field>
  <x-field data-name="...rest" data-type="any" data-required="false">
    <x-field-desc markdown>Any other standard HTML attributes like `className` or `style` can be passed to the root `div` element of the component.</x-field-desc>
  </x-field>
</x-field-group>

After displaying the user's avatar, you might also want to show their DID address. Proceed to the next section to learn about the [Address](./ui-components-address.md) component.