{"_id":"@elunarlabs/icon-kit","_rev":"4-7487a047b056f179853d0c64201ce88e","name":"@elunarlabs/icon-kit","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@elunarlabs/icon-kit","version":"0.1.0","keywords":["elunar","icons","lucide","fontawesome","framer-motion","react","ui","icon-component"],"author":"","license":"MIT","_id":"@elunarlabs/icon-kit@0.1.0","maintainers":[{"name":"21milex","email":"twentyonecreativedesign@gmail.com"}],"homepage":"https://github.com/elunarlabs/icon-kit#readme","bugs":{"url":"https://github.com/elunarlabs/icon-kit/issues"},"dist":{"shasum":"a8b23fd724a047f5a3743b3a7cecfb5d842f15e1","tarball":"https://registry.npmjs.org/@elunarlabs/icon-kit/-/icon-kit-0.1.0.tgz","fileCount":11,"integrity":"sha512-x45m11D18rBnsZ0MjaHNtiUV0Kony2ZHt6EUqt5wc1JJsKLiQ+Su7dBAYeJ4LksakgEWmpds+VQryObGuVlpLA==","signatures":[{"sig":"MEYCIQCA/CdmT++nRWS6SBn0skgupTDZmcNue7uXX5V+dcsz/gIhAPD+PF5xleQ6JyoFyt+E5Se8tltyBS+tkQVNCbX5q5qC","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":109990},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./icon.css":{"default":"./dist/index.css"}},"gitHead":"98b82a771b07b6d4dd6302612ee759f4fb54991e","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\"","test":"vitest run","build":"tsup","check":"npm run lint && npm run typecheck && npm test","clean":"rimraf dist","format":"prettier --write .","prepare":"npm run build","storybook":"storybook dev -p 6006","typecheck":"tsc --noEmit","test:watch":"vitest","prepublishOnly":"npm run clean && npm run check && npm run build && npm pack --dry-run","build:storybook":"storybook build"},"_npmUser":{"name":"21milex","email":"twentyonecreativedesign@gmail.com"},"overrides":{},"storybook":{"previewHead":"<style>body{font-family:system-ui,sans-serif;}</style>"},"repository":{"url":"git+https://github.com/elunarlabs/icon-kit.git","type":"git"},"_npmVersion":"10.9.2","description":"Elunar Icon Kit: Unified Icon component (Lucide core + Lucide Lab + Font Awesome Brands) with circle variants & Framer Motion animations.","directories":{},"sideEffects":["./dist/index.css"],"_nodeVersion":"22.17.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^24.0.0","eslint":"^9.9.0","rimraf":"^5.0.5","vitest":"^1.5.3","prettier":"^3.3.3","storybook":"9.1.8","@eslint/js":"^9.9.0","typescript":"^5.6.3","@types/node":"^20.11.30","@types/react":"^18.3.3","@eslint/eslintrc":"^3.3.1","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.1","eslint-plugin-react":"^7.34.3","@storybook/addon-a11y":"9.1.8","@storybook/addon-docs":"9.1.8","@storybook/react-vite":"9.1.8","@testing-library/react":"^14.2.1","eslint-config-prettier":"^9.1.0","eslint-plugin-storybook":"9.1.8","@testing-library/jest-dom":"^6.4.2","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.7"},"peerDependencies":{"react":">=18","react-dom":">=18","@lucide/lab":">=0.1.2","lucide-react":">=0.544.0","framer-motion":">=11","@fortawesome/react-fontawesome":">=0.2.2","@fortawesome/free-brands-svg-icons":">=6.6.0"},"peerDependenciesMeta":{"@lucide/lab":{"optional":true},"@fortawesome/react-fontawesome":{"optional":true},"@fortawesome/free-brands-svg-icons":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/icon-kit_0.1.0_1759156868306_0.9825206622423834","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@elunarlabs/icon-kit","version":"0.1.1","keywords":["elunar","icons","lucide","fontawesome","framer-motion","react","ui","icon-component"],"author":"","license":"MIT","_id":"@elunarlabs/icon-kit@0.1.1","maintainers":[{"name":"21milex","email":"twentyonecreativedesign@gmail.com"}],"homepage":"https://github.com/elunarlabs/icon-kit#readme","bugs":{"url":"https://github.com/elunarlabs/icon-kit/issues"},"dist":{"shasum":"6f923c3ae7b4928dba59d8cfed0502ad8d5721e0","tarball":"https://registry.npmjs.org/@elunarlabs/icon-kit/-/icon-kit-0.1.1.tgz","fileCount":11,"integrity":"sha512-tDoNxgr2IwF8nMk7efsgi6XLSb0vqXVQ2+bUdot3PaJDmZslxzv+7GHKU+ZEKGGt87WHYQLztTE6/uxBAG14OQ==","signatures":[{"sig":"MEUCIEj/bqQc1NL4wsIWhtKT1W2A8ZfP4rMkzo6gOvICa6e3AiEAnECZbpVIM3uHhcwcKj5bCNzD9qkhkijcjE1K2hNnf2A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":115415},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./icon.css":{"default":"./dist/index.css"}},"gitHead":"a1be6f0f65827d371b9ca9f21f4e7eebf78968fb","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\"","test":"vitest run","build":"tsup","check":"npm run lint && npm run typecheck && npm test","clean":"rimraf dist","format":"prettier --write .","prepare":"npm run build","storybook":"storybook dev -p 6006","typecheck":"tsc --noEmit","test:watch":"vitest","prepublishOnly":"npm run clean && npm run check && npm run build && npm pack --dry-run","build:storybook":"storybook build"},"_npmUser":{"name":"21milex","email":"twentyonecreativedesign@gmail.com"},"overrides":{},"storybook":{"previewHead":"<style>body{font-family:system-ui,sans-serif;}</style>"},"repository":{"url":"git+https://github.com/elunarlabs/icon-kit.git","type":"git"},"_npmVersion":"10.9.2","description":"Elunar Icon Kit: Unified Icon component (Lucide core + Lucide Lab + Font Awesome Brands) with circle variants & Framer Motion animations.","directories":{},"sideEffects":["./dist/index.css"],"_nodeVersion":"22.17.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^24.0.0","eslint":"^9.9.0","rimraf":"^5.0.5","vitest":"^1.5.3","prettier":"^3.3.3","storybook":"9.1.8","@eslint/js":"^9.9.0","typescript":"^5.6.3","@types/node":"^20.11.30","@types/react":"^18.3.3","@eslint/eslintrc":"^3.3.1","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.1","eslint-plugin-react":"^7.34.3","@storybook/addon-a11y":"9.1.8","@storybook/addon-docs":"9.1.8","@storybook/react-vite":"9.1.8","@testing-library/react":"^14.2.1","eslint-config-prettier":"^9.1.0","eslint-plugin-storybook":"9.1.8","@testing-library/jest-dom":"^6.4.2","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.7","@fortawesome/react-fontawesome":"^3.0.2","@fortawesome/free-brands-svg-icons":"^7.0.1"},"peerDependencies":{"react":">=18","react-dom":">=18","@lucide/lab":">=0.1.2","lucide-react":">=0.544.0","framer-motion":">=11","@fortawesome/react-fontawesome":">=0.2.2","@fortawesome/free-brands-svg-icons":">=6.6.0"},"peerDependenciesMeta":{"@lucide/lab":{"optional":true},"@fortawesome/react-fontawesome":{"optional":true},"@fortawesome/free-brands-svg-icons":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/icon-kit_0.1.1_1759157992593_0.0643525392137303","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@elunarlabs/icon-kit","version":"0.1.2","keywords":["elunar","icons","lucide","fontawesome","framer-motion","react","ui","icon-component"],"author":"","license":"MIT","_id":"@elunarlabs/icon-kit@0.1.2","maintainers":[{"name":"21milex","email":"twentyonecreativedesign@gmail.com"}],"homepage":"https://github.com/elunarlabs/icon-kit#readme","bugs":{"url":"https://github.com/elunarlabs/icon-kit/issues"},"dist":{"shasum":"c38715e0891cb655c50bc612eb903a6d0300b7e8","tarball":"https://registry.npmjs.org/@elunarlabs/icon-kit/-/icon-kit-0.1.2.tgz","fileCount":11,"integrity":"sha512-64mWFkn7TF2dtbOdps1tm9Gge/nqcc8lNoN3oJ7tN5m+fO++bFuagaHw+84GUqCU+G9p2D9+VrlOQogg9iHjFw==","signatures":[{"sig":"MEUCIQDurzN1Wpt3hiFBT+1As5mgCdGAlufhDKBw6ciIb16mTAIgYCcdb2yoogbqSdQry/Hq1YV1OuFpo11wz+9UyXh4H00=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":115671},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./icon.css":{"default":"./dist/index.css"}},"gitHead":"ee61b8b0e36a12ba4a43afcc3178fadcb9e59f98","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\"","test":"vitest run","build":"tsup","check":"npm run lint && npm run typecheck && npm test","clean":"rimraf dist","format":"prettier --write .","prepare":"npm run build","storybook":"storybook dev -p 6006","typecheck":"tsc --noEmit","test:watch":"vitest","prepublishOnly":"npm run clean && npm run check && npm run build && npm pack --dry-run","build:storybook":"storybook build"},"_npmUser":{"name":"21milex","email":"twentyonecreativedesign@gmail.com"},"overrides":{},"storybook":{"previewHead":"<style>body{font-family:system-ui,sans-serif;}</style>"},"repository":{"url":"git+https://github.com/elunarlabs/icon-kit.git","type":"git"},"_npmVersion":"10.9.2","description":"Elunar Icon Kit: Unified Icon component (Lucide core + Lucide Lab + Font Awesome Brands) with circle variants & Framer Motion animations.","directories":{},"sideEffects":["./dist/index.css"],"_nodeVersion":"22.17.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^24.0.0","eslint":"^9.9.0","rimraf":"^5.0.5","vitest":"^1.5.3","prettier":"^3.3.3","storybook":"9.1.8","@eslint/js":"^9.9.0","typescript":"^5.6.3","@types/node":"^20.11.30","@types/react":"^18.3.3","@eslint/eslintrc":"^3.3.1","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.1","eslint-plugin-react":"^7.34.3","@storybook/addon-a11y":"9.1.8","@storybook/addon-docs":"9.1.8","@storybook/react-vite":"9.1.8","@testing-library/react":"^14.2.1","eslint-config-prettier":"^9.1.0","eslint-plugin-storybook":"9.1.8","@testing-library/jest-dom":"^6.4.2","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.7","@fortawesome/react-fontawesome":"^3.0.2","@fortawesome/free-brands-svg-icons":"^7.0.1"},"peerDependencies":{"react":">=18","react-dom":">=18","@lucide/lab":">=0.1.2","lucide-react":">=0.544.0","framer-motion":">=11","@fortawesome/react-fontawesome":">=0.2.2","@fortawesome/free-brands-svg-icons":">=6.6.0"},"peerDependenciesMeta":{"@lucide/lab":{"optional":true},"@fortawesome/react-fontawesome":{"optional":true},"@fortawesome/free-brands-svg-icons":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/icon-kit_0.1.2_1759164460766_0.11722116668505045","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@elunarlabs/icon-kit","version":"0.1.3","description":"Elunar Icon Kit: Unified Icon component (Lucide core + Lucide Lab + Font Awesome Brands) with circle variants & Framer Motion animations.","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"},"./icon.css":{"default":"./dist/index.css"}},"sideEffects":["./dist/index.css"],"scripts":{"build":"tsup","clean":"rimraf dist","check":"npm run lint && npm run typecheck && npm test","prepublishOnly":"npm run clean && npm run check && npm run build && npm pack --dry-run","prepare":"npm run build","test":"vitest run","test:watch":"vitest","typecheck":"tsc --noEmit","lint":"eslint \"src/**/*.{ts,tsx}\"","format":"prettier --write .","storybook":"storybook dev -p 6006","build:storybook":"storybook build"},"peerDependencies":{"@fortawesome/free-brands-svg-icons":">=6.6.0","@fortawesome/react-fontawesome":">=0.2.2","@lucide/lab":">=0.1.2","framer-motion":">=11","lucide-react":">=0.544.0","react":">=18","react-dom":">=18"},"peerDependenciesMeta":{"@lucide/lab":{"optional":true},"@fortawesome/react-fontawesome":{"optional":true},"@fortawesome/free-brands-svg-icons":{"optional":true}},"devDependencies":{"@eslint/eslintrc":"^3.3.1","@eslint/js":"^9.9.0","@fortawesome/free-brands-svg-icons":"^7.0.1","@fortawesome/react-fontawesome":"^3.0.2","@storybook/addon-a11y":"9.1.8","@storybook/addon-docs":"9.1.8","@storybook/react-vite":"9.1.8","@testing-library/jest-dom":"^6.4.2","@testing-library/react":"^14.2.1","@types/node":"^20.11.30","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","eslint":"^9.9.0","eslint-config-prettier":"^9.1.0","eslint-plugin-react":"^7.34.3","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.7","eslint-plugin-storybook":"9.1.8","jsdom":"^24.0.0","prettier":"^3.3.3","rimraf":"^5.0.5","storybook":"9.1.8","tsup":"^8.0.0","typescript":"^5.6.3","typescript-eslint":"^8.0.1","vitest":"^1.5.3"},"overrides":{},"storybook":{"previewHead":"<style>body{font-family:system-ui,sans-serif;}</style>"},"repository":{"type":"git","url":"git+https://github.com/elunarlabs/icon-kit.git"},"bugs":{"url":"https://github.com/elunarlabs/icon-kit/issues"},"homepage":"https://github.com/elunarlabs/icon-kit#readme","keywords":["elunar","icons","lucide","fontawesome","framer-motion","react","ui","icon-component"],"author":"","license":"MIT","engines":{"node":">=18"},"publishConfig":{"access":"public"},"_id":"@elunarlabs/icon-kit@0.1.3","gitHead":"3ebf1c6d17e65feed596d0d5356f02dc32feea7c","_nodeVersion":"22.17.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-hMJvGAIa73AxrAUNMAlndeGAYC2YchyywduPS5mJEITAoRUjpsUH2nPXJ/qqxxYsexRS+VW7gUFG1+XYH3uaTg==","shasum":"216241c2035b0a9b1dc8544c2154ad842d311036","tarball":"https://registry.npmjs.org/@elunarlabs/icon-kit/-/icon-kit-0.1.3.tgz","fileCount":11,"unpackedSize":115722,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDxseM7QhNDdcQSst0zb4lv5uA51lTx6StsewG+jG0hyAIgesafzmIgDfKXzQZ4uF8aQz0l14+VZI6yD7nW1S9k6Sg="}]},"_npmUser":{"name":"21milex","email":"twentyonecreativedesign@gmail.com"},"directories":{},"maintainers":[{"name":"21milex","email":"twentyonecreativedesign@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/icon-kit_0.1.3_1759165048494_0.5300251554015316"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-29T14:41:08.150Z","modified":"2025-09-29T16:57:28.901Z","0.1.0":"2025-09-29T14:41:08.504Z","0.1.1":"2025-09-29T14:59:52.788Z","0.1.2":"2025-09-29T16:47:41.030Z","0.1.3":"2025-09-29T16:57:28.693Z"},"bugs":{"url":"https://github.com/elunarlabs/icon-kit/issues"},"license":"MIT","homepage":"https://github.com/elunarlabs/icon-kit#readme","keywords":["elunar","icons","lucide","fontawesome","framer-motion","react","ui","icon-component"],"repository":{"type":"git","url":"git+https://github.com/elunarlabs/icon-kit.git"},"description":"Elunar Icon Kit: Unified Icon component (Lucide core + Lucide Lab + Font Awesome Brands) with circle variants & Framer Motion animations.","maintainers":[{"name":"21milex","email":"twentyonecreativedesign@gmail.com"}],"readme":"<div align=\"center\">\r\n\r\n# @elunarlabs/icon-kit\r\n\r\n[![npm version](https://img.shields.io/npm/v/@elunarlabs/icon-kit.svg)](https://www.npmjs.com/package/@elunarlabs/icon-kit)\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)\r\n\r\nLightweight unified React Icon component for **Lucide Core**, optional **Lucide Lab**, and **Font Awesome Brands** – with animated circle variants (pure SVG ring) & Framer Motion effects.\r\n\r\n</div>\r\n\r\n## Features\r\n- Single API for multiple icon sources\r\n- Variants: `default`, `circle`, `circleFilled`\r\n- Animations: `spin`, `pulse`, `bounce`, `wiggle`, `float`, `scale`, `lift`, `draw`\r\n- Separate hover animations via `hoverAnimation`\r\n- External trigger system (`triggerId` + `[data-icon-trigger]`)\r\n- Auto‑included CSS (side effect) – nothing extra to import\r\n- Accessibility friendly (`ariaLabel`, `decorative`, `fallback`)\r\n- Tree‑shakeable & minimal runtime\r\n\r\n## Install\r\n```bash\r\nnpm install @elunarlabs/icon-kit\r\n```\r\nOptional peers (only if you actually use them):\r\n```bash\r\nnpm install @lucide/lab @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons\r\n```\r\n\r\n## Quick Start\r\n```tsx\r\nimport { Icon } from '@elunarlabs/icon-kit';\r\n\r\nexport function Demo() {\r\n  return (\r\n    <div style={{ display:'flex', gap:16 }}>\r\n      <Icon name=\"camera\" />\r\n      <Icon name=\"alarm-clock\" variant=\"circle\" color=\"#6366f1\" />\r\n      <Icon name=\"heart\" animation=\"pulse\" color=\"#e11d48\" />\r\n      <Icon kit=\"lucide-lab\" name=\"pumpkin\" variant=\"circleFilled\" circleFilledColor=\"#16a34a\" />\r\n      <Icon kit=\"fa-brands\" name=\"github\" variant=\"circle\" circleColor=\"#000\" />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Core Props\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `name` | `string` | — | Icon name (kebab, snake, lower, Pascal all normalized) e.g. `alarm-clock` / `alarmClock` |\r\n| `kit` | `'lucide' \\| 'lucide-lab' \\| 'fa-brands'` | `'lucide'` | Icon source set |\r\n| `variant` | `'default' \\| 'circle' \\| 'circleFilled'` | `'default'` | Visual style; circle variants render an SVG ring (not a CSS border) |\r\n| `size` | `number` | `20` | Outer square size in px (circle diameter) |\r\n| `strokeWidth` | `number` | `2` | Lucide stroke width (clamped 1–3 for consistency) |\r\n| `circleBorderWidth` | `number` | auto | Explicit ring thickness in px (bypasses adaptive calc) |\r\n| `color` | `string` | inherits | Primary stroke / icon color (and outline if no specific circle colors) |\r\n| `circleColor` | `string` | `color` | Outline ring color for `circle` variant |\r\n| `circleFilledColor` | `string` | `color` | Fill color for `circleFilled` interior (auto contrast text) |\r\n| `className` | `string` | — | Class on outer wrapper span |\r\n| `iconClassName` | `string` | — | Class on inner icon container (before the actual svg) |\r\n| `ariaLabel` | `string` | — | Adds `role=\"img\"` + `aria-label`; overrides `decorative` |\r\n| `decorative` | `boolean` | `false` | Marks icon as purely visual (`aria-hidden`) if no `ariaLabel` |\r\n| `fallback` | `ReactNode` | `null` | Rendered when icon lookup fails (otherwise returns `null`) |\r\n| `animation` | `'spin' \\| 'pulse' \\| 'bounce' \\| 'wiggle' \\| 'float' \\| 'scale' \\| 'lift' \\| 'draw'` | — | Continuous / base animation (use `draw` to stroke‑reveal) |\r\n| `hoverAnimation` | `'scale' \\| 'lift' \\| 'rotate' \\| 'wiggle' \\| 'pulse'` | — | Hover-only motion overlay (independent of base) |\r\n| `repeat` | `number \\| 'infinite'` | `'infinite'` | Iterations for base animation (ignored for hover) |\r\n| `animationDuration` | `number` | `1.5` | Seconds for one base animation loop |\r\n| `animationDelay` | `number` | `0` | Initial delay (s) before base animation starts |\r\n| `ease` | `any` | internal | Custom easing for supported animations (falls back to sensible defaults) |\r\n| `draw` | `boolean` | `false` | Alternate way to enable stroke drawing (equivalent to `animation=\"draw\"`) |\r\n| `drawDuration` | `number` | `1.2` | Total stroke reveal time (s) |\r\n| `drawDelay` | `number` | `0` | Delay (s) before draw starts |\r\n| `drawEasing` | `string` | `'ease'` | CSS easing name used for stroke dashoffset animation |\r\n| `disableAnimations` | `boolean` | `false` | Hard disable all motion (overrides base + hover + draw) |\r\n| `respectReducedMotion` | `boolean` | `true` | If user prefers reduced motion, suppress unless `forceAnimations` |\r\n| `forceAnimations` | `boolean` | `false` | Force animations even when reduced motion is set |\r\n| `debugAnimations` | `boolean` | `false` | Console log diagnostic animation info (dev only) |\r\n| `triggerId` | `string` | — | Tie animation start to any element(s) with `data-icon-trigger` attr |\r\n| `style` | `React.CSSProperties` | — | Inline styles merged last |\r\n| `...rest` | HTML attrs | — | Spread onto wrapper span (except `color`) |\r\n\r\nNotes:\r\n- Font Awesome Brand icons ignore `strokeWidth` (they are font-based glyphs rendered via `<FontAwesomeIcon>`).\r\n- Circle ring thickness auto-scales with stroke & size unless overridden by `circleBorderWidth`.\r\n\r\n### Animation Details\r\nBase animations loop using Framer Motion; hover animations apply only while hovered (or while external trigger active if `triggerId` is set). The `draw` animation manipulates stroke dash arrays manually — it's not a Framer transform, so timing is controlled by `draw*` props.\r\n\r\n### External Trigger Usage\r\nAttach `data-icon-trigger=\"some-id\"` to any number of elements. Any `Icon` with `triggerId=\"some-id\"` only animates while at least one trigger element is hovered or focused.\r\n\r\n```tsx\r\n<button data-icon-trigger=\"nav-main\">Hover / focus me</button>\r\n<Icon name=\"compass\" variant=\"circle\" animation=\"pulse\" triggerId=\"nav-main\" />\r\n```\r\n\r\n### Reduced Motion Behavior\r\nIf the OS / browser indicates prefers-reduced-motion:\r\n- All animations are disabled when `respectReducedMotion` (default) is true.\r\n- Override globally per-icon via `forceAnimations`.\r\n- You can still manually set `disableAnimations` to stop everything regardless.\r\n\r\n### Styling & Theming\r\nThe component injects minimal structural classes:\r\n- `.elunar-icon` (wrapper)\r\n- `.elunar-icon__inner`\r\n- `.elunar-icon__svg`\r\n\r\nYou can theme via these classes or provide your own `className` / `iconClassName`. For circle variants, background/foreground contrast is auto-adjusted for filled circles (white vs dark text based on luminance of `circleFilledColor`).\r\n\r\n### Fallback Handling\r\nWhen an icon name cannot be resolved the component:\r\n1. Logs a dev warning (non-production only)\r\n2. Renders `fallback` node if provided\r\n3. Else returns `null`\r\n\r\n### Optional Peer Dependencies\r\nOnly install what you actually use:\r\n```bash\r\nnpm install @lucide/lab @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons\r\n```\r\nIf a peer isn't installed, related icons simply won't resolve (no crash).\r\n\r\n### TypeScript\r\nAll props are typed via `IconProps`. Tree-shaking works because each source library handles its own side effects and we only import the icon modules.\r\n\r\n### Performance\r\nLucide Lab icons are wrapped and memoized on first use. Repeated lookups are cached (`Map`). The ring is a simple masked SVG (no layout thrash). Draw animation computes path lengths once per play.\r\n\r\n### Accessibility Tips\r\n- Use `ariaLabel` for meaningful icons.\r\n- Use `decorative` for purely visual ones so they are hidden from screen readers.\r\n- Provide a short `fallback` when dynamic icon names might fail.\r\n\r\n### Common Pitfalls\r\n| Issue | Cause | Fix |\r\n|-------|-------|-----|\r\n| Icon not showing | Name mismatch | Check case/format; kebab/snake/pascal all supported |\r\n| Draw animation no effect | Using Font Awesome | Draw only affects stroke-based SVG (Lucide/Lab) |\r\n| Motion disabled unexpectedly | OS reduced motion | Set `forceAnimations` or `respectReducedMotion={false}` |\r\n| Ring too thick/thin | Auto scaling result | Use `circleBorderWidth` to force explicit px |\r\n\r\n---\r\nLet me know via issues if another animation or variant would help your workflow.\r\n\r\n## External Trigger\r\n```tsx\r\n<button data-icon-trigger=\"nav-main\">Hover me</button>\r\n<Icon name=\"home\" variant=\"circle\" animation=\"pulse\" triggerId=\"nav-main\" />\r\n```\r\nAnimation runs only while the trigger is hovered or focused.\r\n\r\n## Draw Animation\r\n```tsx\r\n<Icon name=\"activity\" animation=\"draw\" drawDuration={1.4} />\r\n```\r\nThe stroke is revealed and can replay via a trigger.\r\n\r\n## Accessibility\r\n```tsx\r\n<Icon name=\"search\" ariaLabel=\"Search\" />\r\n<Icon name=\"sparkles\" decorative />\r\n<Icon name=\"unknown-icon\" fallback={<span style={{fontSize:12}}>?</span>} />\r\n```\r\n\r\n## Contributing\r\nWelcome to issues & PRs.\r\n\r\n1. Fork & branch (`feat/...`, `fix/...`)\r\n2. `npm install` then `npm test` & `npm run build`\r\n3. Open PR with concise description\r\n\r\n## Release (maintainers)\r\n```bash\r\n# bump version (semver)\r\nnpm run clean\r\nnpm run build\r\nnpm publish --access public\r\n```\r\n\r\n## License\r\nMIT © Elunar Labs\r\n","readmeFilename":"README.md"}