@animateicons/react 0.1.3 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -33
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,23 +1,25 @@
|
|
|
1
1
|
# @animateicons/react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
281 animated SVG icons for React. Hover and imperative triggers, configurable size, color, and duration. Built on `motion/react`.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@animateicons/react)
|
|
6
6
|
[](https://bundlephobia.com/package/@animateicons/react)
|
|
7
7
|
[](https://www.npmjs.com/package/@animateicons/react)
|
|
8
8
|
[](./LICENSE)
|
|
9
9
|
|
|
10
|
+
[**Browse icons →**](https://animateicons.in/icons/lucide) · [**Docs →**](https://animateicons.in/icons/docs)
|
|
11
|
+
|
|
10
12
|
## Install
|
|
11
13
|
|
|
14
|
+
`react` and `react-dom` are peer dependencies. `motion` is bundled.
|
|
15
|
+
|
|
12
16
|
```bash
|
|
13
17
|
pnpm add @animateicons/react
|
|
14
18
|
```
|
|
15
19
|
|
|
16
|
-
`react` and `react-dom` are peer dependencies. `motion` is bundled — no separate install needed.
|
|
17
|
-
|
|
18
20
|
## Usage
|
|
19
21
|
|
|
20
|
-
Lucide and Huge
|
|
22
|
+
Lucide and Huge are exposed as scoped subpaths because some icon names overlap (`HeartIcon`, `CopyIcon`, etc.).
|
|
21
23
|
|
|
22
24
|
```tsx
|
|
23
25
|
import { BellRingIcon } from "@animateicons/react/lucide";
|
|
@@ -28,25 +30,29 @@ export function Notifications() {
|
|
|
28
30
|
}
|
|
29
31
|
```
|
|
30
32
|
|
|
31
|
-
|
|
33
|
+
That's it — the icon animates on hover by default.
|
|
32
34
|
|
|
33
|
-
##
|
|
35
|
+
## Styling
|
|
34
36
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
37
|
+
Every icon strokes `currentColor`, so it inherits the surrounding text color. You can also pass `color`, `className`, or use the `duration` and `isAnimated` props to control playback.
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
// Color — sets currentColor inline
|
|
41
|
+
<BellRingIcon color="#f45b48" />
|
|
42
|
+
|
|
43
|
+
// Tailwind utility — works because icons stroke="currentColor"
|
|
44
|
+
<BellRingIcon className="text-primary" />
|
|
45
|
+
|
|
46
|
+
// Speed — duration is a multiplier (lower = faster)
|
|
47
|
+
<BellRingIcon duration={0.6} />
|
|
48
|
+
|
|
49
|
+
// Disable hover animation
|
|
50
|
+
<BellRingIcon isAnimated={false} />
|
|
45
51
|
```
|
|
46
52
|
|
|
47
53
|
## Imperative API
|
|
48
54
|
|
|
49
|
-
|
|
55
|
+
Need to trigger an animation from a parent — on click, on focus, or programmatically? Pass a ref. Each icon exports its own `*Handle` type.
|
|
50
56
|
|
|
51
57
|
```tsx
|
|
52
58
|
"use client";
|
|
@@ -76,31 +82,44 @@ The shared `IconHandle` type is also exported from the root for generic ref typi
|
|
|
76
82
|
import type { IconHandle } from "@animateicons/react";
|
|
77
83
|
```
|
|
78
84
|
|
|
79
|
-
##
|
|
85
|
+
## Props & types
|
|
80
86
|
|
|
81
|
-
|
|
87
|
+
```ts
|
|
88
|
+
interface IconProps {
|
|
89
|
+
size?: number;
|
|
90
|
+
color?: string;
|
|
91
|
+
className?: string;
|
|
92
|
+
duration?: number;
|
|
93
|
+
isAnimated?: boolean;
|
|
94
|
+
onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
95
|
+
onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
96
|
+
style?: React.CSSProperties;
|
|
97
|
+
}
|
|
82
98
|
|
|
83
|
-
|
|
99
|
+
interface IconHandle {
|
|
100
|
+
startAnimation: () => void;
|
|
101
|
+
stopAnimation: () => void;
|
|
102
|
+
}
|
|
103
|
+
```
|
|
84
104
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
| Node (tooling) | ≥ 18.17 |
|
|
89
|
-
| Module formats | ESM + CommonJS |
|
|
90
|
-
| TypeScript | strict-mode types ship with the package |
|
|
91
|
-
| RSC / Next 13–16 | every icon carries a `"use client"` directive |
|
|
92
|
-
| Tree-shaking | `sideEffects: false`, ESM imports drop unused icons |
|
|
105
|
+
Animations respect the OS-level **Reduce Motion** preference — no extra setup required.
|
|
106
|
+
|
|
107
|
+
## Compatibility
|
|
93
108
|
|
|
94
|
-
|
|
109
|
+
| Requirement | Supported |
|
|
110
|
+
| -------------- | --------------------------------------------- |
|
|
111
|
+
| React | 18 or 19 |
|
|
112
|
+
| Module formats | ESM + CommonJS |
|
|
113
|
+
| TypeScript | strict-mode types ship with the package |
|
|
114
|
+
| Next.js | every icon carries a `"use client"` directive |
|
|
95
115
|
|
|
96
116
|
## Links
|
|
97
117
|
|
|
98
|
-
- **Gallery
|
|
99
|
-
- **
|
|
118
|
+
- **Gallery**: [animateicons.in](https://animateicons.in/icons/lucide)
|
|
119
|
+
- **Docs**: [animateicons.in/icons/docs](https://animateicons.in/icons/docs)
|
|
100
120
|
- **Repository**: [github.com/Avijit07x/animateicons](https://github.com/Avijit07x/animateicons)
|
|
101
|
-
- **Changelog**: [GitHub releases](https://github.com/Avijit07x/animateicons/releases)
|
|
102
121
|
- **Issues**: [github.com/Avijit07x/animateicons/issues](https://github.com/Avijit07x/animateicons/issues)
|
|
103
122
|
|
|
104
123
|
## License
|
|
105
124
|
|
|
106
|
-
MIT © [Avijit Dey](https://github.com/Avijit07x).
|
|
125
|
+
MIT © [Avijit Dey](https://github.com/Avijit07x).
|
package/package.json
CHANGED