# Avatar

`Avatar`コンポーネントは、ユーザーのプロフィール画像を表示するためのシンプルで便利な方法です。ユーザーの分散型識別子（DID）に基づいてユニークなアバターを自動生成したり、指定されたURLから画像を表示したりできます。

このコンポーネントは`@arcblock/ux`ライブラリから直接再エクスポートされており、ArcBlockエコシステム全体で一貫したルックアンドフィールを保証します。

## インポート

`Avatar`コンポーネントは、次のようにライブラリからインポートできます。

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

## 使用方法

最も一般的な使用例は、現在ログインしているユーザーのアバターを表示することです。`useSession`フックからユーザー情報を取得し、そのDIDを`Avatar`コンポーネントに渡すことができます。

```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>
  );
}
```

## プロパティ

`Avatar`コンポーネントは、すべてのプロパティを`@arcblock/ux`の基盤となるコンポーネントに転送します。以下は、最も一般的に使用されるプロパティの一部です。

<x-field-group>
  <x-field data-name="did" data-type="string" data-required="false">
    <x-field-desc markdown>ユーザーのDID。提供された場合、ユニークなブロックベースのアバターが生成されます。これはDIDユーザーのアバターを表示するための推奨される方法です。</x-field-desc>
  </x-field>
  <x-field data-name="src" data-type="string" data-required="false">
    <x-field-desc markdown>表示する特定の画像のURL。`src`と`did`の両方が提供された場合、`src`が優先されます。</x-field-desc>
  </x-field>
  <x-field data-name="size" data-type="number" data-default="40" data-required="false">
    <x-field-desc markdown>アバターのサイズ（幅と高さ）をピクセル単位で指定します。</x-field-desc>
  </x-field>
  <x-field data-name="shape" data-type="'circle' | 'square'" data-default="'circle'" data-required="false">
    <x-field-desc markdown>アバターの形状を定義します。`circle`または`square`のいずれかを指定できます。</x-field-desc>
  </x-field>
  <x-field data-name="variant" data-type="string" data-default="'beam'" data-required="false">
    <x-field-desc markdown>DIDからアバターを生成するために使用されるアルゴリズム。一般的な値には`beam`、`pixel`、`ring`などがあります。</x-field-desc>
  </x-field>
  <x-field data-name="...rest" data-type="any" data-required="false">
    <x-field-desc markdown>`className`や`style`のような他の標準HTML属性は、コンポーネントのルート`div`要素に渡すことができます。</x-field-desc>
  </x-field>
</x-field-group>

ユーザーのアバターを表示した後、彼らのDIDアドレスも表示したいかもしれません。次のセクションに進み、[Address](./ui-components-address.md)コンポーネントについて学びましょう。