@reuse-sh /阿凡达

带有图像的化身，具有unicode识别的首字母，以及从图像中切割出来的徽章，而不是绘制的戒指。群组保持角色重叠的形状。

原则

这些是代码遵守的规则。对任何框架的适应也会保留它们。

• 切，不要涂。 徽章和重叠是矢量剪辑通过化身，所以没有画环战斗的背景和边缘保持锐利在任何缩放。
• 把首字母写在下面。 首字母显示，直到图像加载，如果失败则保持。
• 用文字命名徽章。 徽章标签连接可访问名称，并且绘图保持装饰性。
• 把文本当作文本。 名称、标签和图标以文本或节点的形式输入，永远不会被解析为HTML。
• 从徽章上剪下尺寸。 计数为两位数或两位数以上时，将从徽章本身测量出一个胶囊切口。
• 恢复主机。 Destroy还原了原始的内容、风格和听众。

安装

npm install @reuse-sh/avatars

浏览器

import { enhanceAvatar, createAvatarGroup } from "@reuse-sh/avatars";
import "@reuse-sh/avatars/styles.css";

const avatar = enhanceAvatar(avatarElement);
const group = createAvatarGroup(groupElement, { overlap: 12 });

反应

import { Avatar, AvatarGroup } from "@reuse-sh/avatars/react";
import "@reuse-sh/avatars/styles.css";

<AvatarGroup overlap={12}>
  <Avatar name="Alex Rivers" badge={{ type: "dot", label: "Online" }} />
  <Avatar name="Sam Field" badge={{
    type: "count", count: 128, label: "128 messages",
  }} />
</AvatarGroup>

文档

• 示例和API： https://reuse.sh/avatars
• 编码代理指南： https://reuse.sh/avatars/guide.md

许可证

麻省理工学院