DiceBear 一个供设计师和开发人员使用的头像库

小半 • 2023年3月8日下午8:29 • 开源速递 • 阅读 179

《开源精选》是我们分享 Github、Gitee 等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的 DiceBear 是一个供设计师和开发人员使用的头像库。

DiceBear 是一个供设计师和开发人员使用的头像库，可以在简单的标识和可爱的角色之间进行选择。还提供了一个简单且免费的 HTTP API，可以立即使用！

HTTP-API

免费的 HTTP-API 是使用 Avatars 的最简单方法。只需使用以下 URL 作为图像源。

https://avatars.dicebear.com/api/:sprites/:seed.svg

替换：sprites 为 male, female, human, identicon, initials, bottts, avataaars, jdenticon,gridy 或 micah. 的值: seed 可以是喜欢的任何值 – 但不要在此处使用任何敏感或个人数据！

选项

大多数选项可以使用查询字符串指定。请注意，必须对值进行编码。例如，以下 URL 设置了蓝色背景：

https://avatars.dicebear.com/api/male/john.svg?background=%230000ff

此 URL 将mood头像样式男性的选项设置为happy和sad：

https://avatars.dicebear.com/api/male/john.svg?mood[]=happy&mood[]=sad

安装

如果想使用无法通过 HTTP-API 获得的头像样式，请选择 NPM。使用以下命令安装 Avatars 包。

npm install --save @dicebear/avatars

需要添加头像样式。例如：添加男性头像样式

npm install --save @dicebear/avatars-male-sprites

创建一个头像，也可以省略 seed来创建一个完全随机的头像。

import { createAvatar } from '@dicebear/avatars';
import * as style from '@dicebear/avatars-identicon-sprites';

let svg = createAvatar(style, {
  seed: 'custom-seed',
  // ... and other options
});

创建头像

可以通过以下三种方式创建头像：

HTTP-API

使用此 URL 通过获取头像样式。

https://api.dicebear.com/5.x/adventurer-neutral/svg

也可以直接使用 URL 作为图片来源。

<img
  src="https://api.dicebear.com/5.x/adventurer-neutral/svg"
  alt="avatar"
/>

使用 npm

安装：

npm install @dicebear/core @dicebear/collection --save

创建头像：

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

const avatar = createAvatar(adventurerNeutral, {
  // ... options
});

const svg = avatar.toString();