npm - @deathmaz/phosphor-icons-vue-split - Versions diffs - 0.1.0 - Mend

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 phosphor-icons-vue-split contributors
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

@@ -0,0 +1,142 @@
+# phosphor-icons-vue-split
+Phosphor Icons for Vue 3 with **per-weight components** for optimal tree-shaking.
+The original [`@phosphor-icons/vue`](https://github.com/phosphor-icons/vue) bundles all 6 weights inside each icon component. Even if you only use the "regular" weight, the SVG data for all other weights is included in your bundle. This library splits each weight into its own component, so you only pay for what you use.
+## Installation
+```bash
+npm install phosphor-icons-vue-split
+```
+Requires Vue 3.2.39 or later as a peer dependency.
+## Usage
+```vue
+<script lang="ts" setup>
+import {
+  PhHorseRegular,
+  PhHeartFill,
+  PhCubeDuotone,
+} from "phosphor-icons-vue-split";
+</script>
+<template>
+  <PhHorseRegular />
+  <PhHeartFill :size="32" color="hotpink" />
+  <PhCubeDuotone :size="48" color="#333" />
+</template>
+```
+Components follow the naming pattern `Ph[IconName][Weight]`, where weight is one of:
+| Weight     | Example             |
+| ---------- | ------------------- |
+| `Thin`     | `PhHeartThin`       |
+| `Light`    | `PhHeartLight`      |
+| `Regular`  | `PhHeartRegular`    |
+| `Bold`     | `PhHeartBold`       |
+| `Fill`     | `PhHeartFill`       |
+| `Duotone`  | `PhHeartDuotone`    |
+All Phosphor icons are available across all 6 weights.
+## Props
+All props are optional.
+| Prop       | Type               | Default          | Description                           |
+| ---------- | ------------------ | ---------------- | ------------------------------------- |
+| `size`     | `string \| number` | `"1em"`          | Width and height of the SVG           |
+| `color`    | `string`           | `"currentColor"` | Fill color of the SVG                 |
+| `mirrored` | `boolean`          | —                | Horizontally flip the icon (for RTL)  |
+```vue
+<PhArrowRightBold :size="24" color="red" :mirrored="true" />
+```
+## Context provider
+Use Vue's `provide` to set defaults for all icons in a subtree, avoiding repetitive props:
+```vue
+<script lang="ts" setup>
+import { provide } from "vue";
+import { PhHouseRegular, PhGearRegular } from "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>
+```
+Props on individual components override the injected context values.
+## Slots
+Components accept a default slot for injecting arbitrary SVG elements (e.g., `<title>` for accessibility, `<animate>`, `<filter>`):
+```vue
+<PhHeartFill :size="32" color="red">
+  <title>Favorite</title>
+</PhHeartFill>
+```
+## Attrs passthrough
+Any additional attributes are forwarded to the root `<svg>` element via `v-bind="$attrs"`:
+```vue
+<PhStarFill class="icon" data-testid="star" />
+```
+## Bundle size
+Each component contains only its weight's SVG path data. A typical component compiles to ~0.8 KB (gzipped), compared to ~4.4 KB per icon in the original library that bundles all weights.
+The library uses `sideEffects: false` and Vite's `preserveModules` output, so bundlers can tree-shake unused components at the module level.
+## Development
+### Prerequisites
+- Node.js >= 18
+- npm
+### Setup
+```bash
+npm install
+```
+### Scripts
+| Script              | Description                                   |
+| ------------------- | --------------------------------------------- |
+| `npm run build`     | Full pipeline: generate components + Vite build + type definitions |
+| `npm run assemble`  | Generate Vue SFCs from `@phosphor-icons/core` SVGs |
+| `npm run test`      | Run tests with Vitest                         |
+| `npm run test:watch`| Run tests in watch mode                       |
+| `npm run lint`      | Lint with oxlint                              |
+| `npm run typecheck` | Type-check with TypeScript                    |
+| `npm run check`     | Run typecheck + lint + test                   |
+### How it works
+1. **`npm run assemble`** reads SVG files from `@phosphor-icons/core` (installed as a dev dependency) and generates one Vue SFC per icon per weight into `src/icons/`. It also generates `src/index.ts` with named exports for all components, including alias re-exports from the Phosphor icon metadata.
+2. **`npm run build`** runs the assemble step, then builds the library with Vite in library mode (`preserveModules: true` so each component is a separate `.mjs` file), and finally generates TypeScript type definitions.
+Generated files (`src/icons/`, `src/index.ts`, `dist/`) are gitignored — they are produced fresh from `@phosphor-icons/core` on each build.
+## License
+MIT — Icon designs by [Phosphor Icons](https://phosphoricons.com).

@@ -0,0 +1,30 @@
+import { defineComponent as p, inject as o, computed as r, openBlock as u, createElementBlock as v, mergeProps as f, renderSlot as h, createElementVNode as g } from "vue";
+const w = ["width", "height", "fill", "transform"], C = {
+  name: "PhAcornBold"
+}, _ = /* @__PURE__ */ p({
+  ...C,
+  props: {
+    size: { type: [String, Number] },
+    color: { type: String },
+    mirrored: { type: Boolean, default: void 0 }
+  },
+  setup(s) {
+    const e = s, i = o("size", "1em"), a = o("color", "currentColor"), c = o("mirrored", !1), t = r(() => e.size ?? i), d = r(() => e.color ?? a), m = r(
+      () => e.mirrored !== void 0 ? e.mirrored ? "scale(-1, 1)" : void 0 : c ? "scale(-1, 1)" : void 0
+    );
+    return (l, n) => (u(), v("svg", f({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 256 256",
+      width: t.value,
+      height: t.value,
+      fill: d.value,
+      transform: m.value
+    }, l.$attrs), [
+      h(l.$slots, "default"),
+      n[0] || (n[0] = g("path", { d: "M236,104a60.07,60.07,0,0,0-60-60H140.4A20,20,0,0,1,160,28a12,12,0,0,0,0-24,44.06,44.06,0,0,0-43.81,40H80a60.07,60.07,0,0,0-60,60,20,20,0,0,0,8,16v8c0,37.45,34,64.71,61.23,86.61,10.22,8.2,25.63,20.58,26.77,25.56a12,12,0,0,0,24,0c1.14-5,16.55-17.36,26.77-25.56C194.05,192.71,228,165.45,228,128v-8A20,20,0,0,0,236,104ZM80,68h96a36.06,36.06,0,0,1,35.78,32H44.22A36.06,36.06,0,0,1,80,68Zm71.74,127.9c-9.17,7.36-17.46,14-23.74,20.55-6.28-6.53-14.57-13.19-23.74-20.55C81,177.2,52,153.94,52,128v-4H204v4C204,153.94,175,177.2,151.74,195.9Z" }, null, -1))
+    ], 16, w));
+  }
+});
+export {
+  _ as default
+};

@@ -0,0 +1,4 @@
+import f from "./PhAcornBold.vue.mjs";
+export {
+  f as default
+};

@@ -0,0 +1,34 @@
+import { defineComponent as u, inject as t, computed as r, openBlock as v, createElementBlock as f, mergeProps as h, renderSlot as g, createElementVNode as s } from "vue";
+const C = ["width", "height", "fill", "transform"], w = {
+  name: "PhAcornDuotone"
+}, x = /* @__PURE__ */ u({
+  ...w,
+  props: {
+    size: { type: [String, Number] },
+    color: { type: String },
+    mirrored: { type: Boolean, default: void 0 }
+  },
+  setup(i) {
+    const o = i, a = t("size", "1em"), d = t("color", "currentColor"), c = t("mirrored", !1), l = r(() => o.size ?? a), p = r(() => o.color ?? d), m = r(
+      () => o.mirrored !== void 0 ? o.mirrored ? "scale(-1, 1)" : void 0 : c ? "scale(-1, 1)" : void 0
+    );
+    return (n, e) => (v(), f("svg", h({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 256 256",
+      width: l.value,
+      height: l.value,
+      fill: p.value,
+      transform: m.value
+    }, n.$attrs), [
+      g(n.$slots, "default"),
+      e[0] || (e[0] = s("path", {
+        d: "M216,112v16c0,53-88,88-88,112,0-24-88-59-88-112V112Z",
+        opacity: "0.2"
+      }, null, -1)),
+      e[1] || (e[1] = s("path", { d: "M232,104a56.06,56.06,0,0,0-56-56H136a24,24,0,0,1,24-24,8,8,0,0,0,0-16,40,40,0,0,0-40,40H80a56.06,56.06,0,0,0-56,56,16,16,0,0,0,8,13.83V128c0,35.53,33.12,62.12,59.74,83.49C103.66,221.07,120,234.18,120,240a8,8,0,0,0,16,0c0-5.82,16.34-18.93,28.26-28.51C190.88,190.12,224,163.53,224,128V117.83A16,16,0,0,0,232,104ZM80,64h96a40.06,40.06,0,0,1,40,40H40A40,40,0,0,1,80,64Zm74.25,135c-10.62,8.52-20,16-26.25,23.37-6.25-7.32-15.63-14.85-26.25-23.37C77.8,179.79,48,155.86,48,128v-8H208v8C208,155.86,178.2,179.79,154.25,199Z" }, null, -1))
+    ], 16, C));
+  }
+});
+export {
+  x as default
+};

@@ -0,0 +1,30 @@
+import { defineComponent as p, inject as o, computed as r, openBlock as u, createElementBlock as v, mergeProps as f, renderSlot as H, createElementVNode as h } from "vue";
+const g = ["width", "height", "fill", "transform"], w = {
+  name: "PhAddressBookBold"
+}, B = /* @__PURE__ */ p({
+  ...w,
+  props: {
+    size: { type: [String, Number] },
+    color: { type: String },
+    mirrored: { type: Boolean, default: void 0 }
+  },
+  setup(n) {
+    const e = n, i = o("size", "1em"), a = o("color", "currentColor"), d = o("mirrored", !1), t = r(() => e.size ?? i), c = r(() => e.color ?? a), m = r(
+      () => e.mirrored !== void 0 ? e.mirrored ? "scale(-1, 1)" : void 0 : d ? "scale(-1, 1)" : void 0
+    );
+    return (s, l) => (u(), v("svg", f({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 256 256",
+      width: t.value,
+      height: t.value,
+      fill: c.value,
+      transform: m.value
+    }, s.$attrs), [
+      H(s.$slots, "default"),
+      l[0] || (l[0] = h("path", { d: "M208,20H64A20,20,0,0,0,44,40V60H32a12,12,0,0,0,0,24H44v32H32a12,12,0,0,0,0,24H44v32H32a12,12,0,0,0,0,24H44v20a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V40A20,20,0,0,0,208,20Zm-4,192H68V44H204ZM100.8,171.37a48,48,0,0,1,70.4,0,12,12,0,0,0,17.6-16.32,72,72,0,0,0-19.21-14.68,44,44,0,1,0-67.19,0,72.12,72.12,0,0,0-19.2,14.68,12,12,0,0,0,17.6,16.32ZM116,112a20,20,0,1,1,20,20A20,20,0,0,1,116,112Z" }, null, -1))
+    ], 16, g));
+  }
+});
+export {
+  B as default
+};

@@ -0,0 +1,34 @@
+import { defineComponent as u, inject as t, computed as r, openBlock as v, createElementBlock as f, mergeProps as h, renderSlot as Z, createElementVNode as n } from "vue";
+const g = ["width", "height", "fill", "transform"], H = {
+  name: "PhAddressBookTabsDuotone"
+}, w = /* @__PURE__ */ u({
+  ...H,
+  props: {
+    size: { type: [String, Number] },
+    color: { type: String },
+    mirrored: { type: Boolean, default: void 0 }
+  },
+  setup(a) {
+    const o = a, i = t("size", "1em"), d = t("color", "currentColor"), m = t("mirrored", !1), s = r(() => o.size ?? i), c = r(() => o.color ?? d), p = r(
+      () => o.mirrored !== void 0 ? o.mirrored ? "scale(-1, 1)" : void 0 : m ? "scale(-1, 1)" : void 0
+    );
+    return (l, e) => (v(), f("svg", h({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 256 256",
+      width: s.value,
+      height: s.value,
+      fill: c.value,
+      transform: p.value
+    }, l.$attrs), [
+      Z(l.$slots, "default"),
+      e[0] || (e[0] = n("path", {
+        d: "M48,40a8,8,0,0,0-8,8V208a8,8,0,0,0,8,8H184V40Zm64,104a24,24,0,1,1,24-24A24,24,0,0,1,112,144Z",
+        opacity: "0.2"
+      }, null, -1)),
+      e[1] || (e[1] = n("path", { d: "M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm-16,72h16v48H192Zm16-16H192V48h16ZM48,48H176V208H48ZM208,208H192V168h16v40Zm-56.25-42a39.76,39.76,0,0,0-17.19-23.34,32,32,0,1,0-45.12,0A39.84,39.84,0,0,0,72.25,166a8,8,0,0,0,15.5,4c2.64-10.25,13.06-18,24.25-18s21.62,7.73,24.25,18a8,8,0,1,0,15.5-4ZM96,120a16,16,0,1,1,16,16A16,16,0,0,1,96,120Z" }, null, -1))
+    ], 16, g));
+  }
+});
+export {
+  w as default
+};

@deathmaz/phosphor-icons-vue-split 0.1.0