Lism CSS
Docs
検索

Avatar

アバター画像用のコンポーネントです。画像がない場合は、名前のイニシャル1文字をプレースホルダーとして表示できます。

Overview

↓
Preview
Avatar of xxxx
<Avatar size="4rem" src="https://cdn.lism-css.com/img/avatar/EkABPzB34XR7.webp" alt="Avatar of xxxx" />

Styles

Avatar のベーススタイルは、以下のCSSで定義されています。

_style.css 
@layer lism-block {
  /* src ありの通常時: l--frame との併用が前提 */
  .b--avatar {
    --w: 2em; /* size prop未指定時のデフォルトサイズ */
    width: var(--w);
    aspect-ratio: 1/1;
    border-radius: var(--bdrs--99);
  }

  /* src 未指定時: name のイニシャル1文字を表示する。l--center との併用が前提 */
  .b--avatar--initial {
    --lh: 1;
    background-color: var(--base-2);
    text-transform: uppercase;
    user-select: none;

    /* --w が em単位の時を考慮し、子要素側で計算する */
    > * {
      font-size: calc(var(--w) / 2);
    }
  }
}

ソースコード全体は GitHub で公開しています。

How to use

@lism-css/ui パッケージでAvatar(b--avatar)として提供しています。

Import

import { Avatar } from '@lism-css/ui/react';

Props

プロパティ 説明
size アバターのサイズを指定します。初期値:"2em"
src アバター画像のパス。未指定の場合はnameのイニシャルを表示します。
name ユーザー名。src未指定時に先頭1文字をイニシャルとして表示します。alt未指定時は代替テキストとしても使われます。
alt 代替テキスト。指定時はnameより優先されます。隣に名前テキストが並ぶなど読み上げが二重になる場合はalt=""で装飾扱いにできます。

Examples

↓
Avatarの使用例
Avatar of xxxx
Avatar of xxxx
<Avatar size="4rem" src="https://cdn.lism-css.com/img/avatar/EkABPzB34XR7.webp" alt="Avatar of xxxx"/>
<Avatar size="5rem" src="https://cdn.lism-css.com/img/avatar/of5v8rPFMI8F.webp" alt="Avatar of xxxx" bd bdw="2px" bdc="base" bxsh="20"/>

イニシャル表示

srcを省略すると、ルートがl--frameからl--centerに切り替わり、b--avatar--initialが付いてnameの先頭1文字を中央に表示します。大文字化はCSSのtext-transform: uppercaseで行い、文字サイズはアバターのサイズ（--w）に比例します。

スタイルはルートのb--avatar--initialに当てているため、背景色はbgcなどのPropで上書きできます。

↓
srcを省略してイニシャルを表示する
Y
鈴
<Avatar size="2rem" name="Yamada Taro" />
<Avatar size="3rem" name="鈴木" bgc="brand" c="base" />

画像の読み込み失敗時にイニシャルへ切り替える機能はありません。Astro版が静的HTMLのため、クライアントJSでのロード状態監視は持ち込まない方針です。

Without @lism-css/ui

@lism-css/uiを使用せずに、lism-css のみで Avatar を構築するコード例を紹介します。

↓
Example
Avatar of xxxx
<Frame ar="1/1" w="4em" bdrs="99">
  <img src="https://cdn.lism-css.com/img/avatar/EkABPzB34XR7.webp" alt="Avatar of xxxx" width="100%" height="100%" decoding="async" />
</Frame>

© 2026 Lism CSS.