@animateicons/react 0.1.1 → 0.1.2

package/README.md

@@ -24,7 +24,7 @@ import { BellRingIcon } from "@animateicons/react/lucide";
 import { HeartIcon } from "@animateicons/react/huge";
 
 export function Notifications() {
-  return <BellRingIcon size={24} color="#f45b48" />;
+	return <BellRingIcon size={24} color="#f45b48" />;
 }
 ```
 
@@ -34,13 +34,13 @@ Hover-to-animate works out of the box. No setup, no providers.
 
 ```ts
 interface IconProps {
-  size?: number;          // default 24
-  color?: string;          // any CSS color (hex, rgb, hsl, var(--token))
-  className?: string;
-  style?: React.CSSProperties;
-  duration?: number;       // animation speed multiplier — default 1, 0.5 = 2x faster
-  isAnimated?: boolean;    // default true — false disables hover trigger
-  // ...all standard HTMLDivElement props
+	size?: number; // default 24
+	color?: string; // any CSS color (hex, rgb, hsl, var(--token))
+	className?: string;
+	style?: React.CSSProperties;
+	duration?: number; // animation speed multiplier — default 1, 0.5 = 2x faster
+	isAnimated?: boolean; // default true — false disables hover trigger
+	// ...all standard HTMLDivElement props
 }
 ```
 
@@ -51,19 +51,22 @@ Every icon's ref exposes `startAnimation()` and `stopAnimation()`:
 ```tsx
 "use client";
 import { useRef } from "react";
-import { BellRingIcon, type BellRingIconHandle } from "@animateicons/react/lucide";
+import {
+	BellRingIcon,
+	type BellRingIconHandle,
+} from "@animateicons/react/lucide";
 
 export function Bell() {
-  const ref = useRef<BellRingIconHandle>(null);
-
-  return (
-    <button
-      onMouseEnter={() => ref.current?.startAnimation()}
-      onMouseLeave={() => ref.current?.stopAnimation()}
-    >
-      <BellRingIcon ref={ref} size={28} />
-    </button>
-  );
+	const ref = useRef<BellRingIconHandle>(null);
+
+	return (
+		<button
+			onMouseEnter={() => ref.current?.startAnimation()}
+			onMouseLeave={() => ref.current?.stopAnimation()}
+		>
+			<BellRingIcon ref={ref} size={28} />
+		</button>
+	);
 }
 ```
 
@@ -79,14 +82,14 @@ All icons honor `prefers-reduced-motion` automatically. When the user has reduce
 
 ## Compatibility
 
-| Constraint        | Supported                            |
-| ----------------- | ------------------------------------ |
-| React             | 18 or 19                             |
-| Node (tooling)    | ≥ 18.17                              |
-| Module formats    | ESM + CommonJS                       |
-| TypeScript        | strict-mode types ship with the package |
-| RSC / Next 13–16  | every icon carries a `"use client"` directive |
-| Tree-shaking      | `sideEffects: false`, ESM imports drop unused icons |
+| Constraint       | Supported                                           |
+| ---------------- | --------------------------------------------------- |
+| React            | 18 or 19                                            |
+| Node (tooling)   | ≥ 18.17                                             |
+| Module formats   | ESM + CommonJS                                      |
+| TypeScript       | strict-mode types ship with the package             |
+| RSC / Next 13–16 | every icon carries a `"use client"` directive       |
+| Tree-shaking     | `sideEffects: false`, ESM imports drop unused icons |
 
 Published with [npm provenance](https://docs.npmjs.com/generating-provenance-statements) — every release links back to the GitHub commit that built it.
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@animateicons/react",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"description": "Animated SVG icons for React with hover and imperative animation triggers. Built on motion/react.",
 	"license": "MIT",
 	"author": "Avijit Dey",