# @frosted-ui/icons 中文文档

规范地址：https://npmcn.com/package/%40frosted-ui/icons/

版本：0\.0\.1-canary\.164
npm 元数据更新时间：2026-11-12T17:17:46.588Z
中文译文更新时间：2026-11-15T15:13:55.173Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40frosted-ui/icons
原文对照：https://npmcn.com/package/%40frosted-ui/icons/?lang=original
项目主页：https://github.com/whopio/frosted-ui
源码仓库：https://github.com/whopio/frosted-ui

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

- 包体积（解压后）：26.5 MB，22610 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^16\.8 \|\| ^17\.0 \|\| ^18\.0 \|\| ^19\.0，@types/react \*
- 首次发布：2024-02-22T18:42:40.793Z
- 最新版本发布：2026-11-12T17:17:43.599Z
- 近 30 天下载量：33443（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：63（近 12 个月 43 个）

## 中文简介

冷冻 UI 反应图标

## 安装

```sh
npm install @frosted-ui/icons
```

也可以使用：`pnpm add @frosted-ui/icons`、`yarn add @frosted-ui/icons`、`bun add @frosted-ui/icons`

## README

# 冷冻的 UI 图标

使用和设计的图标 [呜呼](https://whop.com/) 团队

### [图像文件](https://www.figma.com/design/pWs6edprYZNR54ZPwk0oRV)

![Screenshot 2024-08-07 at 12 35 01](https://github.com/user-attachments/assets/bc38e63e-0d83-4ccc-8a7c-2f2dbf63c0fc)

## 文档

所有图标都可以作为单个的React组件提供. 每个图标都进来了 `16`, (中文(简体) ), `20`, (中文(简体) ), `24` 财务报告和审定财务报表 `32` px尺寸.

从 npm 安装已冷冻的 UI 图标 :

```bash
npm install @frosted-ui/icons
```

将图标导入您的 React 项目 :

```tsx
import { Shop16, Shop20 } from '@frosted-ui/icons';

function MyComponent() {
  return (
    <div>
      <Shop16 />
      <Shop20 />
    </div>
  );
}
```

### 图像

除了单色的UI图标外,这个包还发自同源的多彩象形图 [图像文件](https://www.figma.com/design/pWs6edprYZNR54ZPwk0oRV/) (图片页). 每个象形图作为一个单反射元件发布,它需要 `variant` 道具从四个背景颜色调制中选择一个: `'auto'` (默认), `'light'`, (中文(简体) ), `'dark'`,或 `'orange'`。 。 。 .

```tsx
import { ConePictogram, GradCapPictogram } from '@frosted-ui/icons';

function MyComponent() {
  return (
    <div>
      <ConePictogram /> {/* defaults to variant="auto" */}
      <ConePictogram variant="light" />
      <ConePictogram variant="dark" />
      <ConePictogram variant="orange" />
      <GradCapPictogram variant="auto" />
    </div>
  );
}
```

象形图保存其原始颜色( 无) `currentColor` 重写,所以他们不接受 `color` 道具 (英语). 除外 `variant`,它们接受所有标准SVG道具.

#### 这个 `auto` 变体

`variant="auto"` (默认) 发送 CSS [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) 不同 `light` 财务报告和审定财务报表 `dark` 变相. 浏览器然后根据页面选择正确的颜色 `color-scheme` ——无回放状态,无媒体查询收听器,无水合不匹配.

在一个 `frosted-ui` 应用此功能无线: [`Theme`](https://npmcn.com/package/%40frosted-ui/frosted-ui) 组件已设定 `color-scheme: light | dark` 于根上相会. 在任何其他应用中,你需要一个 `color-scheme` 关于父母的声明(例如:. `:root { color-scheme: light dark; }`)用于浏览器知道要选择哪个手臂.

浏览器支持 `light-dark()` 是2024年以来的基线(Chrome 123,Safari 17.5,Firefox 120)。 在旧浏览器中 `auto` 变体回落到没有填充的地步——将变体标出明确的(`variant="light"`),如果需要支持前2024年浏览器.

#### 变体如何包装

生成器内部通过共享几何和切换每个元件将三个背景变体崩溃成一个元件 `fill`编号 :`stroke` 基于颜色 `variant`对于其相貌变体不具有相同几何特征的稀有象形图,其成分会回落到每个变体的SVG体的内衬上——相同 `<NamePictogram variant="…" />` API也一样 对于那些倒回相片, `variant="auto"` 使 `light` 身体在光和暗色两种方案.

## 配置

### 套装大小

从管状树干上取出名字,所以 `import { Shop16 } from '@frosted-ui/icons'` 花费一个图标而不是整个集。 每一个读取 `import`编号 :`module` 条目 – Webpack, Vite, Rollup, esbuild, Next.js – 默认情况下获得,没有配置.

CommunityJS不能树摇,因此CJS桶将每个导出定义为在第一个访问上加载图标模块的得到器. `require('@frosted-ui/icons')` 在节点保持便宜, 这对杰斯特,SSR和脚本很重要.

绑在CJS入口上的捆绑工(`mainFields: ['main']`)是仍然支付整个集的一个案例,因为一个捆绑者解决每一个 `require()` 静态的不管它何时运行。 深度输入:

```tsx
import Shop16 from '@frosted-ui/icons/Shop16';
import ConePictogram from '@frosted-ui/icons/pictograms/ConePictogram';
```

### 下一个.js

```js
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  modularizeImports: {
    '@frosted-ui/icons': {
      transform: {
        // Pictograms live under `pictograms/` in the built package.
        '*Pictogram': '@frosted-ui/icons/pictograms/{{member}}',
        '*': '@frosted-ui/icons/{{member}}',
      },
      skipDefaultConversion: true,
    },
  },
};

export default nextConfig;
```

## 捐款

请跟我们走 [提供指南](https://npmcn.com/package/%40frosted-ui/icons/CONTRIBUTING.md)。 。 。 .

## 承认

被冻结的 UI 图标库设置基于 [Radix 图标](https://github.com/radix-ui/icons)。 。 。 .

## 常见问题

### @frosted-ui/icons 是什么？

冷冻 UI 反应图标

### 如何安装 @frosted-ui/icons？

在项目目录运行 npm install @frosted-ui/icons，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8 \|\| ^17\.0 \|\| ^18\.0 \|\| ^19\.0）、@types/react（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @frosted-ui/icons 支持 TypeScript 吗？

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

### @frosted-ui/icons 支持 ESM 还是 CommonJS？

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

### @frosted-ui/icons 可以商用吗？

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

### @frosted-ui/icons 的下载量有多少？

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

### @frosted-ui/icons 还在维护吗？

最新版本 0\.0\.1-canary\.164 发布于 2026/11/13（3 天前）；至今共发布 63 个版本，其中过去 12 个月发布了 43 个；首次发布于 2024/02/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。