@ deathmaz/phosphor-icons-vue-split (英语)
Vue 3 的磷酸盐图标 每重量成分 为最佳的树摇摆.
原画 @phosphor-icons/vue 捆绑每个图标组件内的全部6个重. 即使只使用"正则"重量,所有其他重量的SVG数据也包含在你的捆绑中. 这个库将每个重量分成自己的组件,所以你只支付你使用的东西.
安装
npm install @deathmaz/phosphor-icons-vue-split
要求Vue 3.2.39或以后作为同伴依赖.
使用量
<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) |
<PhArrowRightBold :size="24" color="red" :mirrored="true" />
上下文提供者
使用 Vue 软件 provide 设置子树中所有图标的默认值,避免重复道具:
<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>:
<PhHeartFill :size="32" color="red">
<title>Favorite</title>
</PhHeartFill>
观众通过
任何附加属性都会传送到根 <svg> 元素通过 v-bind="$attrs"数字 :
<PhStarFill class="icon" data-testid="star" />
类型脚本
所有组件全部输入。 一个将军 PhosphorIconComponent 类型覆盖任意图标,而重量特定品牌类型则允许您将道具限制在单一的重量:
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
- 无
设置
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 + 构建 + 测试 |
如何运作
-
npm run assemble读取 SVG 文件@phosphor-icons/core(作为 dev 依赖而安装) 并生成一个 Vue SFC 每个图标的重量src/icons/。它也会生成src/index.ts包含所有组件的命名导出,包括从 Phosphor 图标元数据中再导出别名. -
npm run build运行组装步骤,然后以库模式用 Vite 构建库(preserveModules: true所以每个组件都是单独的.mjs文件),最后生成TypeScript类型定义.
生成的文件( E)src/icons/, (中文(简体) ), src/index.ts, (中文(简体) ), dist/)是被取而代之的——它们来自新鲜的 @phosphor-icons/core 每个建筑.
许可证
MIT — 图标设计由 Phosphor 图标。 。 。 .