Alune 组件

FileIcon

按文件名与扩展名选择图标，未知类型回退通用文件。

使用方式

只根据 path 的文件名和扩展名选择 Material Icon Theme 静态资源，不读取文件。图标为装饰内容，文件名由宿主文本表达。

import { FileIcon } from '@alune/ui';

接入要求见快速开始，选择依据见交互与无障碍规范。

运行示例

运行与复制源码来自同一 TSX 文件。浮层、状态和主题独立于文档；所有回调只更新本地模拟数据。

查看运行源码

源码文件

import { FileIcon, FolderIcon, DialogIcon } from '@alune/ui';

export default function Example() {
  return (
    <div className="example">
      <section className="example-group">
        <h2 className="example-title">文件类型</h2>
        <div className="example-icon-grid">
          {['main.ts', 'view.tsx', 'package.json', 'README.md', 'photo.png', 'unknown.file'].map(
            (path) => (
              <div key={path} className="example-icon-item">
                <FileIcon path={path} />
                <span>{path}</span>
              </div>
            ),
          )}
        </div>
      </section>
      <section className="example-group">
        <h2 className="example-title">目录与仓库</h2>
        <div className="example-icon-grid">
          <div className="example-icon-item">
            <FolderIcon />
            <span>文件夹</span>
          </div>
          <div className="example-icon-item">
            <FolderIcon open />
            <span>已展开</span>
          </div>
          <div className="example-icon-item">
            <FolderIcon variant="repository" />
            <span>仓库</span>
          </div>
          <div className="example-icon-item">
            <FolderIcon variant="link" />
            <span>链接</span>
          </div>
        </div>
      </section>
      <section className="example-group">
        <h2 className="example-title">操作图标</h2>
        <div className="example-icon-grid">
          {(['folder', 'clock', 'check', 'x', 'refresh'] as const).map((name) => (
            <div key={name} className="example-icon-item">
              <DialogIcon name={name} />
              <span>{name}</span>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

API

FileIcon

只根据 path 的文件名和扩展名选择 Material Icon Theme 静态资源，不读取文件。图标为装饰内容，文件名由宿主文本表达。

查看 FileIcon 实现 ↗

FileIconProps

属性 / 方法	类型	默认值	必填	说明
`path`	`string`	`—`	是	文件或目录路径，只读取名称，不访问文件系统。

查看 FileIconProps 实现 ↗

交互与使用限制

为每个操作提供可访问名称，为输入关联 label；使用语义化组件和清晰焦点。不要只靠颜色传达状态，禁用与等待时避免重复执行。

只根据 path 的文件名和扩展名选择 Material Icon Theme 静态资源，不读取文件。图标为装饰内容，文件名由宿主文本表达。

键盘、焦点、风险确认与通知策略的完整约定见交互规范。

查看实现 ↗ 编辑文档 ↗ 设计与验收