@animateicons/react 0.3.1 → 0.3.2
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 +33 -74
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,68 +1,61 @@
|
|
|
1
1
|
# @animateicons/react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Animated SVG icons for React. 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
|
-
|
|
10
|
+
## Documentation
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
For full documentation, visit [animateicons.in/icons/docs](https://animateicons.in/icons/docs).
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
Browse all icons at [animateicons.in](https://animateicons.in).
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm i @animateicons/react
|
|
20
|
+
```
|
|
15
21
|
|
|
16
22
|
```bash
|
|
17
23
|
pnpm add @animateicons/react
|
|
18
24
|
```
|
|
19
25
|
|
|
26
|
+
```bash
|
|
27
|
+
yarn add @animateicons/react
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
bun add @animateicons/react
|
|
32
|
+
```
|
|
33
|
+
|
|
20
34
|
## Usage
|
|
21
35
|
|
|
22
|
-
|
|
36
|
+
Import any icon from the `lucide` or `huge` subpath:
|
|
23
37
|
|
|
24
38
|
```tsx
|
|
25
39
|
import { BellRingIcon } from "@animateicons/react/lucide";
|
|
26
40
|
import { HeartIcon } from "@animateicons/react/huge";
|
|
27
41
|
|
|
28
|
-
export function
|
|
42
|
+
export default function Demo() {
|
|
29
43
|
return <BellRingIcon size={24} color="#f45b48" />;
|
|
30
44
|
}
|
|
31
45
|
```
|
|
32
46
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
## Styling
|
|
36
|
-
|
|
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} />
|
|
51
|
-
```
|
|
47
|
+
The icon animates on hover by default.
|
|
52
48
|
|
|
53
49
|
## Imperative API
|
|
54
50
|
|
|
55
|
-
|
|
51
|
+
Trigger animation from a parent via ref:
|
|
56
52
|
|
|
57
53
|
```tsx
|
|
58
54
|
"use client";
|
|
59
55
|
import { useRef } from "react";
|
|
60
|
-
import {
|
|
61
|
-
BellRingIcon,
|
|
62
|
-
type BellRingIconHandle,
|
|
63
|
-
} from "@animateicons/react/lucide";
|
|
56
|
+
import { BellRingIcon, type BellRingIconHandle } from "@animateicons/react/lucide";
|
|
64
57
|
|
|
65
|
-
export function Bell() {
|
|
58
|
+
export default function Bell() {
|
|
66
59
|
const ref = useRef<BellRingIconHandle>(null);
|
|
67
60
|
|
|
68
61
|
return (
|
|
@@ -76,50 +69,16 @@ export function Bell() {
|
|
|
76
69
|
}
|
|
77
70
|
```
|
|
78
71
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
```ts
|
|
82
|
-
import type { IconHandle } from "@animateicons/react";
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
## Props & types
|
|
86
|
-
|
|
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
|
-
}
|
|
98
|
-
|
|
99
|
-
interface IconHandle {
|
|
100
|
-
startAnimation: () => void;
|
|
101
|
-
stopAnimation: () => void;
|
|
102
|
-
}
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
Animations respect the OS-level **Reduce Motion** preference — no extra setup required.
|
|
106
|
-
|
|
107
|
-
## Compatibility
|
|
108
|
-
|
|
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 |
|
|
115
|
-
|
|
116
|
-
## Links
|
|
72
|
+
## Props
|
|
117
73
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
74
|
+
| Prop | Type | Default |
|
|
75
|
+
| ------------- | --------- | ----------- |
|
|
76
|
+
| `size` | `number` | `24` |
|
|
77
|
+
| `color` | `string` | `currentColor` |
|
|
78
|
+
| `duration` | `number` | `1` |
|
|
79
|
+
| `isAnimated` | `boolean` | `true` |
|
|
80
|
+
| `className` | `string` | — |
|
|
122
81
|
|
|
123
82
|
## License
|
|
124
83
|
|
|
125
|
-
MIT © [Avijit Dey](https://github.com/Avijit07x)
|
|
84
|
+
MIT © [Avijit Dey](https://github.com/Avijit07x)
|
package/package.json
CHANGED