Reactで、名前から頭文字と色を決めたアイコンを表示する方法

// 名前から、アイコンに出す頭文字と背景の色を決める関数

const segmenter = new Intl.Segmenter('ja', { granularity: 'grapheme' });

// 見た目の1文字（絵文字や結合文字も1つとして数える）を取り出す
function firstGrapheme(s: string): string {
  for (const { segment } of segmenter.segment(s)) return segment;
  return '';
}

// 見た目の文字数（'👩‍💻'.length は 5 だが、ここでは 1 と数える）
export function graphemeCount(s: string): number {
  return [...segmenter.segment(s)].length;
}

// 全角・半角をそろえ、前後の空白を取り、空白で区切った語の配列にする
function toWords(name: string): string[] {
  return name.normalize('NFKC').trim().split(/\s+/).filter((w) => w !== '');
}

// ラテン文字の名前は最初と最後の語の頭文字を大文字で2文字、それ以外は最初の1文字
export function getInitials(name: string): string {
  const words = toWords(name);
  if (words.length === 0) return '?';
  const first = firstGrapheme(words[0]);
  if (!/^\p{Script=Latin}/u.test(first)) return first;
  const last = words.length > 1 ? firstGrapheme(words[words.length - 1]) : '';
  return (first + last).toUpperCase();
}

// 文字列から 32bit の数を作る。1文字ずつ、排他的論理和と掛け算を繰り返す
// 同じ文字列なら、いつ・どこで実行しても同じ数になる
export function hashString(s: string): number {
  let h = 0x811c9dc5;
  for (let i = 0; i < s.length; i++) {
    h ^= s.charCodeAt(i);
    h = Math.imul(h, 0x01000193);
  }
  return h >>> 0;
}

// 名前から色相（0〜359）を決め、明るさをそろえた OKLCH の色にする
export function avatarColor(name: string): string {
  const hue = hashString(toWords(name).join(' ')) % 360;
  return `oklch(0.52 0.12 ${hue})`;
}

"👩‍💻 開発チーム" n[0]: "\ud83d" / [...n][0]: "👩" (U+1F469) / Segmenter: "👩‍💻"
"🇯🇵 Team" n[0]: "\ud83c" / [...n][0]: "🇯" (U+1F1EF) / Segmenter: "🇯🇵"
"émile" n[0]: "e" / [...n][0]: "e" (U+65) / Segmenter: "é"

"　" U+3000 -> " " U+0020
"ﾀﾞ" U+FF80 U+FF9E -> "ダ" U+30C0
"ｔ" U+FF54 -> "t" U+0074

"山田 太郎" -> "山" oklch(0.52 0.12 108)
"山田　太郎" -> "山" oklch(0.52 0.12 108)
"  山田 太郎  " -> "山" oklch(0.52 0.12 108)
"ﾔﾏﾀﾞ ﾀﾛｳ" -> "ヤ" oklch(0.52 0.12 19)
"taro yamada" -> "TY" oklch(0.52 0.12 116)
"ｔａｒｏ ｙａｍａｄａ" -> "TY" oklch(0.52 0.12 116)
"Mary Jane Smith" -> "MS" oklch(0.52 0.12 237)
"chris" -> "C" oklch(0.52 0.12 100)
"" -> "?" oklch(0.52 0.12 61)

hsl(h 65% 45%): 最小 2.01（色相 60）、最大 9.87（色相 240）、4.5 未満の色相 186個（21〜206）
oklch(0.55 0.12 h): 最小 4.38（色相 192）、最大 5.21（色相 357）、4.5 未満の色相 43個（173〜216）
oklch(0.52 0.12 h): 最小 4.93（色相 190）、最大 5.92（色相 0）、4.5 未満の色相 0個

import { avatarColor, getInitials, graphemeCount } from './initials';

type Props = {
  name: string;
  size?: number;
};

export function Avatar({ name, size = 48 }: Props) {
  const initials = getInitials(name);
  return (
    <span
      className="avatar"
      role="img"
      aria-label={name.trim() || '名前なし'}
      style={{
        width: size,
        height: size,
        // 2文字のときは少し小さくして、円の中に収める
        fontSize: size * (graphemeCount(initials) > 1 ? 0.4 : 0.5),
        backgroundColor: avatarColor(name),
      }}
    >
      {initials}
    </span>
  );
}

"TY" .length: 2 / graphemeCount: 2
"山" .length: 1 / graphemeCount: 1
"👩‍💻" .length: 5 / graphemeCount: 1
"🇯🇵" .length: 4 / graphemeCount: 1

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  line-height: 1;
  user-select: none;
}

import { useState } from 'react';
import { Avatar } from './Avatar';

// 架空の名前
const names = [
  '山田 太郎',
  '山田　太郎',
  '佐藤 花子',
  'ﾔﾏﾀﾞ ﾀﾛｳ',
  'taro yamada',
  'ｔａｒｏ ｙａｍａｄａ',
  'Mary Jane Smith',
  'chris',
  '👩‍💻 開発チーム',
  '',
];

export function App() {
  const [name, setName] = useState('鈴木 一郎');

  return (
    <main>
      <label htmlFor="name">名前</label>
      <input id="name" value={name} onChange={(e) => setName(e.target.value)} />
      <p className="preview">
        <Avatar name={name} size={72} />
      </p>

      <ul className="list">
        {names.map((n, i) => (
          <li key={i}>
            <Avatar name={n} />
            <span className="name">{n === '' ? '（空の文字列）' : n}</span>
          </li>
        ))}
      </ul>
    </main>
  );
}

入力 "鈴木 一郎" -> "鈴" oklch(0.52 0.12 261)
入力 "鈴木 二郎" -> "鈴" oklch(0.52 0.12 1)
入力 "ken tanaka" -> "KT" oklch(0.52 0.12 177)
入力 "" -> "?" oklch(0.52 0.12 61)