# @baybreezy/file-extension-icon 中文文档

规范地址：https://npmcn.com/package/%40baybreezy/file-extension-icon/

版本：0\.0\.5
npm 元数据更新时间：2026-05-04T11:06:09.929Z
中文译文更新时间：2026-11-08T07:38:00.365Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40baybreezy/file-extension-icon
原文对照：https://npmcn.com/package/%40baybreezy/file-extension-icon/?lang=original
项目主页：https://github.com/BayBreezy/file-extension-icon
源码仓库：https://github.com/BayBreezy/file-extension-icon

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：17.4 MB，13 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2025-10-16T04:55:49.140Z
- 最新版本发布：2026-05-04T11:06:09.806Z
- 近 30 天下载量：1867（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 3 个）

## 中文简介

用于文件夹和文件扩展名的现代轻量级软件包

## 安装

```sh
npm install @baybreezy/file-extension-icon
```

也可以使用：`pnpm add @baybreezy/file-extension-icon`、`yarn add @baybreezy/file-extension-icon`、`bun add @baybreezy/file-extension-icon`

## README

# @baybreezy/ file-extension-icon (英语)

![Demo Cover Image](https://npmcn.com/cover.jpeg)

> 现代、 文件及文件夹扩展名的首个软件包

完整重写 [`file-extension-icon-js`](https://github.com/minhazmiraz/file-extension-icon-JS) 采用现代的TypeScript,无害环境管理第一方法,以及UnJS生态系统,以获得最佳的性能和开发者经验.

[![npm version](https://img.shields.io/npm/v/@baybreezy/file-extension-icon)](https://www.npmjs.com/package/@baybreezy/file-extension-icon) [![npm bundle size](https://img.shields.io/bundlephobia/min/@baybreezy/file-extension-icon)](https://bundlephobia.com/package/@baybreezy/file-extension-icon) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## \* 特性

-   🎨 **两个图标主题**: 材料图标 主题和 VSCode 图标
-   🔷 **类型脚本**: 具有综合类型定义的完整类型安全
-   📦 **零依赖关系**: 无运行时间依赖性
-   🌳 **树能震动**: 只捆绑您使用的
-   🔄 **双格式**无害环境管理和共同JS支助
-   🚀 **现代建筑**: 为优化输出而用倒建来构建
-   ✅ **测试良好**: 全面试验覆盖率
-   📝 **有记录**: 完整的联合来文文件评论和实例
-   🖥️ **包括国别学习**: 用于浏览和导出图标的交互式终端工具

## \* 安装

```bash
# @antfu/ni
npx ni @baybreezy/file-extension-icon
```

## 使用量

### 基本用途

```ts
import {
  getMaterialFileIcon,
  getMaterialFolderIcon,
  getVSIFileIcon,
  getVSIFolderIcon,
} from "@baybreezy/file-extension-icon";

// Get Material Design file icon
const jsIcon = getMaterialFileIcon("index.js");
// Returns: "data:image/svg+xml;base64,..."

// Get Material Design folder icon (closed)
const folderIcon = getMaterialFolderIcon("components");

// Get Material Design folder icon (open)
const openFolderIcon = getMaterialFolderIcon("components", true);

// Get VSCode file icon
const tsIcon = getVSIFileIcon("app.ts");

// Get VSCode folder icon
const vsiFolderIcon = getVSIFolderIcon("src", true);
```

### 框架实例

#### 反应 / Vue / Svelte

```tsx
import { getMaterialFileIcon } from "@baybreezy/file-extension-icon";

function FileIcon({ fileName }: { fileName: string }) {
  const icon = getMaterialFileIcon(fileName);

  return <img src={icon} alt={fileName} width={24} height={24} />;
}
```

#### HTML 语言

```html
<script type="module">
  import { getMaterialFileIcon } from "@baybreezy/file-extension-icon";

  const icon = getMaterialFileIcon("index.html");
  document.getElementById("icon").src = icon;
</script>

<img id="icon" alt="html" width="24" height="24" />
```

### 高级使用

```ts
import {
  convertToBase64,
  createDataUri,
  findIconInCollection,
  getIconFromMap,
  getMaterialFileIcon,
} from "@baybreezy/file-extension-icon";

// The package intelligently matches file names
getMaterialFileIcon("app.component.ts"); // Matches Angular component
getMaterialFileIcon("test.spec.ts"); // Matches test file
getMaterialFileIcon("package.json"); // Matches package.json
getMaterialFileIcon("Dockerfile"); // Matches Docker

// Works with any file extension
getMaterialFileIcon("script.py");
getMaterialFileIcon("style.scss");
getMaterialFileIcon("README.md");
```

## API 参考

### 材料图标

#### `getMaterialFileIcon(fileName: string): string`

使用材料图标主题返回给定文件名的已编码的 SVG 基础数据 URI .

**参数:**

-   `fileName` (字符串):有或无路径的文件名(例如, `"index.js"`, (中文(简体) ), `"src/app.ts"`(中文(简体) )

**回返情况:** Base64 编码数据 URI 字符串

**示例**

```typescript
const icon = getMaterialFileIcon("index.js");
// => "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0..."
```

#### `getMaterialFolderIcon(folderName: string, open?: boolean): string`

使用“材料图标”主题返回给定文件夹名称的基数64编码的 SVG 数据 URI .

**参数:**

-   `folderName` (字符串):文件夹名称
-   `open` (布尔,可选): 是否返回打开的文件夹图标 。 默认 : `false`

**回返情况:** Base64 编码数据 URI 字符串

**示例**

```typescript
const closedIcon = getMaterialFolderIcon("components");
const openIcon = getMaterialFolderIcon("components", true);
```

### VSCode 图标

#### `getVSIFileIcon(fileName: string): string`

使用 VSCode 图标主题返回给定文件名的基准64-编码的 SVG 数据 URI .

**参数:**

-   `fileName` (字符串): 有或没有路径的文件名

**回返情况:** Base64 编码数据 URI 字符串

#### `getVSIFolderIcon(folderName: string, open?: boolean): string`

使用 VSCode 图标主题返回给定文件夹名的已编码的 SVG 基准数据 URI .

**参数:**

-   `folderName` (字符串):文件夹名称
-   `open` (布尔,可选): 是否返回打开的文件夹图标 。 默认 : `false`

**回返情况:** Base64 编码数据 URI 字符串

### 工具函数

该套件还输出用于高级用途的公用功能:

```typescript
import {
  convertToBase64,
  createDataUri,
  findIconInCollection,
  getIconFromMap,
} from "@baybreezy/file-extension-icon";
```

## QQ CLI 工具

此软件包包含一个交互的 CLI 工具,用于浏览和导出图标 !

```bash
# Run interactively
npx file-icon

# Or with flags for quick export
npx file-icon -t material -y file -n "index.js" --copy
```

### CLI 特性

-   QQ 浏览材料和 VSCode 图标主题
-   通过文件/文件夹名搜索或浏览所有图标
-   复制到剪贴板、 保存到文件或显示在终端
-   快速而美丽的UI由Clack供电

[完整 CLI 文档](https://npmcn.com/package/%40baybreezy/file-extension-icon/cli/README.md)

## QQ 套装大小

这个软件包包含材料和VSCode图标主题的综合图标数据.

-   **软件包大小( 压缩)**: ~ 2.6 MB 键
-   **未包装大小**:~8.6 MB 键
-   **包括**: 千个文件和文件夹图标

> **说明**: 现代捆绑有树摇可以只包含您使用的图标来显著地减少最终捆绑的大小. 确保您的捆绑器被配置为树摇摆来优化捆绑大小 .

### 优化提示

1.  **只导入您需要的 :**
    
    ```typescript
    // ✅ Good - Tree-shakeable
    import { getMaterialFileIcon } from "@baybreezy/file-extension-icon";
    // ❌ Avoid - Imports everything
    import * as Icons from "@baybreezy/file-extension-icon";
    ```
    
2.  **使用现代捆绑器** 有摇树支持(Vite、Rollup、esbuild、webpack 5+)
    
3.  **考虑代码分割** 如果您支持多个图标主题
    

## 发展

```bash
# Install dependencies
npm install

# Build the package
npm run build

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Run tests in UI mode
npm run test:ui

# Type check
npm run typecheck

# Lint code
npm run lint
```

## 测试

这一一揽子计划包括全面测试范围:

```bash
# Run tests in watch mode
npm test

# Generate coverage report
npm run test:coverage

# Open test UI
npm run test:ui
```

## 捐款

欢迎捐款! 请随意提交拉力请求.

## 许可证

麻省理工学院 [贝洪贝克](https://behonbaker.com/)

## 功劳和承认

此软件包是一个完整的类型脚本重写 [`file-extension-icon-js`](https://github.com/minhazmiraz/file-extension-icon-JS) 以 [MD. 明哈祖尔伊斯兰教](https://github.com/minhazmiraz)。 。 。 .

### 原始软件包

-   **原作者**数字 : [MD. 明哈祖尔伊斯兰教](https://github.com/minhazmiraz)
-   **原始软件包**数字 : [文件扩展缩写](https://github.com/minhazmiraz/file-extension-icon-JS)
-   **许可证**麻省理工学院

### 图标来源

-   [材料图标 主题](https://github.com/PKief/vscode-material-icon-theme) 由菲利普·基夫(Philipp Kief)撰写
-   [VSCode 图标](https://github.com/vscode-icons/vscode-icons) 由 VSCode 图标团队

### 灵感

-   [vscode-icons-js (英语)](https://github.com/dderevjanik/vscode-icons-js) 由多米尼克·德雷克(Dominik Dere-ǰanik)出演
-   [文件缩写](https://github.com/websemantics/file-icons-js) 按网络语义

## 链接

-   [GitHub 仓库](https://github.com/BayBreezy/file-extension-icon)
-   [npm 软件包](https://www.npmjs.com/package/@baybreezy/file-extension-icon)
-   [问题跟踪器](https://github.com/BayBreezy/file-extension-icon/issues)
-   [作者网站](https://behonbaker.com/)

* * *

由 Q 制作 [贝洪贝克](https://behonbaker.com/)

## 常见问题

### @baybreezy/file-extension-icon 是什么？

用于文件夹和文件扩展名的现代轻量级软件包

### 如何安装 @baybreezy/file-extension-icon？

在项目目录运行 npm install @baybreezy/file-extension-icon，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 file-icon，可以用 npx file-icon 直接运行。

### @baybreezy/file-extension-icon 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @baybreezy/file-extension-icon 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @baybreezy/file-extension-icon 可以商用吗？

@baybreezy/file-extension-icon 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @baybreezy/file-extension-icon 的下载量有多少？

根据 npm 官方下载统计，@baybreezy/file-extension-icon 在 2026/10/08 – 2026/11/06 这 30 天内被下载 1,867 次，日均约 62 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @baybreezy/file-extension-icon 还在维护吗？

最新版本 0\.0\.5 发布于 2026/05/04（6 个月前）；至今共发布 4 个版本，其中过去 12 个月发布了 3 个；首次发布于 2025/10/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。