Avatar
ユーザーのプロフィール画像を表示するコンポーネント。画像が取得できない場合はイニシャルなどのフォールバックテキストを表示する。
インストール
npx shoji add avatar
プレビュー
SC
Sizes
KYsm · 32px
KYmd · 40px
KYlg · 56px
States
画像あり
SC
フォールバック
KY
使い方
こんなときに使う
- ユーザーのプロフィール画像を表示するとき
- コメント・投稿者・チームメンバーリストなど
- 画像が存在しない場合のフォールバック表示が必要なとき
使わないほうがいい場面
- アバター以外の一般的な画像表示（img タグや Next.js Image を使う）
JP 最適化のポイント
- フォールバックに日本語のイニシャル（姓の1文字など）を表示する場合、英字より字形が大きいため font-size の調整が必要なことがある