\n {/* Animates on hover by default */}\n
\n\n {/* Keeps looping while hovered, stops when the pointer leaves */}\n
\n\n {/* Plays when clicked */}\n
\n
`.\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `size` | `number` | `28` | Width and height in pixels. |\n| `hoverable` | `boolean` | `true` | Play when the pointer enters the icon. Ignored while a `ref` is attached (see below). |\n| `loopOnHover` | `boolean` | `false` | Keep replaying while hovered; stops when the pointer leaves. |\n| `animateOnClick` | `boolean` | `false` | Play when the icon is clicked. |\n| `autoAnimateOnLoad` | `boolean` | `false` | Play once when the component mounts. |\n| `className` | `string` | â | Classes for the wrapper. Merged with [`tailwind-merge`](https://github.com/dcastil/tailwind-merge), so conflicting Tailwind classes resolve cleanly. |\n| `style` | `React.CSSProperties` | â | Inline styles for the wrapper. |\n| `...props` | `React.HTMLAttributes
` | â | Any other div attribute. |\n\n---\n\n## đšī¸ Controlling an icon from a parent\n\nPass a `ref` to start and stop the animation yourself, for example when the whole button is hovered rather than just the icon:\n\n```tsx\nimport { useRef } from 'react';\nimport { ArchiveX, type AnimatedIconHandle } from 'aliveicon';\n\nexport function DeleteButton() {\n const icon = useRef(null);\n\n return (\n icon.current?.startAnimation()}\n onMouseLeave={() => icon.current?.stopAnimation()}\n >\n Delete\n \n );\n}\n```\n\n| Method | What it does |\n| ------ | ------------ |\n| `startAnimation()` | Plays the animation once, then returns to rest. |\n| `stopAnimation()` | Stops any running animation and returns to rest. |\n\nWhile a `ref` is attached the icon ignores its own hover, so the parent is in charge. `animateOnClick` and `autoAnimateOnLoad` still work.\n\n---\n\n## đ¨ Styling & color\n\nIcons are drawn with `stroke=\"currentColor\"`, so they take the **text color** of their container:\n\n```tsx\n\n\n\n\n\n```\n\n---\n\n## âŋ Accessibility\n\nThe SVG inside each icon has `aria-hidden=\"true\"`, so screen readers skip decorative icons. When an icon carries meaning on its own, label the wrapper:\n\n```tsx\n\n```\n\n---\n\n## đ Available icons\n\n`aliveicon` ships **520 icons**, and more are being added. Import any icon by its PascalCase name:\n\n```tsx\nimport { CircleCheck, ChartLine, Wifi } from 'aliveicon';\n```\n\n| Group | Count | Examples |\n| ----- | ----- | -------- |\n| **A** | 78 | `Activity`, `Airplay`, `AlarmClock`, `Anchor`, `ArrowRight`, `Atom`, `Award` |\n| **B** | 128 | `Battery`, `Bell`, `Bluetooth`, `Book`, `Bot`, `Brain`, `Bug`, `Building` |\n| **C** | 140 | `Calendar`, `Camera`, `Car`, `ChartLine`, `Check`, `ChevronDown`, `Circle`, `Clock` |\n| **N** | 16 | `Navigation`, `Network`, `Newspaper`, `Notebook`, `Nut` |\n| **O** | 10 | `Octagon`, `Omega`, `Option`, `Orbit`, `Origami` |\n| **Q** | 2 | `Quote`, `QrCode` |\n| **R** | 50 | `Rabbit`, `Radar`, `Radio`, `Receipt`, `RefreshCw`, `Rocket`, `RotateCcw` |\n| **S** | 1 | `SquareActivity` |\n| **U** | 35 | `Umbrella`, `Undo`, `Upload`, `User`, `Users`, `Utensils` |\n| **V** | 20 | `Variable`, `Vault`, `Video`, `Volume`, `Vote` |\n| **W** | 33 | `Wallet`, `Wand`, `Watch`, `Waves`, `Webcam`, `Wifi`, `Wind`, `Wrench` |\n| **X** | 2 | `X`, `XTwitter` |\n| **Y** | 1 | `YouTube` |\n| **Z** | 4 | `Zap`, `ZapOff`, `ZoomIn`, `ZoomOut` |\n\nThe full list lives in [`src/index.ts`](src/index.ts), and your editor's autocomplete will show every icon as you type.\n\n### Renamed icons\n\nThese names were misspelled in earlier versions. The old names still work but are deprecated and will be removed in the next major version.\n\n| Old name | Use instead |\n| -------- | ----------- |\n| `AccessibilityActivity` | `Accessibility` |\n| `AudioWaveForm` | `AudioWaveform` |\n| `BadgeIndianRuppee` | `BadgeIndianRupee` |\n| `BookMark`, `BookMarkCheck`, `BookMarkMinus` | `Bookmark`, `BookmarkCheck`, `BookmarkMinus` |\n| `CCTV` | `Cctv` |\n| `QRCode` | `QrCode` |\n| `USB` | `Usb` |\n| `WebhooksOff` | `WebhookOff` |\n\n---\n\n## đŦ How the animation works\n\nEach icon is an inline SVG whose strokes are Framer Motion elements (`motion.path`, `motion.circle`, âĻ) with two variants: a resting state and an `animate` state. A shared hook, `useAnimatedIcon`, decides *when* to play: on hover, click, mount, in a loop, or when a parent calls the `ref` methods. It plays the `animate` variant and then settles back to rest.\n\n---\n\n## đ¤ Contributing\n\n```bash\nnpm install\nnpm run check # index up to date, icon lint, formatting, type-check\nnpm run build\nnpm test # renders every icon from the built package\n```\n\nNew icons go in `src/icons//.tsx` and use `useAnimatedIcon` from `src/lib`. Run `npm run generate` afterwards to add them to `src/index.ts`.\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for the full guide, and please follow the [Code of Conduct](CODE_OF_CONDUCT.md). Security issues go through [SECURITY.md](SECURITY.md).\n\n---\n\n## đ Credits\n\nIcon shapes are based on [Lucide](https://lucide.dev) (ISC). See [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).\n\n## đ License\n\n[MIT](LICENSE) Š Hemang Baldha\n","readmeFilename":"README.md"}![\"npm](\"https://img.shields.io/npm/v/aliveicon.svg?color=blue\")
\n ![\"npm](\"https://img.shields.io/npm/dm/aliveicon.svg?color=blue\")
\n ![\"license\"](\"https://img.shields.io/npm/l/aliveicon.svg?color=green\")
\n ![\"icon](\"https://img.shields.io/badge/icons-520-orange\"){kind=icon}
\n ![\"typescript\"](\"https://img.shields.io/badge/types-included-blue\"){kind=icon}
\n