DiceBear：30+ 风格、完全可定制的开源头像生成解决方案

在用户系统、评论区、IM、后台管理系统中，「头像」几乎是必不可少的基础元素。但现实问题也很明显：

• 用户不愿意上传头像
• 默认头像千篇一律
• 自建头像生成方案成本高、维护难

DiceBear 正是为解决这些问题而生的开源头像生成库。

它提供 30+ 官方头像风格、确定性生成、完全可定制、免费 HTTP API、JS / CLI / Figma 插件全覆盖，几乎可以满足任何项目对头像的需求。

一、DiceBear 是什么？

DiceBear 是一个基于 SVG 的开源头像生成库，可以根据随机值或指定 seed 生成风格各异、但稳定一致的头像。

核心特点：

• 🎨 30+ 官方头像风格
• 🔁 支持确定性头像（基于 seed）
• 🧩 高度可配置（五官、配色、装饰）
• ⚡ 免费、无需注册的 HTTP API
• 🛠 JS 库 / CLI / 转换器 / Figma 插件
• 🖼 SVG → PNG / JPEG / WEBP / AVIF

无论你是开发者还是设计师，都可以快速上手。

二、为什么选择 DiceBear？

1️⃣ 丰富的头像风格

DiceBear 官方提供 30 多种头像样式，涵盖：

• 抽象几何
• 卡通人物
• 手绘风格
• 像素风
• 极简头像
• 插画角色

每一种风格都由不同艺术家设计，并附带明确的授权说明。

2️⃣ 确定性头像生成（非常关键）

DiceBear 内置 伪随机数生成器（PRNG），支持通过 seed 生成可复现的头像：

seed: 'John Doe'

这意味着：

• 同一个用户 ID → 永远生成同一个头像
• 不需要存储头像文件
• 非常适合用户系统、匿名评论、IM 场景

3️⃣ SVG 动态生成，性能友好

DiceBear 头像本质是 SVG 组合渲染：

• 通过选择不同的头发、眼睛、表情等 SVG 片段组合
• 无需图片资源
• 服务端、浏览器均可高效生成

三、使用方式一览

DiceBear 提供了多种使用方式，适配不同场景：

四、JavaScript 库使用详解（推荐）

1️⃣ 安装依赖（ESM）

DiceBear 是 纯 ESM 包：

npm install @dicebear/core @dicebear/collection

npm install @dicebear/core @dicebear/collection

• @dicebear/core：核心生成逻辑
• @dicebear/collection：官方头像样式集合

2️⃣ 基础用法

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

const avatar = createAvatar(lorelei, {
  seed: 'John Doe',
  // 其他自定义选项
});

const svg = avatar.toString();

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

const avatar = createAvatar(lorelei, {
  seed: 'John Doe',
  // 其他自定义选项
});

const svg = avatar.toString();

3️⃣ 常用方法说明

.toString()

返回 SVG 字符串：

const svg = avatar.toString();

const svg = avatar.toString();

.toJson()

返回 SVG + 实际使用的参数：

const json = avatar.toJson();
// { svg: string, extra: {...} }

const json = avatar.toJson();
// { svg: string, extra: {...} }

.toDataUri()

生成 Base64 Data URI（最适合前端）：

const dataUri = await avatar.toDataUri();

const dataUri = await avatar.toDataUri();

五、SVG 转 PNG / JPEG / WEBP / AVIF

如果你需要非 SVG 格式，可以使用 @dicebear/converter。

1️⃣ 安装

npm install @dicebear/converter

npm install @dicebear/converter

⚠️ 转换器可以独立使用，不强制依赖 core

2️⃣ 转 PNG 示例

import { toPng } from '@dicebear/converter';
import { createAvatar } from '@dicebear/core';
import { lorelei } from '@dicebear/collection';

const avatar = createAvatar(lorelei, {
  seed: 'John Doe',
});

const png = toPng(avatar);
const buffer = await png.toArrayBuffer();

import { toPng } from '@dicebear/converter';
import { createAvatar } from '@dicebear/core';
import { lorelei } from '@dicebear/collection';

const avatar = createAvatar(lorelei, {
  seed: 'John Doe',
});

const png = toPng(avatar);
const buffer = await png.toArrayBuffer();

支持的方法包括：

• toPng
• toJpeg
• toWebp
• toAvif

六、HTTP API：零成本接入

如果你不想安装任何依赖，HTTP API 是最简单的方式。

使用方式

https://api.dicebear.com/9.x/<stylename>/svg<br></stylename>

https://api.dicebear.com/9.x/<stylename>/svg<br></stylename>

示例：

<img src="https://api.dicebear.com/9.x/lorelei/svg?seed=John" />

特点：

• 免费
• 无需注册
• 支持所有官方头像样式
• 非常适合 Demo / 中小项目

七、CLI：批量生成头像利器

1️⃣ 安装

npm install dicebear --global

npm install dicebear --global

2️⃣ 生成头像

dicebear lorelei .

dicebear lorelei .

生成 PNG：

dicebear lorelei . --format png

dicebear lorelei . --format png

批量生成：

dicebear lorelei . --count 100

dicebear lorelei . --count 100

非常适合：

• 初始化用户头像
• 设计素材生成
• 离线构建资源

八、在 Vue / React 中使用

Vue 示例

<script setup>
import { createAvatar } from '@dicebear/core';
import { lorelei } from '@dicebear/collection';

const avatar = await createAvatar(lorelei, {
  size: 128,
}).toDataUri();
</script>

<template>
  <img :src="avatar" alt="Avatar" />
</template>

<script setup>
import { createAvatar } from '@dicebear/core';
import { lorelei } from '@dicebear/collection';

const avatar = await createAvatar(lorelei, {
  size: 128,
}).toDataUri();
</script>

<template>
  <img :src="avatar" alt="Avatar" />
</template>

React 示例

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

function App() {
  const avatar = useMemo(() => {
    return createAvatar(lorelei, {
      size: 128,
    }).toDataUri();
  }, []);

  return <img src={avatar} alt="Avatar" />;
}

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

function App() {
  const avatar = useMemo(() => {
    return createAvatar(lorelei, {
      size: 128,
    }).toDataUri();
  }, []);

  return <img src={avatar} alt="Avatar" />;
}

九、适合哪些场景？

• 用户默认头像
• 匿名评论系统
• IM / 社交系统
• SaaS 后台
• 设计稿占位头像
• Demo / 原型项目

十、总结

DiceBear 是目前前端生态中最成熟、最易用的开源头像生成方案之一：

• 上手简单
• 风格丰富
• 不依赖存储
• 可前端 / 服务端 / CLI 使用
• 完全免费、开源友好

如果你的项目还在为「头像」发愁，DiceBear 几乎是零成本的最佳解法。