# @autoguru/icons 中文文档

规范地址：https://npmcn.com/package/%40autoguru/icons/

版本：2\.2\.0
npm 元数据更新时间：2026-06-23T02:44:08.917Z
中文译文更新时间：2026-11-08T09:49:27.882Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：4.1 MB，6314 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.17\.0
- 运行依赖：1 个
- peer 依赖：react \>=16\.8
- 首次发布：2019-08-26T03:56:45.009Z
- 最新版本发布：2026-06-23T02:44:08.597Z
- 近 30 天下载量：1824（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：126（近 12 个月 10 个）

## 中文简介

AutoGuru 支持产品的图标和插图

## 安装

```sh
npm install @autoguru/icons
```

也可以使用：`pnpm add @autoguru/icons`、`yarn add @autoguru/icons`、`bun add @autoguru/icons`

## README

# @autoguru/icons (英语)

> AutoGuru支持产品的图标和插图.

[![npm](https://img.shields.io/npm/v/@autoguru/icons.svg)](https://www.npmjs.com/package/@autoguru/icons) [![license](https://img.shields.io/npm/l/@autoguru/icons.svg)](https://npmcn.com/package/%40autoguru/icons/LICENSE)

一个可树动的反相图标库,将自动Guru 图标和 [磷酸盐](https://phosphoricons.com/) 图标设置,镜像 AutoGuru 设计 系统 每个图标都是单个组件,所以您只运送您导入的东西.

-   **1500+ 图标** 纵横 **20个职类** ——见: [类别参考](https://npmcn.com/package/%40autoguru/icons/categories)
-   **树能震动** —— 说 `sideEffects: false`,每个图标一个组件
-   **可主题** ——图标继承颜色通过 `currentColor` 缩放到任意大小
-   **类型** – 舰船 TypeScript 定义每个图标

## 安装

```sh
yarn add @autoguru/icons react
```

`react` (qqq16.8)是同级依赖.

## 使用量

图标是反应组件。 让他们通过 [`Icon`](https://github.com/autoguru-au/overdrive) 构成部分从 `@autoguru/overdrive`数字 :

```jsx
import { UserSquareIcon } from '@autoguru/icons';
import { Icon } from '@autoguru/overdrive';

<Icon icon={UserSquareIcon} size={16} />;
```

或直接渲染——图标 `currentColor`,所以颜色和大小是 由集装箱控制:

```jsx
import { CarIcon } from '@autoguru/icons';

<span style={{ color: 'tomato', width: 24, height: 24, display: 'inline-flex' }}>
    <CarIcon />
</span>;
```

### 命名

每个图标导出为 `PascalCase` + 键 `Icon`,来源于其kebab- case 源文件名 :

| 来源 SVG | 导出 |
| --- | --: |
| `arrow-left.svg` | `ArrowLeftIcon` |
| `user-square.svg` | `UserSquareIcon` |
| `magnifying-glass.svg` | `MagnifyingGlassIcon` |

## 类别

全体 **1 577个图标** 归入 **20个职类**打开 [**类别参考**](https://npmcn.com/package/%40autoguru/icons/categories) 用于完整插图索引(每个图标) ,带有预览及其导出名称),或直跳到一个类别:

| 类别 | 图标 | 类别 | 图标 |
| --- | --: | --- | --: |
| [自动Guru](https://npmcn.com/package/%40autoguru/icons/categories/autoguru.md) | 第45条 | [已填充](https://npmcn.com/package/%40autoguru/icons/categories/filled.md) | 第9条 |
| [箭头](https://npmcn.com/package/%40autoguru/icons/categories/arrows.md) | 121国道 | [品牌](https://npmcn.com/package/%40autoguru/icons/categories/brands.md) | 第89条 |
| [商业](https://npmcn.com/package/%40autoguru/icons/categories/commerce.md) | 页:1 | [通讯](https://npmcn.com/package/%40autoguru/icons/categories/communication.md) | 73国 |
| [设计](https://npmcn.com/package/%40autoguru/icons/categories/design.md) | 133国 | [发展](https://npmcn.com/package/%40autoguru/icons/categories/development.md) | 29个 |
| [学历](https://npmcn.com/package/%40autoguru/icons/categories/education.md) | 第 19 条 | [游戏](https://npmcn.com/package/%40autoguru/icons/categories/games.md) | 73国 |
| [健康与健康](https://npmcn.com/package/%40autoguru/icons/categories/health-wellness.md) | 27个 | [地图和旅行](https://npmcn.com/package/%40autoguru/icons/categories/maps-travel.md) | 99 (韩语) |
| [数学和财务](https://npmcn.com/package/%40autoguru/icons/categories/math-finance.md) | 83个 | [媒体](https://npmcn.com/package/%40autoguru/icons/categories/media.md) | 页:1 |
| [办公室编辑( E)](https://npmcn.com/package/%40autoguru/icons/categories/office-editing.md) | 131个 | [人员](https://npmcn.com/package/%40autoguru/icons/categories/people.md) | 第69条 |
| [安全警告( W)](https://npmcn.com/package/%40autoguru/icons/categories/security-warnings.md) | 第44条 | [系统设备( D)](https://npmcn.com/package/%40autoguru/icons/categories/system-devices.md) | 156 (中文(简体) ) |
| [时间](https://npmcn.com/package/%40autoguru/icons/categories/time.md) | 第28条 | [天气与自然](https://npmcn.com/package/%40autoguru/icons/categories/weather-nature.md) | 第62条 |
|  |  |  |  |

## 查找图标

-   浏览 [类别参考](https://npmcn.com/package/%40autoguru/icons/categories) 或搜索 [phosphoricons.com (美国英语)](https://phosphoricons.com/)。 。 。 .
-   Phospor 图标 `arrow-square-out` 在此导出为 `ArrowSquareOutIcon`。 。 。 .

## 捐款

### 添加图标

1.  将优化的 SVG 降入 `icons/` 带有 kebab 文件名 (例如:. `car-key.svg`) (中文(简体) ). 文件名成为导出名称 - `car-key.svg` → `CarKeyIcon`。 。 。 .
    
2.  保持源头的清洁:一个 `viewBox`, (中文(简体) ), `currentColor` 黑色填满, `none` 中风,没有内线 `width`编号 :`height`SVG通过 `svgo` 在建造期间, 但我们也想要源头清理.
    
3.  将图标的分类添加到 [`categories/categories.json`](https://npmcn.com/package/%40autoguru/icons/categories/categories.json) (单位:千美元)`"car-key": "AutoGuru"`),然后刷新引用:
    
    ```sh
    node categories/generate.js   # regenerates the category reference
    ```
    
4.  运行 `yarn build`。 。 。 .
    

基础图标集来源于 [磷酸盐](https://phosphoricons.com/) (正常重量)加上讲解AutoGuru设计;这些SVG现在直接生活在 `icons/`因此不存在外部图标依赖性.

### 大楼

```sh
yarn generate   # SVGs -> React components + index.ts
yarn build      # generate, then compile CJS + ESM + type definitions
```

`scripts/build.js` 将 SVG 变成组件并生成 `index.ts`。 。 。 . 这个 [`categories/`](https://npmcn.com/package/%40autoguru/icons/categories) 参考文件是单独的独立文档 生产 `categories/generate.js` 从 `categories/categories.json` - 没错 不在构建和软件包中输出分类元数据.

## 许可证

麻省理工学院 [自动Guru](https://www.autoguru.com.au/)

[![AutoGuru](https://cdn.autoguru.com.au/images/logos/autoguru.svg)](http://www.autoguru.com.au/)

## 常见问题

### @autoguru/icons 是什么？

AutoGuru 支持产品的图标和插图

### 如何安装 @autoguru/icons？

在项目目录运行 npm install @autoguru/icons，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @autoguru/icons 支持 TypeScript 吗？

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

### @autoguru/icons 支持 ESM 还是 CommonJS？

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

### @autoguru/icons 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.17\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @autoguru/icons 可以商用吗？

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

### @autoguru/icons 的下载量有多少？

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

### @autoguru/icons 还在维护吗？

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