{"_id":"@deathmaz/phosphor-icons-vue-split","_rev":"3-c430e56d09aaeeef4b45c7aea93a23a9","name":"@deathmaz/phosphor-icons-vue-split","dist-tags":{"latest":"0.2.1"},"versions":{"0.1.0":{"name":"@deathmaz/phosphor-icons-vue-split","version":"0.1.0","license":"MIT","_id":"@deathmaz/phosphor-icons-vue-split@0.1.0","maintainers":[{"name":"deathmaz","email":"deathmaz@pm.me"}],"dist":{"shasum":"7792dd6bbc42befd8aa014c09bdcf1b9f6bdae56","tarball":"https://registry.npmjs.org/@deathmaz/phosphor-icons-vue-split/-/phosphor-icons-vue-split-0.1.0.tgz","fileCount":18149,"integrity":"sha512-zCaApuHYCkMolWlGBDMa9bSXFAY7Q0VRKXPJmh9UL8OTfhtEHeGyOQw/vrgy9rF5NERP2p5Q+aRktxEwt0kw9Q==","signatures":[{"sig":"MEUCIQC0LjC6r7kwg78v1KHg/7BSEfLGGKWgdH5uZPZA5ArZEwIgMP2G8S2gBOMo7rHWle7OwGoOrinEZ9aew+4X9MWab20=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15724885},"main":"dist/index.mjs","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","default":"./dist/index.mjs"}},"gitHead":"429663c3acb6148da5bd4df7ba05bc76a0559516","scripts":{"lint":"oxlint","test":"vitest run","build":"rimraf dist && npm run assemble && vite build && npm run generate-types","check":"npm run typecheck && npm run lint && npm run test","assemble":"tsx bin/assemble.ts","typecheck":"tsc --noEmit -p tsconfig.check.json","test:watch":"vitest","generate-types":"tsx bin/generate-types.ts","prepublishOnly":"npm run check && npm run build"},"_npmUser":{"name":"deathmaz","email":"deathmaz@pm.me"},"_npmVersion":"11.7.0","description":"Phosphor Icons for Vue 3 with per-weight components for optimal tree-shaking","directories":{},"sideEffects":false,"_nodeVersion":"22.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.21.0","vue":"^3.5.0","vite":"^6.0.0","oxlint":"^1.50.0","rimraf":"^5.0.1","vitest":"^4.0.18","happy-dom":"^20.7.0","typescript":"^5.7.0","@types/node":"^25.3.2","@vue/test-utils":"^2.4.6","@vitejs/plugin-vue":"^6.0.0","@phosphor-icons/core":"^2.1.1"},"peerDependencies":{"vue":">=3.2.39"},"_npmOperationalInternal":{"tmp":"tmp/phosphor-icons-vue-split_0.1.0_1772291773639_0.972453901802236","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@deathmaz/phosphor-icons-vue-split","version":"0.2.0","license":"MIT","_id":"@deathmaz/phosphor-icons-vue-split@0.2.0","maintainers":[{"name":"deathmaz","email":"deathmaz@pm.me"}],"dist":{"shasum":"fd032eb816abd0cd42f27a131e1218d8a6c1f0d8","tarball":"https://registry.npmjs.org/@deathmaz/phosphor-icons-vue-split/-/phosphor-icons-vue-split-0.2.0.tgz","fileCount":18149,"integrity":"sha512-xE5EIN4etFCW2isW9BSrzkGdWkCX2NOgsHaInoC0L5Tmwv7yqtN1dnM/lzFMKCI7za0sxCB1SOHebeTDfFzdNw==","signatures":[{"sig":"MEUCIBwDIo9ZCGlLj6pboQkpYqPPVGq2xLHrHdajVUDXBBA/AiEAqYrFcawb92+C7wm1jeuP2VGOJmiD+z7rtfN28e07reU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15690918},"main":"dist/index.mjs","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","default":"./dist/index.mjs"}},"gitHead":"7a691dec9b0b7c63ba6331681373aa771940acc8","scripts":{"lint":"oxlint","test":"vitest run","build":"rimraf dist && npm run assemble && vite build && npm run generate-types","check":"npm run typecheck && npm run lint && npm run test","assemble":"tsx bin/assemble.ts","typecheck":"tsc --noEmit -p tsconfig.check.json","test:watch":"vitest","generate-types":"tsx bin/generate-types.ts","prepublishOnly":"npm run check && npm run build"},"_npmUser":{"name":"deathmaz","email":"deathmaz@pm.me"},"_npmVersion":"11.7.0","description":"Phosphor Icons for Vue 3 with per-weight components for optimal tree-shaking","directories":{},"sideEffects":false,"_nodeVersion":"22.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.21.0","vue":"^3.5.0","vite":"^6.0.0","oxlint":"^1.50.0","rimraf":"^5.0.1","vitest":"^4.0.18","happy-dom":"^20.7.0","typescript":"^5.7.0","@types/node":"^25.3.2","@vue/test-utils":"^2.4.6","@vitejs/plugin-vue":"^6.0.0","@phosphor-icons/core":"^2.1.1"},"peerDependencies":{"vue":">=3.2.39"},"_npmOperationalInternal":{"tmp":"tmp/phosphor-icons-vue-split_0.2.0_1772307615436_0.5420890919662955","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@deathmaz/phosphor-icons-vue-split","publishConfig":{"access":"public"},"version":"0.2.1","description":"Phosphor Icons for Vue 3 with per-weight components for optimal tree-shaking","license":"MIT","sideEffects":false,"type":"module","types":"dist/index.d.ts","main":"dist/index.mjs","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","default":"./dist/index.mjs"}},"scripts":{"assemble":"tsx bin/assemble.ts","generate-types":"tsx bin/generate-types.ts","build":"rimraf dist && npm run assemble && vite build && npm run generate-types","lint":"oxlint","typecheck":"tsc --noEmit -p tsconfig.check.json","test":"vitest run","test:watch":"vitest","check":"npm run typecheck && npm run lint && npm run build && npm run test","prepublishOnly":"npm run check"},"peerDependencies":{"vue":">=3.2.39"},"devDependencies":{"@phosphor-icons/core":"^2.1.1","@types/node":"^25.5.2","@vitejs/plugin-vue":"^6.0.5","@vue/test-utils":"^2.4.6","happy-dom":"^20.8.9","oxlint":"^1.58.0","rimraf":"^6.1.3","tsx":"^4.21.0","typescript":"^6.0.2","vite":"^8.0.5","vitest":"^4.1.2","vue":"^3.5.32"},"gitHead":"5d7a1fa60b7eb36ba2841255ea5be062cd78e3d2","_id":"@deathmaz/phosphor-icons-vue-split@0.2.1","_nodeVersion":"22.22.1","_npmVersion":"11.11.1","dist":{"integrity":"sha512-fy+98P6e8YoZsHmdeTYUAQ9SKLRPtZmXKvL+3QgzC3aML0iY+J6W27RsoJkaMwxfkJAmsZOObICTLpm74vei/g==","shasum":"3782fe12f2eb29ebfd9865dbcd9619e6326e7d8f","tarball":"https://registry.npmjs.org/@deathmaz/phosphor-icons-vue-split/-/phosphor-icons-vue-split-0.2.1.tgz","fileCount":9077,"unpackedSize":14905063,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBWWh0vFKM7sqzniuTLC8vM76Xt4G+y5vNiHcpwixDCCAiEA+YxB11CTmgVzTmHH6is3BzT7u/Ib1imEDRBB4DjUInA="}]},"_npmUser":{"name":"deathmaz","email":"deathmaz@pm.me"},"directories":{},"maintainers":[{"name":"deathmaz","email":"deathmaz@pm.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/phosphor-icons-vue-split_0.2.1_1775736296706_0.9357149159991112"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-28T15:16:13.490Z","modified":"2026-04-09T12:04:57.211Z","0.1.0":"2026-02-28T15:16:13.952Z","0.2.0":"2026-02-28T19:40:15.771Z","0.2.1":"2026-04-09T12:04:57.112Z"},"license":"MIT","description":"Phosphor Icons for Vue 3 with per-weight components for optimal tree-shaking","maintainers":[{"name":"deathmaz","email":"deathmaz@pm.me"}],"readme":"# @deathmaz/phosphor-icons-vue-split\n\nPhosphor Icons for Vue 3 with **per-weight components** for optimal tree-shaking.\n\nThe 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.\n\n## Installation\n\n```bash\nnpm install @deathmaz/phosphor-icons-vue-split\n```\n\nRequires Vue 3.2.39 or later as a peer dependency.\n\n## Usage\n\n```vue\n<script lang=\"ts\" setup>\nimport {\n  PhHorseRegular,\n  PhHeartFill,\n  PhCubeDuotone,\n} from \"@deathmaz/phosphor-icons-vue-split\";\n</script>\n\n<template>\n  <PhHorseRegular />\n  <PhHeartFill :size=\"32\" color=\"hotpink\" />\n  <PhCubeDuotone :size=\"48\" color=\"#333\" />\n</template>\n```\n\nComponents follow the naming pattern `Ph[IconName][Weight]`, where weight is one of:\n\n| Weight     | Example             |\n| ---------- | ------------------- |\n| `Thin`     | `PhHeartThin`       |\n| `Light`    | `PhHeartLight`      |\n| `Regular`  | `PhHeartRegular`    |\n| `Bold`     | `PhHeartBold`       |\n| `Fill`     | `PhHeartFill`       |\n| `Duotone`  | `PhHeartDuotone`    |\n\nAll Phosphor icons are available across all 6 weights.\n\n## Props\n\nAll props are optional.\n\n| Prop       | Type               | Default          | Description                           |\n| ---------- | ------------------ | ---------------- | ------------------------------------- |\n| `size`     | `string \\| number` | `\"1em\"`          | Width and height of the SVG           |\n| `color`    | `string`           | `\"currentColor\"` | Fill color of the SVG                 |\n| `mirrored` | `boolean`          | —                | Horizontally flip the icon (for RTL)  |\n\n```vue\n<PhArrowRightBold :size=\"24\" color=\"red\" :mirrored=\"true\" />\n```\n\n## Context provider\n\nUse Vue's `provide` to set defaults for all icons in a subtree, avoiding repetitive props:\n\n```vue\n<script lang=\"ts\" setup>\nimport { provide } from \"vue\";\nimport { PhHouseRegular, PhGearRegular } from \"@deathmaz/phosphor-icons-vue-split\";\n\nprovide(\"size\", \"24px\");\nprovide(\"color\", \"#1a1a1a\");\nprovide(\"mirrored\", false);\n</script>\n\n<template>\n  <!-- Both icons inherit size=\"24px\" and color=\"#1a1a1a\" -->\n  <PhHouseRegular />\n  <PhGearRegular />\n</template>\n```\n\nProps on individual components override the injected context values.\n\n## Slots\n\nComponents accept a default slot for injecting arbitrary SVG elements (e.g., `<title>` for accessibility, `<animate>`, `<filter>`):\n\n```vue\n<PhHeartFill :size=\"32\" color=\"red\">\n  <title>Favorite</title>\n</PhHeartFill>\n```\n\n## Attrs passthrough\n\nAny additional attributes are forwarded to the root `<svg>` element via `v-bind=\"$attrs\"`:\n\n```vue\n<PhStarFill class=\"icon\" data-testid=\"star\" />\n```\n\n## TypeScript\n\nAll components are fully typed. A general `PhosphorIconComponent` type covers any icon, while weight-specific branded types let you constrain props to a single weight:\n\n```ts\nimport type {\n  PhosphorIconComponent,\n  PhosphorThinIcon,\n  PhosphorRegularIcon,\n  PhosphorFillIcon,\n} from \"@deathmaz/phosphor-icons-vue-split\";\n\n// Accept any icon\ndefineProps<{ icon: PhosphorIconComponent }>();\n\n// Accept only regular-weight icons\ndefineProps<{ icon: PhosphorRegularIcon }>();\n```\n\nAvailable weight types: `PhosphorThinIcon`, `PhosphorLightIcon`, `PhosphorRegularIcon`, `PhosphorBoldIcon`, `PhosphorFillIcon`, `PhosphorDuotoneIcon`.\n\n## Bundle size\n\nEach 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.\n\nThe library uses `sideEffects: false` and Vite's `preserveModules` output, so bundlers can tree-shake unused components at the module level.\n\n## Development\n\n### Prerequisites\n\n- Node.js >= 20\n- npm\n\n### Setup\n\n```bash\nnpm install\n```\n\n### Scripts\n\n| Script              | Description                                   |\n| ------------------- | --------------------------------------------- |\n| `npm run build`     | Full pipeline: generate components + Vite build + type definitions |\n| `npm run assemble`  | Generate Vue SFCs from `@phosphor-icons/core` SVGs |\n| `npm run test`      | Run tests with Vitest                         |\n| `npm run test:watch`| Run tests in watch mode                       |\n| `npm run lint`      | Lint with oxlint                              |\n| `npm run typecheck` | Type-check with TypeScript                    |\n| `npm run check`     | Run typecheck + lint + build + test            |\n\n### How it works\n\n1. **`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.\n\n2. **`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.\n\nGenerated files (`src/icons/`, `src/index.ts`, `dist/`) are gitignored — they are produced fresh from `@phosphor-icons/core` on each build.\n\n## License\n\nMIT — Icon designs by [Phosphor Icons](https://phosphoricons.com).\n","readmeFilename":"README.md"}