kasumi/uiAvatar
ユーザーのプロフィール画像やイニシャルを表示するアバターコンポーネント。
Installation
npx shadcn@latest add https://kasumi-ui.vercel.app/r/avatar.jsonUsage
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
<Avatar>
<AvatarImage src="https://github.com/ashunar0.png" alt="ユーザー" />
</Avatar>Size
<Avatar size="sm">
<AvatarImage src="https://github.com/ashunar0.png" alt="ユーザー" />
</Avatar>
<Avatar size="md">
<AvatarImage src="https://github.com/ashunar0.png" alt="ユーザー" />
</Avatar>
<Avatar size="lg">
<AvatarImage src="https://github.com/ashunar0.png" alt="ユーザー" />
</Avatar>Fallback
画像がない場合はデフォルトのユーザーアイコンが表示されます。AvatarFallback でイニシャル等を指定することもできます。
AK
{/* デフォルトアイコン */}
<Avatar />
{/* イニシャル */}
<Avatar>
<AvatarFallback>AK</AvatarFallback>
</Avatar>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | アバターのサイズ |