{"_id":"@aiqbalsyah/sygnaal-icon-pack","_rev":"2-87ddf452502156646cb85bfe518f722d","name":"@aiqbalsyah/sygnaal-icon-pack","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@aiqbalsyah/sygnaal-icon-pack","version":"0.1.0","keywords":["react","icons","icon-pack","svg","typescript","sygnaal"],"author":{"name":"Iqbal","email":"iqbal@cerbrec.com"},"license":"MIT","_id":"@aiqbalsyah/sygnaal-icon-pack@0.1.0","maintainers":[{"name":"aiqbalsyah","email":"aiqbalsyah@gmail.com"}],"dist":{"shasum":"d49e0cfdd240cd3a8a6ca139c27bcbe828a001ab","tarball":"https://registry.npmjs.org/@aiqbalsyah/sygnaal-icon-pack/-/sygnaal-icon-pack-0.1.0.tgz","fileCount":7,"integrity":"sha512-t2QNftk+yYM1B19C9rKSffcyNWpIAU0nzC6Uz1tLs0BsdJ2VXhEhF0tH84DZXXxA8uZ9uyocMFkeH0lV46Uw7w==","signatures":[{"sig":"MEUCIAJvLxNIO3vKJX+j7FeMP4mYINsNaMfDasT+Ya2jaAP9AiEA5WsSf7z9suQuC1YXhdP2JGKa9DuxQ743AC7Etqbt7mE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3850284},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"ec94c96137f303fe531ef00ee74d967137c107d3","scripts":{"build":"npm run build:icons && tsup","clean":"rm -rf dist src/icons src/registry.ts","typecheck":"tsc --noEmit","build:icons":"node scripts/build-icons.mjs"},"_npmUser":{"name":"aiqbalsyah","email":"aiqbalsyah@gmail.com"},"_npmVersion":"11.6.2","description":"Typed React icon pack for the Sygnaal app — strongly-typed names with inline JSDoc previews.","directories":{},"sideEffects":false,"_nodeVersion":"25.2.1","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"svgo":"^3.3.0","tsup":"^8.3.0","react":"^18.3.0","sharp":"^0.34.5","@svgr/core":"^8.1.0","typescript":"^5.6.0","@types/react":"^18.3.0","@svgr/plugin-jsx":"^8.1.0","@svgr/plugin-svgo":"^8.1.0"},"peerDependencies":{"react":">=17"},"_npmOperationalInternal":{"tmp":"tmp/sygnaal-icon-pack_0.1.0_1777280361109_0.9421693333599757","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@aiqbalsyah/sygnaal-icon-pack","version":"0.1.1","description":"Typed React icon pack for the Sygnaal app — strongly-typed names with inline JSDoc previews.","license":"MIT","author":{"name":"Iqbal","email":"iqbal@cerbrec.com"},"keywords":["react","icons","icon-pack","svg","typescript","sygnaal"],"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"sideEffects":false,"scripts":{"build:icons":"node scripts/build-icons.mjs","build":"npm run build:icons && tsup","typecheck":"tsc --noEmit","clean":"rm -rf dist src/icons src/registry.ts"},"peerDependencies":{"react":">=17"},"devDependencies":{"@svgr/core":"^8.1.0","@svgr/plugin-jsx":"^8.1.0","@svgr/plugin-svgo":"^8.1.0","@types/react":"^18.3.0","react":"^18.3.0","sharp":"^0.34.5","svgo":"^3.3.0","tsup":"^8.3.0","typescript":"^5.6.0"},"gitHead":"41f68fafbb0b232928fbc15aaab867c203863493","_id":"@aiqbalsyah/sygnaal-icon-pack@0.1.1","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-byTVCDpxZJf1BvDL7SoWp7O8uQE9NY5r/BNVGa48ImcpoX164OkwSpFIGS8o44NaYZO/XYth25XFVsF8PqOqTQ==","shasum":"05bbc3cbf9f9b4a15138f18350a508551aa25960","tarball":"https://registry.npmjs.org/@aiqbalsyah/sygnaal-icon-pack/-/sygnaal-icon-pack-0.1.1.tgz","fileCount":7,"unpackedSize":3846886,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBEwj5H7mPd/3Cqzp/L6G8Fz/398EiHXuvENL9FK5BAyAiEAmIIJAqdYrMDcrvkH5LoCrYY6p3TgUteiHZhMLeY/fWU="}]},"_npmUser":{"name":"aiqbalsyah","email":"aiqbalsyah@gmail.com"},"directories":{},"maintainers":[{"name":"aiqbalsyah","email":"aiqbalsyah@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sygnaal-icon-pack_0.1.1_1777391097814_0.5353164499613019"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-27T08:59:21.025Z","modified":"2026-04-28T15:44:58.167Z","0.1.0":"2026-04-27T08:59:21.347Z","0.1.1":"2026-04-28T15:44:58.065Z"},"author":{"name":"Iqbal","email":"iqbal@cerbrec.com"},"license":"MIT","keywords":["react","icons","icon-pack","svg","typescript","sygnaal"],"description":"Typed React icon pack for the Sygnaal app — strongly-typed names with inline JSDoc previews.","maintainers":[{"name":"aiqbalsyah","email":"aiqbalsyah@gmail.com"}],"readme":"# @aiqbalsyah/sygnaal-icon-pack\n\nStrongly-typed React icon pack for the Sygnaal app.\n\n```tsx\nimport { SygnaalIcon } from '@aiqbalsyah/sygnaal-icon-pack';\n\n<SygnaalIcon name=\"AED\" size={24} className=\"text-red-500\" />\n```\n\nThe `name` prop is a union of every available icon, and each value carries a\nJSDoc preview — hover or autocomplete in VS Code / Cursor / JetBrains and the\nactual icon renders inline in the tooltip.\n\n`className`, `style`, event handlers, and any other SVG attribute are forwarded\nstraight through to the underlying `<svg>`. `ref` is also supported.\n\n## Adding or updating an icon\n\n1. **Drop the SVG into `icons/`** following the naming convention:\n\n   ```\n   Icon_<Name>.svg\n   ```\n\n   - Words can be separated by spaces, underscores, or hyphens — the codegen\n     PascalCases them. Examples:\n     - `Icon_AED.svg` → `AED`\n     - `Icon_Pie Chart.svg` → `PieChart`\n     - `Icon_Baggage Carry On.svg` → `BaggageCarryOn`\n   - To **update** an existing icon, replace the file in `icons/` (keep the same\n     filename so the public name `<SygnaalIcon name=\"...\" />` is unchanged).\n   - To **rename** an icon, rename the file — the type union changes accordingly,\n     so all consumer call sites become type errors until they're updated.\n   - To **remove** an icon, delete the file.\n\n2. **Regenerate** the typed components and registry:\n\n   ```bash\n   npm run build:icons\n   ```\n\n   This rewrites `src/icons/` and `src/registry.ts` from scratch. Both are\n   committed so the package works without re-running codegen.\n\n3. **Type-check** to catch any consumer call sites that need updating:\n\n   ```bash\n   npm run typecheck\n   ```\n\n4. **Build** the publishable bundle:\n\n   ```bash\n   npm run build\n   ```\n\n   `npm run build` runs `build:icons` first, so step 2 is optional if you go\n   straight to building.\n\n> **Note:** never edit files in `src/icons/` or `src/registry.ts` by hand —\n> they're overwritten on every codegen run. The source of truth is `icons/`.\n\n## How it works\n\n1. Source SVGs live in `icons/`.\n2. `scripts/build-icons.mjs` reads each file and emits:\n   - `src/icons/<Name>.tsx` — typed React component (via SVGR + SVGO)\n   - `src/icons/index.ts` — barrel export\n   - `src/registry.ts` — `{ name → component }` map. Each entry has a JSDoc\n     preview generated by rasterizing the SVG to a 64×64 PNG so the tooltip\n     stays light even when the source SVG is multi-MB.\n3. `tsup` bundles `src/index.ts` to `dist/` (ESM + CJS + `.d.ts`).\n\n## Tree-shaking\n\n`<SygnaalIcon name=\"...\" />` references the registry, which imports every icon —\nso using it pulls all icons into the bundle. For builds where size matters,\nimport the individual component instead:\n\n```tsx\nimport { Icons } from '@aiqbalsyah/sygnaal-icon-pack';\n<Icons.AED width={24} />\n```\n\n`sideEffects: false` is set, so unused per-icon imports are dropped.\n\n## Bundle size note\n\nSeveral source SVGs are multi-MB because they embed raster images. SVGO can't\noptimize embedded bitmaps — if bundle weight matters, redraw those icons as\npure vector paths or run them through [SVGOMG](https://jakearchibald.github.io/svgomg/)\nwith the embedded images extracted.\n\n## Scripts\n\n| Command | What it does |\n| --- | --- |\n| `npm run build:icons` | Regenerate `src/icons/` + `src/registry.ts` from `icons/` |\n| `npm run build`       | `build:icons`, then bundle to `dist/` |\n| `npm run typecheck`   | `tsc --noEmit` |\n| `npm run clean`       | Remove `dist/`, `src/icons/`, `src/registry.ts` |\n","readmeFilename":"README.md"}