# @cardog-icons/react 中文文档

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

版本：1\.2\.0
npm 元数据更新时间：2026-03-14T23:04:16.023Z
中文译文更新时间：2026-11-09T04:19:22.990Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：9.2 MB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2025-03-11T05:12:21.073Z
- 最新版本发布：2026-03-14T23:04:15.878Z
- 近 30 天下载量：32914（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 3 个）

## 中文简介

React 应用程序的汽车品牌图标

## 安装

```sh
npm install @cardog-icons/react
```

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

## README

# @ cardog-icons/ 反应

对应汽车品牌标志和图标的组件.

## 特征

-   **380+ 优化 SVG 图标** 汽车品牌
-   **两个变体**: 颜色( 默认) 和 Mono( 暗模式优化)
-   带有完整类型定义的脚本类型支持
-   树可摇动, 只导入所需
-   方便定制大小、颜色和其他 SVG 道具
-   轻而易举

## 安装

```bash
npm install @cardog-icons/react
# or
yarn add @cardog-icons/react
# or
pnpm add @cardog-icons/react
```

## 使用量

### 导入特定图标

```jsx
import {
  BMWLogo,
  BMWLogoDark,
  AudiIcon,
  TeslaWordmark,
} from "@cardog-icons/react";

function App() {
  return (
    <div>
      {/* Color variants (default) */}
      <BMWLogo size={48} />
      <AudiIcon size={32} />
      <TeslaWordmark height={24} width={120} />

      {/* Mono/Dark variants - great for dark mode */}
      <BMWLogoDark size={48} className="text-white" />
    </div>
  );
}
```

### 使用通用图标组件

```jsx
import { Icon } from "@cardog-icons/react";

function App() {
  return (
    <div>
      <Icon name="BMWLogo" size={48} />
      <Icon name="BMWLogoDark" size={48} />
      <Icon name="AudiIcon" size={32} />
    </div>
  );
}
```

### 使用 Icon 钩子

```jsx
import { useIcon } from "@cardog-icons/react";

function CustomIcon({ name, ...props }) {
  const icon = useIcon({ name, ...props });

  return <div className="custom-icon-wrapper">{icon}</div>;
}
```

## 图标变量

每个品牌分为两种:

| 备选案文 | 后缀 | 说明 |
| --- | --- | --- |
| 颜色 | (无) | 光背景的全彩品牌标志 |
| 单曲 | `Dark` | 暗模式 UI 的单色图标 |

## 可用的图标类型

-   **图标**: 紧凑徽章/雕塑图标
-   **标记**: 完整的品牌标志
-   **逻辑**: 有文本的水平标志
-   **文字标记**: 只有文本的品牌名称

### 命名实例

| 类型 | 颜色 | 单曲 |
| --- | --- | --- |
| 图标 | `BMWIcon` | `BMWIconDark` |
| 标记 | `BMWLogo` | `BMWLogoDark` |
| 水平 | `BMWLogoHorizontal` | `BMWLogoHorizontalDark` |
| 文字标记 | `BMWWordmark` | `BMWWordmarkDark` |

## 可用品牌

阿库拉、阿尔法·罗密欧、阿斯顿·马丁、奥迪、本特利、宝马、布加蒂\*、别克\*、BYD、凯迪拉克、切夫罗莱特、克莱斯勒、道奇、法拉利、菲亚特、福特、创世纪、GMC、本田、悍马、现代、英菲尼蒂、贾瓜尔、吉普、基亚、柯尼格塞格、兰博基尼、地漫游、莱克萨斯、林肯、莲花、路西德、马塞拉蒂、马兹达、梅赛德斯-奔驰、麦克拉伦、米尼、三菱、尼桑、帕加尼\*、波兰星、波尔什、RAM、里维昂\*、罗斯-罗伊斯、苏巴鲁、特斯拉、丰田、文法斯特、伏克萨、沃尔沃

\*只变体

## 道具

所有图标组件接受以下道具:

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `size` | `number | string` | `24` | 宽度和高度的大小 |
| `width` | `number | string` | \- 说吧 | 覆盖宽度 |
| `height` | `number | string` | \- 说吧 | 覆盖高度 |
| `className` | `string` | \- 说吧 | CSS 类名称 |
| `...svgProps` | `React.SVGProps<SVGSVGElement>` | \- 说吧 | 任何有效的 SVG 道具 |

## 许可证

麻省理工学院

## 常见问题

### @cardog-icons/react 是什么？

React 应用程序的汽车品牌图标

### 如何安装 @cardog-icons/react？

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

### @cardog-icons/react 支持 TypeScript 吗？

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

### @cardog-icons/react 支持 ESM 还是 CommonJS？

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

### @cardog-icons/react 可以商用吗？

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

### @cardog-icons/react 的下载量有多少？

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

### @cardog-icons/react 还在维护吗？

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