iconflow 1.0.0 → 1.1.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/LICENSE +10 -0
- package/README.md +97 -0
- package/package.json +10 -2
package/LICENSE
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Taksh Patel
|
|
4
|
+
|
|
5
|
+
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:
|
|
6
|
+
|
|
7
|
+
The above copyright notice and this permission notice shall be included in all
|
|
8
|
+
copies or substantial portions of the Software.
|
|
9
|
+
|
|
10
|
+
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
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# IconFlow
|
|
2
|
+
|
|
3
|
+
IconFlow is a lightweight React wrapper for Lucide icons that adds animation triggers such as hover, click, mount, and loop.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install iconflow lucide-react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Import Styles
|
|
12
|
+
|
|
13
|
+
IconFlow ships its CSS separately. Import it once in your app:
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
import "iconflow/styles";
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Basic Usage
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import { Camera } from "lucide-react";
|
|
23
|
+
import AnimatedIcon from "iconflow";
|
|
24
|
+
|
|
25
|
+
export default function App() {
|
|
26
|
+
return (
|
|
27
|
+
<AnimatedIcon
|
|
28
|
+
icon={Camera}
|
|
29
|
+
animation="spin"
|
|
30
|
+
trigger="hover"
|
|
31
|
+
size={28}
|
|
32
|
+
color="#111827"
|
|
33
|
+
speed={1}
|
|
34
|
+
strokeWidth={2}
|
|
35
|
+
/>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Triggers
|
|
41
|
+
|
|
42
|
+
The `trigger` prop accepts:
|
|
43
|
+
|
|
44
|
+
- `hover` - activates on mouse enter and deactivates on mouse leave
|
|
45
|
+
- `click` - toggles the animation on each click
|
|
46
|
+
- `mount` - activates when the component mounts
|
|
47
|
+
- `loop` - starts active immediately and keeps the animation running
|
|
48
|
+
|
|
49
|
+
## Animation Types
|
|
50
|
+
|
|
51
|
+
The `animation` prop is validated against the available classes in `src/styles.css`.
|
|
52
|
+
|
|
53
|
+
- `shake`
|
|
54
|
+
- `spin`
|
|
55
|
+
- `bounce`
|
|
56
|
+
- `swing`
|
|
57
|
+
- `pulse`
|
|
58
|
+
- `heartbeat`
|
|
59
|
+
|
|
60
|
+
If an unsupported animation name is passed, IconFlow falls back to `shake`.
|
|
61
|
+
|
|
62
|
+
## Props
|
|
63
|
+
|
|
64
|
+
| Prop | Type | Default | Description |
|
|
65
|
+
| ------------- | --------- | -------------- | ------------------------------- |
|
|
66
|
+
| `icon` | component | required | Lucide icon component to render |
|
|
67
|
+
| `animation` | string | `shake` | Animation class to apply |
|
|
68
|
+
| `trigger` | string | `hover` | Interaction mode |
|
|
69
|
+
| `size` | number | `24` | Icon size |
|
|
70
|
+
| `color` | string | `currentColor` | Icon color |
|
|
71
|
+
| `speed` | number | `1` | Animation speed multiplier |
|
|
72
|
+
| `strokeWidth` | number | `2` | Lucide stroke width |
|
|
73
|
+
| `className` | string | `""` | Extra class names |
|
|
74
|
+
|
|
75
|
+
## API
|
|
76
|
+
|
|
77
|
+
The package exports the animated icon component by default and also exposes the `IconFlow` helper class.
|
|
78
|
+
|
|
79
|
+
```js
|
|
80
|
+
const IconFlow = require("iconflow");
|
|
81
|
+
|
|
82
|
+
const flow = new IconFlow({
|
|
83
|
+
size: 32,
|
|
84
|
+
animation: "bounce",
|
|
85
|
+
trigger: "click",
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
const defaults = flow.getDefaults({ color: "#0f172a" });
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Build
|
|
92
|
+
|
|
93
|
+
```bash
|
|
94
|
+
npm run build
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
This builds the JavaScript bundle and copies the CSS into `dist`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "iconflow",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Animated icon wrapper for Lucide React icons",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -38,5 +38,13 @@
|
|
|
38
38
|
"iconflow"
|
|
39
39
|
],
|
|
40
40
|
"author": "Taksh Patel",
|
|
41
|
-
"license": "MIT"
|
|
41
|
+
"license": "MIT",
|
|
42
|
+
"repository": {
|
|
43
|
+
"type": "git",
|
|
44
|
+
"url": "https://github.com/TakshPatel02/IconFlow-npm"
|
|
45
|
+
},
|
|
46
|
+
"homepage": "https://component-labs.vercel.app/iconflow",
|
|
47
|
+
"bugs": {
|
|
48
|
+
"url": "https://github.com/TakshPatel02/IconFlow-npm/issues"
|
|
49
|
+
}
|
|
42
50
|
}
|