# @boxicons/react 中文文档

规范地址：https://npmcn.com/package/%40boxicons/react/

版本：1\.0\.3
npm 元数据更新时间：2026-02-16T00:47:34.016Z
中文译文更新时间：2026-11-08T12:49:08.072Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：18.5 MB，13101 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=16\.8\.0
- 首次发布：2026-01-26T22:59:23.675Z
- 最新版本发布：2026-02-16T00:47:33.885Z
- 近 30 天下载量：40670（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 4 个）

## 中文简介

Boxicons 的反应组件

## 安装

```sh
npm install @boxicons/react
```

也可以使用：`pnpm add @boxicons/react`、`yarn add @boxicons/react`、`bun add @boxicons/react`

## README

# @ boxicons/ 反应

由 Boxicons SVG 文件所建的具有全树摇晃支持的回放图标库.

## 安装

```bash
npm install @boxicons/react
# or
yarn add @boxicons/react
# or
pnpm add @boxicons/react
```

## 使用量

### 基本用途

```tsx
import { Alarm, Twitter, Home } from '@boxicons/react';

function App() {
  return (
    <div>
      <Alarm />
      <Twitter />
      <Home />
    </div>
  );
}
```

### 图标包

每个图标可以有多个变体. 使用 `pack` 在它们之间切换的道具 :

-   **基础** - 大纲/正则样式图标(大多数图标默认)
-   **已填满** - 固态/填充式图标
-   **品牌** - 品牌/logo图标(对Twitter,Facebook等品牌图标的默认)

```tsx
import { Alarm } from '@boxicons/react';

function App() {
  return (
    <div>
      {/* Basic/outline style (default) */}
      <Alarm />
      
      {/* Filled style */}
      <Alarm pack="filled" />
    </div>
  );
}
```

### 大小

#### 大小预设

使用 `size` 方便预设大小的道具 :

```tsx
<Alarm size="xs" />   {/* 16px */}
<Alarm size="sm" />   {/* 20px */}
<Alarm size="base" /> {/* 24px (default) */}
<Alarm size="md" />   {/* 36px */}
<Alarm size="lg" />   {/* 48px */}
<Alarm size="xl" />   {/* 64px */}
<Alarm size="2xl" />  {/* 96px */}
<Alarm size="3xl" />  {/* 128px */}
<Alarm size="4xl" />  {/* 256px */}
<Alarm size="5xl" />  {/* 512px */}
```

#### 自定义大小

对于自定义大小, 使用 `width` 财务报告和审定财务报表 `height` 道具( 覆盖) `size`:

```tsx
<Alarm width={32} height={32} />
<Alarm width="48" height="48" />
<Alarm width="2rem" height="2rem" />
```

### 颜色

使用 `fill` 更改图标颜色的道具(默认为 `currentColor`:

```tsx
<Alarm fill="#ff0000" />
<Alarm fill="rgb(0, 128, 255)" />
<Alarm fill="currentColor" /> {/* Inherits text color */}
```

### 不透明度

控制透明度 `opacity` 道具 :

```tsx
<Alarm opacity={0.5} />
<Alarm opacity="0.75" />
```

### 翻转

横向或纵向镜像图标 :

```tsx
<Alarm flip="horizontal" /> {/* Mirrors left-to-right */}
<Alarm flip="vertical" />   {/* Mirrors top-to-bottom */}
```

### 旋转

任意旋转图标 :

```tsx
<Alarm rotate={45} />      {/* Rotates 45 degrees */}
<Alarm rotate="90" />      {/* Rotates 90 degrees */}
<Alarm rotate="180deg" />  {/* Also accepts "deg" suffix */}
```

### 删除铺设

删除默认的 2px 粘贴在图标周围以进行更紧的匹配 :

```tsx
<Alarm removePadding />    {/* Crops padding, viewBox becomes "2 2 20 20" */}
```

### 组合道具

所有道具都可以合并:

```tsx
<Alarm 
  pack="filled"
  fill="#ffffff"
  opacity={0.8}
  size="lg"
  flip="horizontal"
  rotate={45}
  className="my-icon"
  style={{ margin: '8px' }}
/>
```

### 标准 SVG 道具

所有标准的SVG道具都得到支持并传递到下面 `<svg>` 元素 :

```tsx
<Alarm 
  className="icon"
  id="my-alarm-icon"
  aria-label="Alarm"
  role="img"
  onClick={() => console.log('clicked')}
/>
```

### 转发

参考文献转发到SVG元素:

```tsx
import { useRef } from 'react';
import { Alarm } from '@boxicons/react';

function App() {
  const iconRef = useRef<SVGSVGElement>(null);
  
  return <Alarm ref={iconRef} />;
}
```

## 树摇

这个图书馆是完全可以树动的。 只有您导入的图标将包含在您的最后捆绑中 .

```tsx
// ✅ Only Alarm is bundled
import { Alarm } from '@boxicons/react';

// ✅ Direct import also works
import { Alarm } from '@boxicons/react/icons/Alarm';
```

## 可用图标

图书馆包括所有Boxicons:

-   **1884 (英语)** 基本(外线)图标
-   **1884 (英语)** 已填入图标
-   **295个** 品牌图标

### 命名公约

图标名称从 kebab- case SVG 文件名转换为 PascalCase :

| SVG 文件 | 组件名称 |
| --- | --- |
| `bx-alarm.svg` | `<Alarm />` |
| `bx-alarm-clock.svg` | `<AlarmClock />` |
| `bx-twitter.svg` | `<Twitter />` |
| `bx-8-ball.svg` | `<Icon8Ball />` |

**说明:** 以数字开头的图标被前缀为"Icon"(例如, `Icon8Ball`, (中文(简体) ), `Icon500px`) (中文(简体) ).

**说明:** 一些图标有"Icon"后缀来避免与保留词相冲突(例如, `ReactIcon` 用于反应标志).

## 类型脚本

导出类型的全类型脚本支持 :

```tsx
import type { BoxIconProps, IconPack, IconSize, FlipDirection } from '@boxicons/react';
```

### BoxIcon 选项

```tsx
interface BoxIconProps extends SVGProps<SVGSVGElement> {
  pack?: 'basic' | 'filled' | 'brands';
  fill?: string;
  opacity?: number | string;
  width?: number | string;
  height?: number | string;
  size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
  flip?: 'horizontal' | 'vertical';
  rotate?: number | string;
  removePadding?: boolean;
}
```

# @ boxicons/ 反应

## 常见问题

### @boxicons/react 是什么？

Boxicons 的反应组件

### 如何安装 @boxicons/react？

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

### @boxicons/react 支持 TypeScript 吗？

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

### @boxicons/react 支持 ESM 还是 CommonJS？

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

### @boxicons/react 可以商用吗？

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

### @boxicons/react 的下载量有多少？

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

### @boxicons/react 还在维护吗？

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