@animateicons/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Avijit Dey
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,107 @@
+# @animateicons/react
+
+Animated SVG icons for React with hover and imperative animation triggers. Built on `motion/react`.
+
+[![npm version](https://img.shields.io/npm/v/@animateicons/react?color=f45b48)](https://www.npmjs.com/package/@animateicons/react)
+[![License: MIT](https://img.shields.io/badge/License-MIT-f45b48.svg)](./LICENSE)
+
+The same 281 icons that power [animateicons.in](https://animateicons.in), available as a tree-shakeable npm package.
+
+> **Prefer to own the source?** Use the shadcn CLI distribution at [animateicons.in](https://animateicons.in) — every icon copies into your project as a single file.
+
+## Install
+
+```bash
+pnpm add @animateicons/react
+# or: npm i / bun add
+```
+
+`motion` is bundled as a runtime dependency, so you don't need to install it separately. `react` and `react-dom` are peer dependencies — every React app already has them.
+
+## Usage
+
+Lucide and Huge libraries are exposed as separate subpath imports because several icon names overlap (`HeartIcon`, `CopyIcon`, etc.):
+
+```tsx
+import { BellRingIcon } from "@animateicons/react/lucide";
+import { HeartIcon } from "@animateicons/react/huge";
+
+export default function Notifications() {
+	return <BellRingIcon size={24} color="#f45b48" />;
+}
+```
+
+## Props
+
+```ts
+interface IconProps {
+	size?: number; // default 24
+	color?: string; // any CSS color
+	className?: string;
+	duration?: number; // default 1 — multiplier (0.5 = 2x faster)
+	isAnimated?: boolean; // default true
+	style?: React.CSSProperties;
+	// ...plus all standard div props
+}
+```
+
+## Imperative API
+
+```tsx
+"use client";
+import { useRef } from "react";
+import {
+	BellRingIcon,
+	type BellRingIconHandle,
+} from "@animateicons/react/lucide";
+
+export default function Demo() {
+	const ref = useRef<BellRingIconHandle>(null);
+
+	return (
+		<button
+			onMouseEnter={() => ref.current?.startAnimation()}
+			onMouseLeave={() => ref.current?.stopAnimation()}
+		>
+			<BellRingIcon ref={ref} size={28} />
+		</button>
+	);
+}
+```
+
+Every icon also accepts hover-to-animate by default — no setup.
+
+## Reduced motion
+
+All icons respect `prefers-reduced-motion`. When the user has it enabled, hover and imperative play become no-ops. No flag to set.
+
+## Bundle size
+
+Tree-shakeable barrel. Per-icon imports drop the rest:
+
+```tsx
+import { BellRingIcon } from "@animateicons/react/lucide";
+// → ~3 kB gzipped, plus the shared motion/react runtime
+```
+
+CI enforces hard size budgets (see `size-limit` config in `package.json`):
+
+| Entry                                  | Budget |
+| -------------------------------------- | ------ |
+| `@animateicons/react/lucide` (full)    | 150 kB |
+| `@animateicons/react/huge` (full)      | 30 kB  |
+| Single icon (tree-shaken)              | 4 kB   |
+
+## Compatibility
+
+- Node ≥ 18.17 for tooling (the package itself runs in any modern browser)
+- React 18 or 19, react-dom 18 or 19
+- ESM + CommonJS dual build
+- React Server Components: every icon ships with a `"use client"` banner
+- Published with [npm provenance](https://docs.npmjs.com/generating-provenance-statements) so consumers can verify the tarball came from this repo + commit
+
+## License
+
+[MIT](./LICENSE) — use it however you want.
+
+[Browse the gallery →](https://animateicons.in/icons/lucide) &nbsp;·&nbsp; [Source on GitHub](https://github.com/Avijit07x/animateicons)

package/dist/chunk-B7MM7JD4.js

@@ -0,0 +1,6 @@
+// src/lib/cn.ts
+var cn = (...inputs) => inputs.filter(Boolean).join(" ");
+
+export { cn };
+//# sourceMappingURL=chunk-B7MM7JD4.js.map
+//# sourceMappingURL=chunk-B7MM7JD4.js.map

package/dist/chunk-B7MM7JD4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.ts"],"names":[],"mappings":";AAcO,IAAM,EAAA,GAAK,IAAI,MAAA,KACrB,MAAA,CAAO,OAAO,OAAO,CAAA,CAAE,KAAK,GAAG","file":"chunk-B7MM7JD4.js","sourcesContent":["/**\n * Minimal `cn` for @animateicons/react.\n *\n * The AnimateIcons monorepo uses clsx + tailwind-merge to drive its\n * gallery's heavy class composition. The published package's icons\n * only ever call `cn(\"static-class\", className)` with two simple\n * inputs, so we ship a 5-line filter+join instead of pulling in\n * clsx (~600B) and tailwind-merge (~5KB) as runtime dependencies.\n *\n * If a future icon needs richer behavior, swap this to clsx and add\n * it to `dependencies` in package.json.\n */\ntype ClassValue = string | undefined | null | false | 0;\n\nexport const cn = (...inputs: ClassValue[]): string =>\n\tinputs.filter(Boolean).join(\" \");\n"]}