# @box/item-icon 中文文档

规范地址：https://npmcn.com/package/%40box/item-icon/

版本：3\.6\.39
npm 元数据更新时间：2026-11-06T03:58:07.026Z
中文译文更新时间：2026-11-08T12:45:47.380Z
软件包许可：SEE LICENSE IN LICENSE

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

原始 npm 页面：https://www.npmjs.com/package/%40box/item-icon
原文对照：https://npmcn.com/package/%40box/item-icon/?lang=original

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

- 包体积（解压后）：67.5 kB，49 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^17\.0\.0 \|\| ^18\.0\.0，react-dom ^17\.0\.0 \|\| ^18\.0\.0，@box/types ^3\.2\.36，react-intl ^6\.4\.2，@box/blueprint-web ^18\.10\.3，@box/blueprint-web-assets ^5\.15\.0
- 首次发布：2025-01-06T21:26:24.323Z
- 最新版本发布：2026-11-06T03:58:06.840Z
- 近 30 天下载量：60463（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：759（近 12 个月 465 个）

## 中文简介

暂无中文简介

## 安装

```sh
npm install @box/item-icon
```

也可以使用：`pnpm add @box/item-icon`、`yarn add @box/item-icon`、`bun add @box/item-icon`

## README

-   [立方厘米](https://npmcn.com/package/%40box/item-icon/#readme-item-icon)
    -   [运行命令](https://npmcn.com/package/%40box/item-icon/#readme-running-commands)
    -   [可用命令](https://npmcn.com/package/%40box/item-icon/#readme-available-commands)
    -   [API 密码](https://npmcn.com/package/%40box/item-icon/#readme-api)
        -   [构成部分](https://npmcn.com/package/%40box/item-icon/#readme-components)
        -   [工具函数](https://npmcn.com/package/%40box/item-icon/#readme-utility-functions)
        -   [常数](https://npmcn.com/package/%40box/item-icon/#readme-constants)
        -   [类型](https://npmcn.com/package/%40box/item-icon/#readme-types)
    -   [所有权](https://npmcn.com/package/%40box/item-icon/#readme-ownership)
    -   [翻译](https://npmcn.com/package/%40box/item-icon/#readme-translations)

# 立方厘米

这个库是用 [@ box/ 自定义](https://npmcn.com/package/automation//README.md)。关于如何在生成的库中执行任务的概况可见于 [运行任务](https://nx.dev/core-features/run-tasks) Nx文档.

## 运行命令

您的终端应该留在寄存器根目录的位置, 即 `frontend-mono`。允许 Nx 运行针对您的项目的行动,或者在必要时运行多个项目. 不导航到 `packages/group-shared-features/item-icon` 以运行命令.

项目的命令使用 Nx 使用的语法运行 :

```
Syntax: yarn nx <target name> <project name> <option overrides>
                      |              |                |
Example: yarn nx    test         products         --watch
```

## 可用命令

所有使用 Nx 的命令都可以在 `project.json` 文档.

-   `nx storybook item-icon` - 发射UI组件的开发环境.
-   `nx build-storybook item-icon` - 建立静态版本的故事书 与所有的故事.
-   `nx build item-icon` - 使用 `shared-feature-builder` 执行器从 `automation` 软件包.
-   `nx lint item-icon` - 运行linter过包文件.
-   `nx test item-icon` - 进行故事书测试(视觉/互动)和笑话测试,最后编写报道报告.
-   `nx test-storybook item-icon` - 做故事书测试 需要先在单独的终端开始故事本才能成功.
-   `nx test-storybook-local-coverage item-icon` - 进行故事书测试,并在最后制作报道报告。 需要运行的故事书实例.
-   `nx test-storybook-ci item-icon` - 建立故事书,并进行故事书测试,提供覆盖产出。 设计为CI使用.
-   `nx test-jest item-icon` - 运行滑稽单元测试, 产生代码覆盖结尾.
-   `nx sonar item-icon` - 使用声纳Qube工具对代码进行静态分析,以检测出臭虫和代码的气味。 集成为CI进程的步骤之一.
-   `nx chromatic item-icon` - 上传故事书,供审查 [框色调](https://box.chromatic.com/) ,并进行目视比较.
-   `nx prepare item-icon` - 在Nx Release安排的软件包发布过程中运行命令.

## API 密码

### 构成部分

-   **项目Icon** - 用于显示文件/文件夹图标的组件
-   **项目TypeIcon** - 显示项目类型图标的组件

### 工具函数

#### `getFileCategoryByExtension(extension?: string): string`

返回给定文件扩展名的文件类别。 如果扩展未识别,则返回 `'default'`。 。 。 .

```typescript
import { getFileCategoryByExtension } from '@box/item-icon';

const category = getFileCategoryByExtension('pdf'); // Returns 'pdf'
const category2 = getFileCategoryByExtension('docx'); // Returns 'word-document'
const category3 = getFileCategoryByExtension('unknown'); // Returns 'default'
```

#### `getColorByExtension(fileCategory: FileCategory): string | undefined`

返回给定文件类别的 CSS 颜色变量。 回返 `undefined` 用于 falsy 输入.

```typescript
import { getColorByExtension, type FileCategory } from '@box/item-icon';

const color = getColorByExtension('pdf'); // Returns 'var(--bp-watermelon-red-120, var(--watermelon-red-120))'
const color2 = getColorByExtension('image'); // Returns 'var(--bp-green-light-135, var(--green-light-120))'
```

### 常数

#### `FILE_EXTENSION_CATEGORIES`

对象映射文件类别到文件扩展名的数组 .

```typescript
import { FILE_EXTENSION_CATEGORIES } from '@box/item-icon';

FILE_EXTENSION_CATEGORIES.pdf; // ['pdf']
FILE_EXTENSION_CATEGORIES.image; // ['bmp', 'cr2', 'crw', 'dng', 'gdraw', 'gif', ...]
FILE_EXTENSION_CATEGORIES.markdown; // ['md', 'markdown']
FILE_EXTENSION_CATEGORIES['word-document']; // ['doc', 'docm', 'docx']
```

#### `FILE_CATEGORY_COLORS`

一个对象映射文件类别到相应的"蓝图"CSS颜色变量. 用于格式化文件类型指标的一致用途 .

```typescript
import { FILE_CATEGORY_COLORS } from '@box/item-icon';

FILE_CATEGORY_COLORS.pdf; // 'var(--bp-watermelon-red-120, var(--watermelon-red-120))'
FILE_CATEGORY_COLORS.image; // 'var(--bp-green-light-135, var(--green-light-120))'
FILE_CATEGORY_COLORS.markdown; // 'var(--bp-gray-100, var(--gray-100))'
FILE_CATEGORY_COLORS.video; // 'var(--bp-light-blue-115, var(--light-blue-110))'
```

### 类型

#### `FileCategory`

代表所有有效文件类别的 TypeScript 联盟类型.

```typescript
import { type FileCategory } from '@box/item-icon';

type FileCategory =
    | 'audio'
    | 'boxcanvas'
    | 'boxnote'
    | 'code'
    | 'document'
    | 'docuworks-binder'
    | 'docuworks-file'
    | 'dwg'
    | 'excel-spreadsheet'
    | 'google-docs'
    | 'google-sheets'
    | 'google-slides'
    | 'illustrator'
    | 'image'
    | 'indesign'
    | 'keynote'
    | 'markdown'
    | 'numbers'
    | 'pages'
    | 'pdf'
    | 'photoshop'
    | 'powerpoint-presentation'
    | 'presentation'
    | 'spreadsheet'
    | 'text'
    | 'threed'
    | 'vector'
    | 'video'
    | 'word-document'
    | 'zip';
```

## 所有权

该特性的代码属于webapp-eng. 拥有团队的职责包括控制代码质量,提供修改指南,并与其他团队在修改方面保持一致. 征求拥有或请求哪个团队负责修改守则,将是一种良好做法.

## 翻译

每个地方 `i18n/*.js` 档案由莫吉·詹金斯管道生成和完成。 共享特性构建器复制到 `dist/i18n/` 期间 `build`中的软件包 `i18n.config.js` 下级 `translationDependencies`。 。 。 .

## 常见问题

### 如何安装 @box/item-icon？

在项目目录运行 npm install @box/item-icon，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^17\.0\.0 \|\| ^18\.0\.0）、react-dom（^17\.0\.0 \|\| ^18\.0\.0）、@box/types（^3\.2\.36）、react-intl（^6\.4\.2）、@box/blueprint-web（^18\.10\.3）、@box/blueprint-web-assets（^5\.15\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @box/item-icon 支持 TypeScript 吗？

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

### @box/item-icon 支持 ESM 还是 CommonJS？

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

### @box/item-icon 可以商用吗？

@box/item-icon 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @box/item-icon 的下载量有多少？

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

### @box/item-icon 还在维护吗？

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