{"_id":"@alienicon/react","_rev":"2-0f6b4b81cf0358fea5d555dd47f32e7d","name":"@alienicon/react","dist-tags":{"latest":"1.0.2"},"versions":{"0.1.0":{"name":"@alienicon/react","version":"0.1.0","keywords":["icons","animated","lottie","react","alienicons"],"author":{"name":"AlienIcons"},"license":"MIT","_id":"@alienicon/react@0.1.0","maintainers":[{"name":"alienicons","email":"mirzastudio.job@gmail.com"}],"homepage":"https://github.com/alienicons/react#readme","bugs":{"url":"https://github.com/alienicons/react/issues"},"dist":{"shasum":"fad8d2276a4be6781f38f03a4222c5d8a109c72e","tarball":"https://registry.npmjs.org/@alienicon/react/-/react-0.1.0.tgz","fileCount":8,"integrity":"sha512-8lZTJvCMUH9u9x9zwDc5qZKaLFy9z05pCFroAPEqUSu4rBFVfpjYJewF5wXu8RVMtEONmJYu8F2BAXlMsj7dAA==","signatures":[{"sig":"MEUCIDiQzv30CVF49eFCEVS7sScToVnB/yjIXmtmH65FWpPbAiEA89ANxkVZvCw+o4pz2Ovki5owZDViHW/M2yXERY8thXM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":229451},"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":"c4ff1f0bc610bd0e39773de5fad6597dcf2e8a23","scripts":{"dev":"tsup --watch","build":"tsup","generate":"tsx scripts/generate.ts","typecheck":"tsc --noEmit"},"_npmUser":{"name":"alienicons","email":"mirzastudio.job@gmail.com"},"repository":{"url":"git+https://github.com/alienicons/react.git","type":"git"},"_npmVersion":"11.4.1","description":"Animated icon components for React — powered by AlienIcons","directories":{},"sideEffects":false,"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.0.0","tsup":"^8.0.0","lottie-web":"^5.12.2","typescript":"^5.4.0","@types/node":"^25.6.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0","lottie-web":">=5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.0_1777462109712_0.6062776400065906","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@alienicon/react","version":"1.0.2","description":"Animated icon components for React — powered by AlienIcons","license":"MIT","author":{"name":"AlienIcons"},"repository":{"type":"git","url":"git+https://github.com/Aghmirzam/AlienIcon.git"},"keywords":["icons","animated","lottie","react","alienicons"],"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"}},"sideEffects":false,"scripts":{"generate":"tsx scripts/generate.ts","build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0","lottie-web":">=5.0.0"},"devDependencies":{"@types/node":"^25.6.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","lottie-web":"^5.12.2","tsup":"^8.0.0","tsx":"^4.0.0","typescript":"^5.4.0"},"publishConfig":{"access":"public"},"_id":"@alienicon/react@1.0.2","gitHead":"4548ef3f6bf675572a76ea50a1c2ed763e32f710","bugs":{"url":"https://github.com/Aghmirzam/AlienIcon/issues"},"homepage":"https://github.com/Aghmirzam/AlienIcon#readme","_nodeVersion":"22.16.0","_npmVersion":"11.4.1","dist":{"integrity":"sha512-T/XornqlDcbc4BKLWi8v/PX11XTAT3j5XLdjIPSezAyiXNZQOs7lHjhmO5tYywPYoDF65eVWYzBUhri8Pvb5Pw==","shasum":"a0260a7c1884f937076329d49a1cba6d9c093300","tarball":"https://registry.npmjs.org/@alienicon/react/-/react-1.0.2.tgz","fileCount":8,"unpackedSize":227031,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHFL9io/eBmZj7ppc29qy9QLA3behLW+rq2rwMTwrVQwAiBGf5edQgxcqxj81Xjz5HhgMP10a8gYetMGVQIqacK4cg=="}]},"_npmUser":{"name":"alienicons","email":"mirzastudio.job@gmail.com"},"directories":{},"maintainers":[{"name":"alienicons","email":"mirzastudio.job@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_1.0.2_1782142237858_0.5940310996402376"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-29T11:28:29.563Z","modified":"2026-06-22T15:30:38.139Z","0.1.0":"2026-04-29T11:28:29.875Z","1.0.2":"2026-06-22T15:30:38.002Z"},"bugs":{"url":"https://github.com/Aghmirzam/AlienIcon/issues"},"author":{"name":"AlienIcons"},"license":"MIT","homepage":"https://github.com/Aghmirzam/AlienIcon#readme","keywords":["icons","animated","lottie","react","alienicons"],"repository":{"type":"git","url":"git+https://github.com/Aghmirzam/AlienIcon.git"},"description":"Animated icon components for React — powered by AlienIcons","maintainers":[{"name":"alienicons","email":"mirzastudio.job@gmail.com"}],"readme":"# @alienicon/react\n\nAnimated icon components for React, powered by [AlienIcons](https://alienicons.com).\n\n## Install\n\n```bash\nnpm install @alienicon/react\n```\n\n## Quick start (free icons, no key needed)\n\n```tsx\nimport { AlienIconProvider, AlienIcon } from \"@alienicon/react\";\n\nexport default function App() {\n  return (\n    <AlienIconProvider>\n      <AlienIcon slug=\"heart\" size={48} trigger=\"hover\" />\n    </AlienIconProvider>\n  );\n}\n```\n\n## With a license key (premium icons)\n\nGet your key at [alienicons.com/dashboard](https://alienicons.com/dashboard) → Developer tab.\n\n```tsx\n<AlienIconProvider licenseKey=\"ali_lk_yourkey\">\n  <AlienIcon slug=\"crown\" size={48} trigger=\"hover\" />\n</AlienIconProvider>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `slug` | `string` | required | Icon identifier, e.g. `\"heart\"` |\n| `size` | `number \\| string` | `32` | Width and height |\n| `trigger` | `\"hover\" \\| \"click\" \\| \"loop\" \\| \"loop-on-hover\" \\| \"none\"` | `\"hover\"` | Animation trigger |\n| `variant` | `string` | — | Visual style: `\"minimal\"`, `\"classic\"`, etc. |\n| `weight` | `\"thin\" \\| \"light\" \\| \"regular\" \\| \"bold\" \\| \"duotone\"` | `\"regular\"` | Stroke weight |\n| `colors` | `Record<string, string>` | — | Color overrides (inherits `currentColor` by default) |\n| `speed` | `number` | `1` | Playback speed multiplier |\n| `loopDelay` | `number` | — | ms to wait between loops |\n| `keepLastFrame` | `boolean` | `false` | Stay on last frame instead of resetting |\n| `loading` | `\"lazy\" \\| \"eager\"` | `\"eager\"` | Lazy-load with IntersectionObserver |\n| `className` | `string` | — | CSS class |\n| `style` | `CSSProperties` | — | Inline CSS |\n| `aria-label` | `string` | — | Accessible label |\n\n## Colors — currentColor support\n\nBy default every icon inherits your CSS `color` property (like an SVG icon):\n\n```tsx\n<span style={{ color: \"#e11d48\" }}>\n  <AlienIcon slug=\"heart\" size={32} />\n</span>\n```\n\nOverride specific color slots:\n\n```tsx\n<AlienIcon\n  slug=\"heart\"\n  colors={{ stroke: \"#e11d48\", fill: \"#fca5a5\" }}\n/>\n```\n\n## Ref API\n\n```tsx\nimport { AlienIcon, AlienIconHandle } from \"@alienicon/react\";\nimport { useRef } from \"react\";\n\nconst ref = useRef<AlienIconHandle>(null);\n\n<AlienIcon ref={ref} slug=\"bell\" trigger=\"none\" />\n\n// Then:\nref.current?.play();\nref.current?.pause();\nref.current?.stop();\nref.current?.reverse();\nref.current?.goToFrame(20);\nref.current?.setSpeed(2);\nref.current?.isPlaying; // boolean\n```\n","readmeFilename":"README.md"}