@animateicons/react 0.1.0 → 0.1.1
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 +56 -60
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,107 +1,103 @@
|
|
|
1
1
|
# @animateicons/react
|
|
2
2
|
|
|
3
|
-
Animated SVG icons for React
|
|
3
|
+
Animated SVG icons for React. Hover to animate, or drive animations imperatively from refs. 281 icons across two libraries, fully tree-shakeable, ESM + CJS, RSC-ready.
|
|
4
4
|
|
|
5
|
-
[ — every icon copies into your project as a single file.
|
|
5
|
+
[](https://www.npmjs.com/package/@animateicons/react)
|
|
6
|
+
[](https://bundlephobia.com/package/@animateicons/react)
|
|
7
|
+
[](https://www.npmjs.com/package/@animateicons/react)
|
|
8
|
+
[](./LICENSE)
|
|
11
9
|
|
|
12
10
|
## Install
|
|
13
11
|
|
|
14
12
|
```bash
|
|
15
13
|
pnpm add @animateicons/react
|
|
16
|
-
# or: npm i / bun add
|
|
17
14
|
```
|
|
18
15
|
|
|
19
|
-
`
|
|
16
|
+
`react` and `react-dom` are peer dependencies. `motion` is bundled — no separate install needed.
|
|
20
17
|
|
|
21
18
|
## Usage
|
|
22
19
|
|
|
23
|
-
Lucide and Huge
|
|
20
|
+
Lucide and Huge icons live on separate subpath imports because their names overlap (`HeartIcon`, `CopyIcon`, etc.):
|
|
24
21
|
|
|
25
22
|
```tsx
|
|
26
23
|
import { BellRingIcon } from "@animateicons/react/lucide";
|
|
27
24
|
import { HeartIcon } from "@animateicons/react/huge";
|
|
28
25
|
|
|
29
|
-
export
|
|
30
|
-
|
|
26
|
+
export function Notifications() {
|
|
27
|
+
return <BellRingIcon size={24} color="#f45b48" />;
|
|
31
28
|
}
|
|
32
29
|
```
|
|
33
30
|
|
|
31
|
+
Hover-to-animate works out of the box. No setup, no providers.
|
|
32
|
+
|
|
34
33
|
## Props
|
|
35
34
|
|
|
36
35
|
```ts
|
|
37
36
|
interface IconProps {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
37
|
+
size?: number; // default 24
|
|
38
|
+
color?: string; // any CSS color (hex, rgb, hsl, var(--token))
|
|
39
|
+
className?: string;
|
|
40
|
+
style?: React.CSSProperties;
|
|
41
|
+
duration?: number; // animation speed multiplier — default 1, 0.5 = 2x faster
|
|
42
|
+
isAnimated?: boolean; // default true — false disables hover trigger
|
|
43
|
+
// ...all standard HTMLDivElement props
|
|
45
44
|
}
|
|
46
45
|
```
|
|
47
46
|
|
|
48
47
|
## Imperative API
|
|
49
48
|
|
|
49
|
+
Every icon's ref exposes `startAnimation()` and `stopAnimation()`:
|
|
50
|
+
|
|
50
51
|
```tsx
|
|
51
52
|
"use client";
|
|
52
53
|
import { useRef } from "react";
|
|
53
|
-
import {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<BellRingIcon ref={ref} size={28} />
|
|
67
|
-
</button>
|
|
68
|
-
);
|
|
54
|
+
import { BellRingIcon, type BellRingIconHandle } from "@animateicons/react/lucide";
|
|
55
|
+
|
|
56
|
+
export function Bell() {
|
|
57
|
+
const ref = useRef<BellRingIconHandle>(null);
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
<button
|
|
61
|
+
onMouseEnter={() => ref.current?.startAnimation()}
|
|
62
|
+
onMouseLeave={() => ref.current?.stopAnimation()}
|
|
63
|
+
>
|
|
64
|
+
<BellRingIcon ref={ref} size={28} />
|
|
65
|
+
</button>
|
|
66
|
+
);
|
|
69
67
|
}
|
|
70
68
|
```
|
|
71
69
|
|
|
72
|
-
|
|
70
|
+
The shared `IconHandle` type is also exported from the root for generic ref typing:
|
|
73
71
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
72
|
+
```ts
|
|
73
|
+
import type { IconHandle } from "@animateicons/react";
|
|
74
|
+
```
|
|
77
75
|
|
|
78
|
-
##
|
|
76
|
+
## Accessibility
|
|
79
77
|
|
|
80
|
-
|
|
78
|
+
All icons honor `prefers-reduced-motion` automatically. When the user has reduced motion enabled, hover and imperative triggers become no-ops. Nothing to configure.
|
|
81
79
|
|
|
82
|
-
|
|
83
|
-
import { BellRingIcon } from "@animateicons/react/lucide";
|
|
84
|
-
// → ~3 kB gzipped, plus the shared motion/react runtime
|
|
85
|
-
```
|
|
80
|
+
## Compatibility
|
|
86
81
|
|
|
87
|
-
|
|
82
|
+
| Constraint | Supported |
|
|
83
|
+
| ----------------- | ------------------------------------ |
|
|
84
|
+
| React | 18 or 19 |
|
|
85
|
+
| Node (tooling) | ≥ 18.17 |
|
|
86
|
+
| Module formats | ESM + CommonJS |
|
|
87
|
+
| TypeScript | strict-mode types ship with the package |
|
|
88
|
+
| RSC / Next 13–16 | every icon carries a `"use client"` directive |
|
|
89
|
+
| Tree-shaking | `sideEffects: false`, ESM imports drop unused icons |
|
|
88
90
|
|
|
89
|
-
|
|
90
|
-
| -------------------------------------- | ------ |
|
|
91
|
-
| `@animateicons/react/lucide` (full) | 150 kB |
|
|
92
|
-
| `@animateicons/react/huge` (full) | 30 kB |
|
|
93
|
-
| Single icon (tree-shaken) | 4 kB |
|
|
91
|
+
Published with [npm provenance](https://docs.npmjs.com/generating-provenance-statements) — every release links back to the GitHub commit that built it.
|
|
94
92
|
|
|
95
|
-
##
|
|
93
|
+
## Links
|
|
96
94
|
|
|
97
|
-
-
|
|
98
|
-
-
|
|
99
|
-
-
|
|
100
|
-
-
|
|
101
|
-
-
|
|
95
|
+
- **Gallery & live playground**: [animateicons.in](https://animateicons.in/icons/lucide)
|
|
96
|
+
- **Documentation**: [animateicons.in/icons/docs](https://animateicons.in/icons/docs)
|
|
97
|
+
- **Repository**: [github.com/Avijit07x/animateicons](https://github.com/Avijit07x/animateicons)
|
|
98
|
+
- **Changelog**: [GitHub releases](https://github.com/Avijit07x/animateicons/releases)
|
|
99
|
+
- **Issues**: [github.com/Avijit07x/animateicons/issues](https://github.com/Avijit07x/animateicons/issues)
|
|
102
100
|
|
|
103
101
|
## License
|
|
104
102
|
|
|
105
|
-
[
|
|
106
|
-
|
|
107
|
-
[Browse the gallery →](https://animateicons.in/icons/lucide) · [Source on GitHub](https://github.com/Avijit07x/animateicons)
|
|
103
|
+
MIT © [Avijit Dey](https://github.com/Avijit07x). See [LICENSE](./LICENSE).
|
package/package.json
CHANGED