Avatar

いつ使うか

• ユーザー一覧やコメント欄など、ユーザーを視覚的に識別する場面で使用する
• ヘッダーのユーザーメニューやプロフィール画面で使用する

いつ使わないか

• ユーザー以外の画像（製品画像、サムネイル等）には使わない。通常の img 要素を使用する
• ロゴやブランドアイコンの表示には使わない

Usage

import { Avatar } from '@bi-shop-it/ui/avatar';

<Avatar name="田中太郎" src="/avatars/tanaka.jpg" />
<Avatar name="John Smith" />
<Avatar name="" />

Props

size の使い分け

フォールバック階層

Avatar は以下の優先順位で表示内容を決定する。

1. 画像 — src が指定されている場合、画像を表示する
2. イニシャル — 画像の読み込みに失敗した場合、または src がない場合、name からイニシャルを生成して表示する
3. アイコン — name が空の場合、User アイコンを表示する

イニシャルの生成ルール:

• スペース区切りで各単語の先頭文字を取得し、最大2文字にする
• sm サイズでは常に1文字に制限する
• 日本語名は先頭1文字を使用する

状態

デフォルト

<Avatar name="田中太郎" src="/avatars/tanaka.jpg" />

イニシャルフォールバック

<Avatar name="田中太郎" />
<Avatar name="John Smith" />
<Avatar name="Alice" />

サイズ

<Avatar name="田中太郎" size="sm" src="..." />
<Avatar name="田中太郎" size="md" src="..." />
<Avatar name="田中太郎" size="lg" src="..." />
<Avatar name="田中太郎" size="xl" src="..." />

アイコンフォールバック

<Avatar name="" />

アクセシビリティ

コンポーネントが内部で処理すること

• name を画像の alt 属性に自動設定し、スクリーンリーダーでユーザー名を読み上げる
• 画像読み込み失敗時に自動的にフォールバックへ切り替わり、視覚的な情報が途切れない
• フォールバックの User アイコンは装飾として扱われ、スクリーンリーダーからは隠される

利用者が対応すること

• name には実際のユーザー名を渡すこと。空文字はユーザー名が不明な場合のみ使用する
• アバターだけでユーザーを識別させず、近くにテキストでユーザー名を併記すること