# @duo-icons/react 中文文档

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

版本：1\.0\.1
npm 元数据更新时间：2026-03-12T17:26:01.728Z
中文译文更新时间：2026-11-13T00:26:52.216Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：171 kB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^19\.0\.0
- 首次发布：2026-03-12T17:26:01.159Z
- 最新版本发布：2026-03-12T17:26:01.462Z
- 近 30 天下载量：4382（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 1 个）

## 中文简介

Duo 图标 用于 React 的 优雅 二重奏图标 , 为 关心 现代 UI/ UX 的 开发者 所建

## 安装

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

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

## README

# Duo 图标 - 反应

[![Support me on Ko-fi](https://img.shields.io/badge/Ko--fi-Support_Me-29ABE0?logo=ko-fi&logoColor=white)](https://ko-fi.com/fazdiu) [![github](https://img.shields.io/badge/github-repo-blue?logo=github)](https://github.com/fazdiu/duo-icons?tab=readme-ov-file#packages) ![npm](https://img.shields.io/badge/npm-red?logo=npm) ![react](https://img.shields.io/badge/react-blue?logo=react) ![nextdotjs](https://img.shields.io/badge/nextjs-darkcyan?logo=nextdotjs) ![typescript](https://img.shields.io/badge/typescript-gray?logo=typescript) ![javascript](https://img.shields.io/badge/javascript-yellow?logo=javascript)

Duo Icons for React 提供轻量级的,被作为 React 组件执行的 duotone SVG 图标集. 对于现代的网络应用来说,每个图标都有两层(初级和二级),用于两种特效.

## 安装

使用 npm 或 纱线安装 :

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

### 同伴依赖关系

-   `react`

确保安装在您的工程中 .

## 基本用途

导入单个图标并在 JSX 中使用 :

```jsx
import { AddCircle } from '@duo-icons/react';

function App() {
  return (
    <div>
      <AddCircle />
      <AddCircle size={32} className="text-red-500" />
    </div>
  );
}
```

图标接受标准SVG道具(`fill`, (中文(简体) ), `stroke`, (中文(简体) ), `aria-*`等)和a `size` 道具为方便.

## 可用图标

所有可用图标的完整收藏在 [https://duoicons.vercel.app/ 互联网档案馆的存檔,存档日期2013-12-02](https://duoicons.vercel.app/),提供必要的资源,在您的项目中执行这些内容.

## 支持选项( O)

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `size` | `number` | `24` | 以像素计的宽度/ 高度 |
| `className` | `string` | —— 说 | 适用于 `<svg>` 元素 |
| .svg道具 | `React.SVGProps` | —— 说 | 任何有效的 SVG 属性( 例如 ). `fill`, (中文(简体) ), `stroke`, (中文(简体) ), `aria-label`(中文(简体) ) |

### Duotone 层

每个图标标记包括:

-   `.duo-icons-primary-layer` - 主/填充路径
-   `.duo-icons-secondary-layer` - 二级/强化路径(不透明) `.3` (默认)

您可以使用 CSS 或 通用框架来设置这些样式 .

## 样式

### 尾风 CSS 示例

用 Tailwind 的公用事业自定义您的外观; 您也可以用自定义的公用事业自定义层 `duo-icons-primary` 财务报告和审定财务报表 `duo-icons-secondary` 国家 `@duo-icons/tailwind/base`。 。 。 .

```jsx
<AddCircle className="text-blue-500" />
<AddCircle className="text-green-600 duo-icons-secondary:text-green-500" size={32} />
```

### 普通 CSS 软件

```css
.icon-large {
  width: 48px;
  height: 48px;
  color: #1a73e8;
}

.icon-large .duo-icons-secondary-layer {
  opacity: 0.4;
}
```

```jsx
<AddCircle className="icon-large" />
```

## 实例

### 大小和颜色变化

```jsx
<div className="flex gap-4">
  <AddCircle size={16} className="text-red-500" />
  <AddCircle size={24} className="text-yellow-500" />
  <AddCircle size={32} className="text-green-500" />
</div>
```

### 图标按钮

```jsx
<button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded">
  <AddCircle size={20} />
  Add Item
</button>
```

### 无障碍

```jsx
<AddCircle aria-label="Add item" />
```

## 补充说明

-   图标是纯功能组件;树在现代捆绑机中震动.
-   仅导入您需要减小捆绑大小的图标 .
-   您可以使用 `import()`。 。 。 .

## 许可证

麻省理工学院

## 支助

如果您发现 Duo 图标有用, 请考虑通过捐赠支持项目 : [![Support me on Ko-fi](https://img.shields.io/badge/Ko--fi-Support_Me-29ABE0?logo=ko-fi&logoColor=white)](https://ko-fi.com/fazdiu)

## 常见问题

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

Duo 图标 用于 React 的 优雅 二重奏图标 , 为 关心 现代 UI/ UX 的 开发者 所建

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

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

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

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

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

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

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

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

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

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

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

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