{"_id":"@dukaandost/icons","_rev":"5-10e259fe6180229a63a189d505e7dabe","name":"@dukaandost/icons","dist-tags":{"latest":"1.1.2"},"versions":{"1.0.0":{"name":"@dukaandost/icons","version":"1.0.0","_id":"@dukaandost/icons@1.0.0","maintainers":[{"name":"arknine","email":"info@dukaandost.com"}],"dist":{"shasum":"95020d12f04e26e83f8e739424203afff051984f","tarball":"https://registry.npmjs.org/@dukaandost/icons/-/icons-1.0.0.tgz","fileCount":24,"integrity":"sha512-wQP12q/kS0ZRV9kP8iAVXhBaUzGo7Lu0+Hmuw+D0luYLj46JxN7hBvvblExiwbolVFJHOqnUXK8twpgeRh7USA==","signatures":[{"sig":"MEUCICjDeJlhXrxLDTTObBMS3UuKnbqFcSvP1gXEL1JueeEBAiEAhudvPxpL+9lzZE3dFaffhSqiu71jLoDGxXMBUhLhkhw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16144},"main":"src/index.ts","types":"src/index.ts","gitHead":"6eb8cc883d65a8038464a539765732c65b618472","scripts":{"build":"echo 'Icons are consumed as source'"},"_npmUser":{"name":"arknine","email":"info@dukaandost.com"},"_npmVersion":"10.8.2","directories":{},"_nodeVersion":"18.20.8","dependencies":{"react":"^18.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icons_1.0.0_1776757729578_0.9509680548911432","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@dukaandost/icons","version":"1.0.1","_id":"@dukaandost/icons@1.0.1","maintainers":[{"name":"arknine","email":"info@dukaandost.com"}],"dist":{"shasum":"c74457a1ef9455ea9fc2eba8d366ca8739511305","tarball":"https://registry.npmjs.org/@dukaandost/icons/-/icons-1.0.1.tgz","fileCount":267,"integrity":"sha512-HMWHXLBaLbpZYHOAw3KvkPUvuBWOO3f0Cta8glARUg2O1oW3nXs02zvo5AGT5ufALL9v3EMEV/x2tLuyCXMBqQ==","signatures":[{"sig":"MEYCIQC0ThTbT21LuBh/VFYqp1yI1F0fc2FoWRGkNmA+KnFX4QIhAJEqEHpmkw2Rp4QoO2exDeRCn3tuaEtlVz5w8u9ndUc4","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3375148},"main":"src/index.ts","types":"src/index.ts","gitHead":"fcd28c9b4cd35fe3d7373d5f592e99fe5ad3ff6f","scripts":{"build":"echo 'Icons are consumed as source'"},"_npmUser":{"name":"arknine","email":"info@dukaandost.com"},"_npmVersion":"10.9.7","description":"234 design-system icons sourced from Figma, ready to use in React.","directories":{},"_nodeVersion":"22.22.2","dependencies":{"react":"^18.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/icons_1.0.1_1778424392236_0.5864528841179026","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@dukaandost/icons","version":"1.1.0","_id":"@dukaandost/icons@1.1.0","maintainers":[{"name":"arknine","email":"info@dukaandost.com"}],"dist":{"shasum":"3dab224ee9d67f43828c80ad12659222c9deb3fc","tarball":"https://registry.npmjs.org/@dukaandost/icons/-/icons-1.1.0.tgz","fileCount":408,"integrity":"sha512-vdPcD5dfjG0C2/kLzMP8EvR0aLPcm56N+JYaXJMgtzwaqyaYEdZABB/pHyHXhzp5+WqT9SJxfr8WQQ7F5BlH9w==","signatures":[{"sig":"MEYCIQDkmhy2dLkhF3kUCzXL8VNnlDQpJFrPvtnTAVLGd1EuSgIhANFfC0pyZiOxZoaYcnVaDRXKeludApzgIl6Rmn1cEAuC","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6714928},"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":"7d036f6b3359970c12307da8bd9be31794adf5df","scripts":{"build":"tsc --noEmit && vite build"},"_npmUser":{"name":"arknine","email":"info@dukaandost.com"},"_npmVersion":"10.9.7","description":"234 design-system icons sourced from Figma, ready to use in React.","directories":{},"_nodeVersion":"22.22.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","react":"^18.2.0","typescript":"^5.4.0","@types/react":"^18.2.0","vite-plugin-dts":"^3.9.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/icons_1.1.0_1778447025934_0.9710067136145475","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@dukaandost/icons","version":"1.1.1","_id":"@dukaandost/icons@1.1.1","maintainers":[{"name":"arknine","email":"info@dukaandost.com"}],"dist":{"shasum":"2465a9a7a3b34aad973db5eb4a72197783e86b60","tarball":"https://registry.npmjs.org/@dukaandost/icons/-/icons-1.1.1.tgz","fileCount":450,"integrity":"sha512-aVGBHAtfywyzAU+vfOZeSoW+4B03xhLlPoXG7fLuqakzECdZ/vBEAQ4Ch1AbuC5H1BxEvdadMCA3/2WVcS8xbA==","signatures":[{"sig":"MEQCIDZZXT8BX06D44Z15cKi0BULQmVUt9SDHIPXzfn11nzDAiB2skFfClGLMMy/AUqh5Iv0103od7O/e0e75dmu3D5lAw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6750293},"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":"cace913eae987f719c7d4fb65784afc7e9271710","scripts":{"build":"tsc --noEmit && vite build"},"_npmUser":{"name":"arknine","email":"info@dukaandost.com"},"_npmVersion":"10.9.7","description":"234 design-system icons sourced from Figma, ready to use in React.","directories":{},"_nodeVersion":"22.22.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","react":"^18.2.0","typescript":"^5.4.0","@types/react":"^18.2.0","vite-plugin-dts":"^3.9.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/icons_1.1.1_1780051835600_0.9625136641422103","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@dukaandost/icons","version":"1.1.2","type":"module","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"public"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"build":"tsc --noEmit && vite build"},"peerDependencies":{"react":"^18.2.0"},"devDependencies":{"@types/react":"^18.2.0","@vitejs/plugin-react":"^4.2.0","react":"^18.2.0","typescript":"^5.4.0","vite":"^5.4.0","vite-plugin-dts":"^3.9.0"},"_id":"@dukaandost/icons@1.1.2","gitHead":"a2e199331ceea16833d738288c876adbcbf1aa3e","description":"234 design-system icons sourced from Figma, ready to use in React.","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-JmQbCg54ZDyhLA4Z/Qqol/aNp6hIdwWTGQ1RMo7KR9ui1hHZcFSuYGSkrzxiLesQTVmXsd+qAshcWGTbpG+4Bw==","shasum":"9bcf19efe5a80e968c47556ec6206cfd1bf26382","tarball":"https://registry.npmjs.org/@dukaandost/icons/-/icons-1.1.2.tgz","fileCount":450,"unpackedSize":6753824,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDxLU9KFwcUUOhwA7cmXNgjByqNir69oRHEXFAcYRh9WwIgTNed4XWBbW7jH32uZ7ywAbXdcPvZil8w7RcY6fl4c9E="}]},"_npmUser":{"name":"arknine","email":"info@dukaandost.com"},"directories":{},"maintainers":[{"name":"arknine","email":"info@dukaandost.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/icons_1.1.2_1780314784079_0.7072333769913868"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-21T07:48:49.460Z","modified":"2026-06-01T11:53:04.475Z","1.0.0":"2026-04-21T07:48:49.733Z","1.0.1":"2026-05-10T14:46:32.525Z","1.1.0":"2026-05-10T21:03:46.288Z","1.1.1":"2026-05-29T10:50:35.913Z","1.1.2":"2026-06-01T11:53:04.353Z"},"description":"234 design-system icons sourced from Figma, ready to use in React.","maintainers":[{"name":"arknine","email":"info@dukaandost.com"}],"readme":"# @dukaandost/icons\n\n234 design-system icons sourced from Figma, ready to use in React.\n\n- All shapes, viewBoxes, and stroke widths are kept identical to the Figma source.\n- Color flows via CSS `color` (i.e. `currentColor`) — every icon respects the surrounding text color by default and accepts an explicit `color` prop.\n- Size is set with the `size` prop (`xs` / `sm` / `md` / `lg`) or any number of pixels.\n- Tree-shakeable: each icon is also exported as its own `React.FC` so unused icons get dropped from production bundles.\n\n---\n\n## Quick start\n\n```tsx\nimport { Icon } from '@dukaandost/icons';\n\n<Icon name=\"chevron-down\" />              // 24px, currentColor\n<Icon name=\"home\" size=\"md\" />            // 18px\n<Icon name=\"heart-filled\" color=\"#ef4444\" />\n<Icon name=\"search\" size={32} />\n<Icon name=\"alert\" label=\"Warning: stock low\" />  // accessible\n```\n\nOr import an icon component directly:\n\n```tsx\nimport { Plus, ChevronDown, Calendar } from '@dukaandost/icons';\n\n<Plus width={20} height={20} />\n```\n\n---\n\n## Browsing & searching the icons\n\nThere are three ways to find the icon you want.\n\n### 1. Visual gallery (recommended) — Storybook\n\n```bash\nnpm run storybook\n```\n\nThen navigate to **Atoms → Icon → Gallery (search)**. The gallery lets you:\n\n- Type any substring (e.g. `chevron`, `money`, `cart`) — the grid filters live.\n- Click a category chip (Arrows & Chevrons, Status, Money, People, Commerce, Actions, Layout, Communication, Time, Misc) to narrow further.\n- Click any icon tile to copy its registry key to the clipboard.\n- Adjust size & color via the Storybook controls panel.\n\nThe gallery is implemented at `packages/@dukaandost/ui/src/atoms/Icon/IconGallery.tsx`.\n\n### 2. From code\n\n```ts\nimport { ICON_NAMES, type IconName } from '@dukaandost/icons';\n\nconsole.log(ICON_NAMES.length);           // 234\nICON_NAMES.filter((n) => n.startsWith('chevron'));\n//=> ['chevron-down', 'chevron-down-m', ..., 'chevron-up-s']\n```\n\n`ICON_NAMES` is a sorted, frozen list of every registered key. Useful for building your own pickers, command-palette entries, etc.\n\n### 3. Editor autocomplete\n\n`<Icon name=\"…\" />` types `name` as the `IconName` union. Your editor will autocomplete all 234 keys.\n\n---\n\n## Icon shape categories\n\n| Category | Count | Notes |\n|---|---|---|\n| Single-layer SVG | ~145 | Stroke or fill; uses `currentColor` directly. |\n| Multi-layer composite | 20 | E.g. `info-circle`, `copy`, `upload`, `attendance`, `table-icon`. Rendered as a `<span>` with absolutely-positioned inline SVGs that match the original Figma `inset` percentages — scales correctly with `width` / `height`. |\n| CSS-only | 3 | `resize2-s`, `resize2-m`, `complexity` — bordered/grid `<span>`s using `currentColor`. |\n| Text glyphs | 12 | `one`, `two`, `three`, `one-filled`, `time-am`, `gsm`, `usd`, `percent`, etc. — typeset as styled `<span>`s. |\n| Raster stubs | 6 | `flag`, `points`, `fabric-image`, `level`, `badges`, `avatar` — Figma sources are 1024×1024 bitmaps and can't be themed. Currently rendered as transparent placeholders with a `console.warn`; replace with proper image assets if you need them. |\n| Legacy | ~22 | `spinner`, `warning`, `info`, `success`, `transfer`, `double-chevron-*` — kept from the pre-Figma set because they have no Figma equivalent. |\n\n---\n\n## API reference\n\n```ts\ninterface IconProps extends React.SVGProps<SVGSVGElement> {\n  name: IconName;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | number;  // default: 'lg' (24px)\n  color?: string;                              // default: inherit\n  strokeWidth?: 1 | 1.5 | 2 | 2.5;             // forwarded; only meaningful for stroked SVG icons\n  filled?: boolean;                            // legacy / no-op for Figma icons\n  label?: string;                              // sets aria-label; otherwise icon is aria-hidden\n}\n```\n\n### Sizing\n\nThe `size` prop maps to a pixel value:\n\n| Token | Pixels |\n|---|---|\n| `xs` | 12 |\n| `sm` | 14 |\n| `md` | 18 |\n| `lg` | 24 *(default)* |\n| `<number>` | exact |\n\nThe wrapper sets both `width` and `height`; the underlying SVG `viewBox` is preserved, so the icon scales without distortion.\n\n### Color\n\nPass `color=\"…\"` and the wrapper applies `style.color`, which propagates through `currentColor` to every stroke and fill inside the icon — both for legacy icons and for Figma multi-layer composites. To recolor an entire region of UI at once, just set `color` on a parent.\n\n### Accessibility\n\n```tsx\n<Icon name=\"alert\" label=\"Warning: payment failed\" />   // role=\"img\" + aria-label\n<Icon name=\"chevron-down\" />                            // aria-hidden (decorative)\n```\n\n---\n\n## Adding a new icon\n\n1. Drop the SVG file at `packages/@dukaandost/icons/src/icons/<PascalName>.tsx` following this template:\n\n   ```tsx\n   import React from 'react';\n\n   export const PascalName: React.FC<React.SVGProps<SVGSVGElement>> = ({\n     width = 24,\n     height = 24,\n     ...props\n   }) => (\n     <svg\n       xmlns=\"http://www.w3.org/2000/svg\"\n       width={width}\n       height={height}\n       viewBox=\"<original viewBox>\"\n       fill=\"none\"\n       {...props}\n     >\n       <path d=\"…\" stroke=\"currentColor\" /* or fill=\"currentColor\" */ />\n     </svg>\n   );\n   ```\n\n   - Use `currentColor` everywhere a stroke/fill is set so theming works.\n   - Keep the original `viewBox` unmodified so shape stays exact.\n\n2. Register it in `Icon.tsx`:\n   - Add `import { PascalName } from './icons/PascalName';` near the top.\n   - Add `'pascal-name'` to the `IconName` union.\n   - Add `'pascal-name': PascalName as unknown as React.FC<React.SVGProps<SVGSVGElement>>,` to `iconMap`.\n\n3. Re-export from `index.ts`:\n   - `export { PascalName } from './icons/PascalName';`\n\n4. The Storybook gallery is data-driven from `ICON_NAMES`, so the new icon appears automatically — no story changes needed.\n\n### Bulk import from Figma\n\nThe pipeline used to seed the library lives in `.figma-icons-tmp/`:\n\n| Script | What it does |\n|---|---|\n| `convert-svg-to-tsx.mjs` | Single SVG → TSX. Preserves `viewBox`, replaces `var(--stroke-N, …)` / `var(--fill-N, …)` with `currentColor`, converts kebab-case SVG attrs to camelCase JSX attrs. |\n| `compose-multilayer.mjs` | Reads multi-layer entries from `all-icons.json` and emits a `<span>`-with-positioned-inline-SVGs composite per icon. |\n| `fetch-and-build.mjs` | Parallel downloader + batch converter for single-layer icons. Also writes `integration-snippets.txt` containing the `Icon.tsx` + `index.ts` patches. |\n| `icon-manifest.json` | Master Figma node-ID ↔ component-name map (205 entries). |\n| `all-icons.json` | URL + positioning data per icon, captured during the seeding run. |\n\nTo pull more icons from Figma later, see the comments at the top of each script.\n\n---\n\n## Performance notes\n\n- All icons use `React.FC<SVGProps>` and have no internal state, so they're cheap to render.\n- For server-rendered HTML, prefer `<Icon name=\"…\" />` since each call resolves to a single SVG/SPAN element with no runtime decoration.\n- If you import the package via `import { Plus } from '@dukaandost/icons'` instead of `<Icon name=\"plus\" />`, only that one icon ships in the bundle (the registry-style `<Icon>` component pulls every icon).\n","readmeFilename":"README.md"}