AvatarEmptyIcons 空头像图标

用于头像组件的占位图标,提供用户和企业两种类型的空状态 SVG 图标。

导入

import * as AvatarEmptyIcons from '@xcloud/ui-core/components/avatar-empty-icons';

示例

基础用法

IconEmptyUser - 用户空头像

用于个人用户未设置头像时的占位图标。

import * as AvatarEmptyIcons from '@xcloud/ui-core/components/avatar-empty-icons';
import * as Avatar from '@xcloud/ui-core/components/avatar';

function UserAvatar() {
  return (
    <Avatar.Root size="large">
      <Avatar.Image as={AvatarEmptyIcons.IconEmptyUser} />
    </Avatar.Root>
  );
}

IconEmptyCompany - 企业空头像

用于企业/组织未设置 Logo 时的占位图标。

import * as AvatarEmptyIcons from '@xcloud/ui-core/components/avatar-empty-icons';
import * as Avatar from '@xcloud/ui-core/components/avatar';

function CompanyAvatar() {
  return (
    <Avatar.Root size="large">
      <Avatar.Image as={AvatarEmptyIcons.IconEmptyCompany} />
    </Avatar.Root>
  );
}

自定义尺寸

两个图标都是标准的 SVG 组件,可以通过 style 或 className 自定义尺寸:

<AvatarEmptyIcons.IconEmptyUser
  style={{ width: '100px', height: '100px' }}
/>

<AvatarEmptyIcons.IconEmptyCompany
  className="w-24 h-24"
/>

API

IconEmptyUser

属性	类型	默认值	说明
...props	React.SVGProps<SVGSVGElement>	-	所有标准 SVG 属性

IconEmptyCompany

属性	类型	默认值	说明
...props	React.SVGProps<SVGSVGElement>	-	所有标准 SVG 属性

设计细节

IconEmptyUser

• 简洁的圆形头部和肩部轮廓
• 使用半透明白色填充
• 自动使用 useId() 生成唯一的 clipPath ID,避免 ID 冲突
• 默认 viewBox 为 0 0 80 80

IconEmptyCompany

• 双层建筑图标,象征企业/组织
• 使用渐变和滤镜效果增强立体感
• 自动使用 useId() 生成唯一的 filter 和 clipPath ID
• 默认尺寸为 56x56
• 响应 Tailwind 主题颜色变量

与 Avatar 组件结合

推荐与 Avatar 组件配合使用:

<Avatar.Root size="large" status="offline">
  <Avatar.Image as={AvatarEmptyIcons.IconEmptyUser} />
  <Avatar.Fallback>U</Avatar.Fallback>
</Avatar.Root>

最佳实践

1. 用户类型区分: 为个人用户使用 IconEmptyUser,为企业/组织使用 IconEmptyCompany
2. 配合 Avatar.Fallback: 提供文字作为双重后备方案
3. 保持尺寸一致: 确保空头像图标与实际头像尺寸一致
4. 无障碍性: 添加 aria-label 描述图标含义

<AvatarEmptyIcons.IconEmptyUser aria-label="用户未设置头像" />