コア

@humation/core は React を使わずにアバターを SVG に描画します。Node、Cloudflare Workers、書き出し処理、テスト、独自のフレームワークで使えます。

bun add @humation/core @humation/assets-humation-1

pnpm add @humation/core @humation/assets-humation-1

npm install @humation/core @humation/assets-humation-1

yarn add @humation/core @humation/assets-humation-1

createAvatar

createAvatar は、マニフェストと、React コンポーネントと同じオプションを受け取り、必要な形式に変換できるオブジェクトを返します。

import { createAvatar } from '@humation/core';
import { humation1 } from '@humation/assets-humation-1';

const avatar = createAvatar(humation1, {
  seed: 'felix',
  colors: { hair: '#123456', skin: '#FFEECC' }
});

avatar.toString(); // '<svg ...>...</svg>'
avatar.toDataUri(); // 'data:image/svg+xml;charset=utf-8,...'
avatar.toJSON(); // resolved selections, colors, background, crop

シードから作ったアバターが、実際にどのパーツと色に決まったのかを保存したいときは toJSON() を使います。詳しくは状態の保存を参照してください。

独自のコンポーネントで core をラップする

フレームワーク向けのラッパーを作る場合は、toRenderData() を使います。ルートの <svg> 要素、背景の rect、インラインの色スタイルを除いた、合成済みのフラグメントが取得できます。色は var(--hm-*, fallback) の参照のまま残るので、ラッパー側では中身を再レンダリングせずに、CSS カスタムプロパティで色を切り替えられます。

const { viewBox, background, colors, content } = createAvatar(humation1, {
  seed: 'felix'
}).toRenderData();

@humation/react も内部でまさにこれをやっています。