@pt/react-common组件使用
AvatarIcon
通用的头像组件，支持图片、渐变背景、文字回退及自定义形状。
AvatarIcon 是一个高度可定制的头像组件。它会自动处理图片加载失败的情况，并回退到显示用户名称的首字母或自定义的渐变色背景。
核心特性
- 多模式支持：支持网络图片、CSS 渐变背景。
- 智能回退：图片加载失败或未提供时，显示
name的首字母。 - 自定义形状：支持圆形、圆角矩形等多种形状。
- 自动着色：可根据名称自动生成背景色（如果未指定）。
基本用法
import { AvatarIcon } from "@pt/react-common/components";
// 文字回退 (自动背景色)
<AvatarIcon name="张三" />
// 渐变背景
<AvatarIcon
name="AI"
avatar="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
/>不同尺寸
通过 size 属性调整头像大小
<AvatarIcon name="S" size={24} />
<AvatarIcon name="M" size={40} />
<AvatarIcon name="L" size={56} />
<AvatarIcon name="XL" size={72} />自定义形状
shape=1 为矩形/圆角矩形，shape=2 为圆形（默认）
<AvatarIcon name="圆形" shape={2} />
<AvatarIcon name="矩形" shape={1} borderRadius={4} />
<AvatarIcon name="大圆角" shape={1} borderRadius={12} />属性说明 (Props)
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
name | string | - | 用户名称，用于回退显示首字母 |
avatar | string | - | 头像地址或 CSS 渐变字符串 |
size | number | 40 | 头像尺寸（像素） |
shape | 1 | 2 | 2 | 形状：1 为矩形/圆角矩形，2 为圆形 |
borderRadius | number | - | 当 shape 为 1 时指定的圆角半径 |
backgroundColor | string | - | 自定义背景颜色 |
fontSize | number | - | 文字回退时的字体大小 |
className | string | - | 容器的自定义类名 |
style | CSSProperties | - | 容器的自定义内联样式 |
onLoad | () => void | - | 图片加载成功回调 |
onError | () => void | - | 图片加载失败回调 |
样式定制
你可以通过简单的 Tailwind CSS 类名或内联样式进一步调整间距和边框。组件内部使用了标准的 CSS 变量，可以在全局范围内进行统一起色。
互动演练场
试试直接编辑下方代码，预览区会实时更新：
加载编辑器中…