FileFormatIcon 文件格式图标

用于显示文件格式类型的图标组件,提供多种颜色和尺寸选项。

导入

import * as FileFormatIcon from '@xcloud/ui-core/components/file-format-icon';

示例

基础用法

import * as FileFormatIcon from '@xcloud/ui-core/components/file-format-icon';

function FileIcon() {
  return <FileFormatIcon.Root format="PDF" color="red" />;
}

不同颜色

组件提供 9 种预设颜色,每种颜色适合不同的文件类型:

<FileFormatIcon.Root format="PDF" color="red" />
<FileFormatIcon.Root format="DOC" color="blue" />
<FileFormatIcon.Root format="XLS" color="green" />
<FileFormatIcon.Root format="PPT" color="orange" />
<FileFormatIcon.Root format="ZIP" color="gray" />
<FileFormatIcon.Root format="MP4" color="purple" />
<FileFormatIcon.Root format="MP3" color="pink" />
<FileFormatIcon.Root format="JPG" color="sky" />
<FileFormatIcon.Root format="TXT" color="yellow" />

不同尺寸

<FileFormatIcon.Root format="PDF" color="red" size="small" />   {/* 32x32 */}
<FileFormatIcon.Root format="PDF" color="red" size="medium" /> {/* 40x40 */}

文件列表示例

function FileList() {
  const files = [
    { name: '项目提案.pdf', format: 'PDF', color: 'red' as const, size: '2.5 MB' },
    { name: '数据分析.xlsx', format: 'XLS', color: 'green' as const, size: '1.2 MB' },
  ];

  return (
    <div>
      {files.map((file) => (
        <div key={file.name} className="flex items-center gap-3 p-3 border rounded-lg">
          <FileFormatIcon.Root format={file.format} color={file.color} />
          <div className="flex-1">
            <div className="font-medium">{file.name}</div>
            <div className="text-sm text-gray-600">{file.size}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

API

FileFormatIcon.Root

属性	类型	默认值	说明
format	string	-	文件格式文本(如 "PDF", "DOC")
color	'red' | 'orange' | 'yellow' | 'green' | 'sky' | 'blue' | 'purple' | 'pink' | 'gray'	'gray'	格式标签颜色
size	'small' | 'medium'	'medium'	图标尺寸
className	string	-	自定义类名
...rest	React.SVGProps<SVGSVGElement>	-	其他 SVG 属性

颜色语义

推荐的文件类型与颜色映射:

文件类型	推荐颜色	示例
文档类 (PDF, DOC)	red, blue	PDF 文档, Word 文档
表格类 (XLS, CSV)	green	Excel 表格, CSV 数据
演示类 (PPT, KEY)	orange	PowerPoint, Keynote
压缩类 (ZIP, RAR)	gray	ZIP 压缩包, RAR 文件
视频类 (MP4, AVI)	purple	视频文件
音频类 (MP3, WAV)	pink	音乐, 音频文件
图片类 (JPG, PNG)	sky	图片文件
代码类 (JS, PY)	blue, purple	代码文件
其他	gray, yellow	通用文件

设计细节

1. SVG 结构: 使用 foreignObject 嵌入 HTML 元素显示格式文本
2. 响应式设计: 自动适配主题颜色变量
3. 格式文本: 位于图标左下角,使用圆角矩形背景
4. 字体: 11px 半粗体,确保小尺寸下可读性

最佳实践

1. 格式文本长度: 建议使用 2-4 个字符的缩写(如 PDF, DOCX)
2. 颜色选择: 根据文件类型选择语义化的颜色
3. 尺寸使用:
   • small (32px): 用于紧凑列表
   • medium (40px): 用于标准列表和卡片
4. 无障碍性: 建议配合文件名文本使用,不要仅依赖图标

<div className="flex items-center gap-2">
  <FileFormatIcon.Root format="PDF" color="red" />
  <span className="sr-only">PDF 文件</span>
  <span>项目提案.pdf</span>
</div>