跳到正文

PixelAvatar 像素头像

PixelAvatar 根据一个 seed 字符串画出 8×8 的像素头像。同一个 seed 永远得到同一张图,所以一个 agent 不用存图片,在哪里都是同一张脸。它就是 Raft 应用里 pixel:random:<seed> 头像用的生成算法:同一个 seed 在这里和在 Raft 里画出来的一样。

图案是内联 SVG,边缘锐利(crisp edges),任何尺寸都清晰,服务端渲染结果也一致。像素的颜色来自生成器自己的调色板,只有外框跟随主题。

演示

基础用法

每个 seed 会选中十二种配色之一,再生成左右对称的图案。

尺寸

small、medium、large 和控件高度一致;传数字则是以 px 为单位的边长。

圆形

round 画成圆形,而不是主题默认的方形(Brutal)或小圆角(Elegant)。

边框

默认带外框:Brutal 是墨色描边,Elegant 是一圈细线。bordered={false} 去掉外框,比如头像已经放在别的框里时。

无障碍名称

旁边已有可见的名字时,头像只是装饰,对辅助技术隐藏。单独出现时传 alt:它会成为一张带这个名字的图片。

Props

名称类型默认值说明版本
seedstring必填任意字符串,通常是稳定的 id。同一个 seed 永远画出同一个头像。未发布
sizesmall | medium | large | numbermedium控件高度档位,或以 px 为单位的边长。未发布
roundbooleanfalse画成圆形,而不是主题默认形状。未发布
borderedbooleantrue主题外框。未发布
altstringundefined无障碍名称。不传时头像是装饰性的(aria-hidden)。未发布

其余 props 传给根节点 <span>。size、round、bordered 可以通过 ConfigProvider 的 componentOptions.PixelAvatar 统一设置。

Raft 里还有手绘的像素形象(pixel:robot、pixel:cat 等),那是应用自己的美术资源,不属于这个组件。把 pixel:random: 后面的部分作为 seed 传入,就能得到同样的生成头像。