React

Avatar コンポーネントは <svg> 要素を直接描画します。プロダクトの UI に組み込むいちばんの近道です。

シードから描画する

ユーザー ID、メールアドレス、ユーザー名など、変わらない文字列ならなんでも渡せます。アセットパッケージのバージョンが同じなら、同じシードからは毎回同じパーツが選ばれます。

felix

ayaka

user_10482

orange

a1b2c3

import { Avatar } from '@humation/react';
import { humation1 } from '@humation/assets-humation-1';

export function UserAvatar({ user }: { user: { id: string; name: string } }) {
  return (
    <Avatar
      assets={humation1}
      seed={user.id}
      size={96}
      title={user.name}
    />
  );
}

選択を指定して描画する

ユーザーが自分でアバターを選ぶ場合は、シードの代わりに selections と colors を渡します。パーツ名、エイリアス、正規 ID のどれでも指定できます。

<Avatar
  assets={humation1}
  selections={{ head: 'braids', body: 'hoodie', item: 'calico-cat' }}
  colors={{ hair: '#4A3728', skin: '#F4C9A8' }}
  size={128}
/>

名前の一覧はパーツにあります。シードと選択は組み合わせても大丈夫です。シードがすべてのスロットを埋め、明示した選択がそのスロットだけを上書きします。

色は CSS カスタムプロパティ

colors プロパティは <svg> 要素に CSS カスタムプロパティとして適用されるので、色を変えてもアバターの中身は再レンダリングされません。指定しなかったスロットはアセットに組み込まれたデフォルト色のままで、自分の CSS からテーマとして上書きできます。

.avatar-on-dark {
  --hm-stroke: #ffffff;
  --hm-background: transparent;
}

アクセシビリティ

アバターで人物を識別する場合は title を渡します。渡さなければアバターは装飾として扱われ、スクリーンリーダーには読み上げられません。名前がすぐ隣に表示されている場面では、これが適切なデフォルトです。

<Avatar assets={humation1} seed={user.id} title={user.name} />

<span aria-hidden="true"><Avatar assets={humation1} seed={user.id} /></span>
<span>{user.name}</span>

残りの SVG プロパティはすべてルート要素に渡されるので、className、style、onClick、ref は普段どおりに使えます。一覧はオプションにあります。