# @deathmaz/phosphor-icons-vue-split 中文文档

规范地址：https://npmcn.com/package/%40deathmaz/phosphor-icons-vue-split/

版本：0\.2\.1
npm 元数据更新时间：2026-04-09T12:04:57.211Z
中文译文更新时间：2026-11-12T05:14:42.214Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：14.9 MB，9077 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：vue \>=3\.2\.39
- 首次发布：2026-02-28T15:16:13.490Z
- 最新版本发布：2026-04-09T12:04:57.112Z
- 近 30 天下载量：2796（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

Vue 3 的 Phospor 图标, 带有最佳树摇动的每克组件

## 安装

```sh
npm install @deathmaz/phosphor-icons-vue-split
```

也可以使用：`pnpm add @deathmaz/phosphor-icons-vue-split`、`yarn add @deathmaz/phosphor-icons-vue-split`、`bun add @deathmaz/phosphor-icons-vue-split`

## README

# @ deathmaz/phosphor-icons-vue-split (英语)

Vue 3 的磷酸盐图标 **每重量成分** 为最佳的树摇摆.

原画 [`@phosphor-icons/vue`](https://github.com/phosphor-icons/vue) 捆绑每个图标组件内的全部6个重. 即使只使用"正则"重量,所有其他重量的SVG数据也包含在你的捆绑中. 这个库将每个重量分成自己的组件,所以你只支付你使用的东西.

## 安装

```bash
npm install @deathmaz/phosphor-icons-vue-split
```

要求Vue 3.2.39或以后作为同伴依赖.

## 使用量

```vue
<script lang="ts" setup>
import {
  PhHorseRegular,
  PhHeartFill,
  PhCubeDuotone,
} from "@deathmaz/phosphor-icons-vue-split";
</script>

<template>
  <PhHorseRegular />
  <PhHeartFill :size="32" color="hotpink" />
  <PhCubeDuotone :size="48" color="#333" />
</template>
```

部件遵循命名模式 `Ph[IconName][Weight]`中,重量为:

| 重量 | 示例 |
| --- | --- |
| `Thin` | `PhHeartThin` |
| `Light` | `PhHeartLight` |
| `Regular` | `PhHeartRegular` |
| `Bold` | `PhHeartBold` |
| `Fill` | `PhHeartFill` |
| `Duotone` | `PhHeartDuotone` |

所有Phosphoor图标可以覆盖所有6个重.

## 道具

所有道具都是可选的.

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `size` | `string | number` | `"1em"` | SVG 的宽度和高度 |
| `color` | `string` | `"currentColor"` | SVG 的填充颜色 |
| `mirrored` | `boolean` | —— 说 | 水平翻转图标( 对于 RTL) |

```vue
<PhArrowRightBold :size="24" color="red" :mirrored="true" />
```

## 上下文提供者

使用 Vue 软件 `provide` 设置子树中所有图标的默认值,避免重复道具:

```vue
<script lang="ts" setup>
import { provide } from "vue";
import { PhHouseRegular, PhGearRegular } from "@deathmaz/phosphor-icons-vue-split";

provide("size", "24px");
provide("color", "#1a1a1a");
provide("mirrored", false);
</script>

<template>
  <!-- Both icons inherit size="24px" and color="#1a1a1a" -->
  <PhHouseRegular />
  <PhGearRegular />
</template>
```

单个组件的道具凌驾于注入上下文值之上 .

## 槽数

组件接受用于插入任意 SVG 元素的默认插槽(例如, `<title>` 无障碍, `<animate>`, (中文(简体) ), `<filter>`:

```vue
<PhHeartFill :size="32" color="red">
  <title>Favorite</title>
</PhHeartFill>
```

## 观众通过

任何附加属性都会传送到根 `<svg>` 元素通过 `v-bind="$attrs"`数字 :

```vue
<PhStarFill class="icon" data-testid="star" />
```

## 类型脚本

所有组件全部输入。 一个将军 `PhosphorIconComponent` 类型覆盖任意图标,而重量特定品牌类型则允许您将道具限制在单一的重量:

```ts
import type {
  PhosphorIconComponent,
  PhosphorThinIcon,
  PhosphorRegularIcon,
  PhosphorFillIcon,
} from "@deathmaz/phosphor-icons-vue-split";

// Accept any icon
defineProps<{ icon: PhosphorIconComponent }>();

// Accept only regular-weight icons
defineProps<{ icon: PhosphorRegularIcon }>();
```

可用重量类型 : `PhosphorThinIcon`, (中文(简体) ), `PhosphorLightIcon`, (中文(简体) ), `PhosphorRegularIcon`, (中文(简体) ), `PhosphorBoldIcon`, (中文(简体) ), `PhosphorFillIcon`, (中文(简体) ), `PhosphorDuotoneIcon`。 。 。 .

## 套装大小

每个组件仅包含其权重的SVG路径数据. 一个典型的组件编译为~0.8 KB(gzipped),而原始库中每个将所有权重捆绑的图标为~4.4 KB.

图书馆使用 `sideEffects: false` 和维特的 `preserveModules` 输出,因此捆绑者可以在模块级别上将未使用的组件树摇.

## 发展

### 先决条件

-   节点.js 20
-   无

### 设置

```bash
npm install
```

### 脚本

| 脚本 | 说明 |
| --- | --- |
| `npm run build` | 完整管道:生成组件+维特构建+类型定义 |
| `npm run assemble` | 生成 Vue SFCs 从 `@phosphor-icons/core` SVGs 组合 |
| `npm run test` | 用 Vitest 进行测试 |
| `npm run test:watch` | 在监视模式下运行测试 |
| `npm run lint` | 与克林特同在 |
| `npm run typecheck` | 使用类型脚本检查类型 |
| `npm run check` | 运行类型检查 + lint + 构建 + 测试 |

### 如何运作

1.  **`npm run assemble`** 读取 SVG 文件 `@phosphor-icons/core` (作为 dev 依赖而安装) 并生成一个 Vue SFC 每个图标的重量 `src/icons/`。它也会生成 `src/index.ts` 包含所有组件的命名导出,包括从 Phosphor 图标元数据中再导出别名.
    
2.  **`npm run build`** 运行组装步骤,然后以库模式用 Vite 构建库(`preserveModules: true` 所以每个组件都是单独的 `.mjs` 文件),最后生成TypeScript类型定义.
    

生成的文件( E)`src/icons/`, (中文(简体) ), `src/index.ts`, (中文(简体) ), `dist/`)是被取而代之的——它们来自新鲜的 `@phosphor-icons/core` 每个建筑.

## 许可证

MIT — 图标设计由 [Phosphor 图标](https://phosphoricons.com/)。 。 。 .

## 常见问题

### @deathmaz/phosphor-icons-vue-split 是什么？

Vue 3 的 Phospor 图标, 带有最佳树摇动的每克组件

### 如何安装 @deathmaz/phosphor-icons-vue-split？

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

### @deathmaz/phosphor-icons-vue-split 支持 TypeScript 吗？

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

### @deathmaz/phosphor-icons-vue-split 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @deathmaz/phosphor-icons-vue-split 可以商用吗？

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

### @deathmaz/phosphor-icons-vue-split 的下载量有多少？

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

### @deathmaz/phosphor-icons-vue-split 还在维护吗？

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