Avatar
ユーザーアバター表示コンポーネント。
インポート
import { Avatar, AvatarImage, AvatarFallback } from '@caroainc/ui-components/client'個別サブパス（バンドルサイズを抑えたい場合）:
import { Avatar, AvatarImage, AvatarFallback } from '@caroainc/ui-components/avatar'基本的な使い方
alt には「avatar」「icon」のような汎用的な文言ではなく、誰の画像か分かる具体的な名前を指定します（画像が読み込めない環境やスクリーンリーダー利用時に意味を持つのはこの文言だけです）。
田
<Avatar>
<AvatarImage src={user.avatarUrl} alt={`${user.name}のプロフィール画像`} />
<AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
</Avatar>フォールバック
画像が読み込めない場合に表示されます。
Loading...
<Avatar>
<AvatarFallback>YT</AvatarFallback>
</Avatar>サイズ変更
size propで4段階のサイズを指定できます（デフォルトは default）。
Loading...
<Avatar size="sm">
<AvatarFallback>SM</AvatarFallback>
</Avatar>
<Avatar size="default">
<AvatarFallback>MD</AvatarFallback>
</Avatar>
<Avatar size="lg">
<AvatarFallback>LG</AvatarFallback>
</Avatar>
<Avatar size="xl">
<AvatarFallback>XL</AvatarFallback>
</Avatar>className で任意のサイズに上書きすることも引き続き可能です（例: <Avatar className="h-20 w-20">）。
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'default' | 'lg' | 'xl' | 'default' | アバターのサイズ（sm: 32px, default: 40px, lg: 48px, xl: 64px） |
className | string | - | 追加のCSSクラス（sizeを上書きする場合等） |