头像 Avatar
用作头像显示，可以为图片、图标或字符形式展示。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基础用法：头像的基础使用。如果头像是文字的话，会自动调节字体大小，来适应头像框。
- 大小和形状：通过设置
size字段，可以调节头像的大小，默认大小为40px。设置shape字段，可以设置头像是圆形 (circle) 还是正方形 (square)。 - 头像组：使用
Avatar.Group可以使用头像组功能，可通过size指定头像的大小。 - 交互按钮：可以通过
triggerIcontriggerType来定制交互按钮，类型有mask (遮罩)和button (按钮)两种，通过onClick参数来添加回调。 - 自动调整字体大小：如果头像是文字的话，会自动调节字体大小，来适应头像框。
示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。
API
Avatar
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| autoFixFontSize | 是否自动根据头像尺寸调整字体大小。 | boolean | true |
| size | 头像的尺寸大小，单位是 px | number | - |
| shape | 头像的形状，有圆形(circle)和正方形(square)两种 | 'circle' | 'square' | circle |
| triggerType | 可点击的头像交互类型。 | 'mask' | 'button' | button |
| triggerIcon | 可点击的头像交互图标。 | ReactNode | - |
| className | 节点类名 | string | string[] | - |
| style | 节点样式 | CSSProperties | - |
| triggerIconStyle | 交互图标的样式 | CSSProperties | - |
| onClick | 点击回调 | (e) => void | - |
Avatar.Group
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autoFixFontSize | 是否自动根据头像尺寸调整字体大小，(优先级低于 Avatar 组件本身) | boolean | true | - |
| zIndexAscend | 头像组内的头像 z-index 递增，默认是递减。 | boolean | - | 2.3.0 |
| maxCount | 头像组最多显示的头像数量，多余头像将以 +x 的形式展示。 | number | - | 2.4.0 |
| size | 头像的尺寸大小，单位是 px，(优先级低于 Avatar 组件本身) | number | - | - |
| shape | 头像的形状，(优先级低于 Avatar 组件本身) | 'circle' | 'square' | circle | - |
| className | 节点类名 | string | string[] | - | - |
| maxPopoverTriggerProps | 多余头像气泡的 TriggerProps。 | TriggerProps | - | 2.4.0 |
| maxStyle | 多余头像样式。 | CSSProperties | - | 2.4.0 |
| style | 节点样式 | CSSProperties | - | - |