Use Suils in React

A Suils avatar is just an image URL, so no SDK is needed. Wrap it in a small component:

type AvatarProps = {
  seed: string;
  styleName?: string;
  size?: number;
};

export function Avatar({ seed, styleName = 'suils', size = 96 }: AvatarProps) {
  const url = `https://avatars.suils.es/${styleName}/svg?seed=${encodeURIComponent(seed)}`;

  return (
    <img
      src={url}
      width={size}
      height={size}
      alt={`${seed}'s avatar`}
      style={{ borderRadius: '50%' }}
    />
  );
}

<Avatar seed={user.id} styleName="kawaii" />

https://avatars.suils.es/kawaii/svg?seed=user-8f3a2c

Because the avatar is deterministic, you can key React lists on the seed and the image is safe to cache. For raster output (e.g. <meta> OG images) request png with a size.