JGuang

Avataaars 卡通头像

Avataaars · DiceBear

交互预览
npm install @dicebear/core@9.4.2 @dicebear/collection@9.4.2

Avataaars 卡通头像 · Avataaars

卡通半身像,可组合服装、帽子、发型和胡须。

安装

npm install @dicebear/core@9.4.2 @dicebear/collection@9.4.2

生成头像

同一个种子(seed)总是生成同一个头像,适合用用户 ID 或用户名作为种子。头像在本地生成,不需要请求网络服务。

import { createAvatar } from '@dicebear/core';
import { avataaars } from '@dicebear/collection';

// “Avataaars” by Pablo Stanley, Free for personal and commercial use
const avatar = createAvatar(avataaars, {
  seed: 'Aria Chen',
  size: 128,
  radius: 50,
});

export const svg = avatar.toString();     // inline SVG markup
export const dataUri = avatar.toDataUri(); // use as an <img> src

React 组件:

import { useMemo } from 'react';
import { createAvatar } from '@dicebear/core';
import { avataaars } from '@dicebear/collection';

export function UserAvatar({ seed, size = 64 }: { seed: string; size?: number }) {
  const src = useMemo(() => createAvatar(avataaars, { seed, size }).toDataUri(), [seed, size]);
  return <img src={src} width={size} height={size} alt={`Avatar for ${seed}`} />;
}

选项

通用选项: seed, size, radius, backgroundColor, flip, rotate, scale.

此风格专有选项: accessories, accessoriesColor, accessoriesProbability, base, clothesColor, clothing, clothingGraphic, eyebrows, eyes, facialHair, facialHairColor, facialHairProbability, hairColor, hatColor, mouth, nose, skinColor, style, top, topProbability.

完整选项说明见 https://www.dicebear.com/styles/avataaars/

许可与署名

  • 设计: Avataaars — Pablo Stanley (https://avataaars.com/)
  • 许可: Free for personal and commercial use (https://avataaars.com/)
  • 作者自定义许可(Free for personal and commercial use):使用前阅读作者页面上的条款。
  • DiceBear 软件本身为 MIT 许可;软件许可不覆盖风格作品。生成的 SVG 默认带有许可元数据,请保留。