iconflow 1.2.3 → 1.3.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/dist/index.css +6 -6
- package/dist/index.js +11 -10
- package/dist/index.mjs +10 -9
- package/dist/styles.css/styles.css +22 -79
- package/package.json +4 -4
package/dist/index.css
CHANGED
|
@@ -5,22 +5,22 @@
|
|
|
5
5
|
justify-content: center;
|
|
6
6
|
}
|
|
7
7
|
.iconflow-shake.iconflow-active {
|
|
8
|
-
animation: iconflow-shake
|
|
8
|
+
animation: iconflow-shake var(--iconflow-duration, 0.5s) ease-in-out;
|
|
9
9
|
}
|
|
10
10
|
.iconflow-spin.iconflow-active {
|
|
11
|
-
animation: iconflow-spin
|
|
11
|
+
animation: iconflow-spin var(--iconflow-duration, 1s) linear infinite;
|
|
12
12
|
}
|
|
13
13
|
.iconflow-bounce.iconflow-active {
|
|
14
|
-
animation: iconflow-bounce
|
|
14
|
+
animation: iconflow-bounce var(--iconflow-duration, 0.6s) ease infinite;
|
|
15
15
|
}
|
|
16
16
|
.iconflow-swing.iconflow-active {
|
|
17
|
-
animation: iconflow-swing
|
|
17
|
+
animation: iconflow-swing var(--iconflow-duration, 0.8s) ease-in-out infinite;
|
|
18
18
|
}
|
|
19
19
|
.iconflow-pulse.iconflow-active {
|
|
20
|
-
animation: iconflow-pulse
|
|
20
|
+
animation: iconflow-pulse var(--iconflow-duration, 1s) ease-in-out infinite;
|
|
21
21
|
}
|
|
22
22
|
.iconflow-heartbeat.iconflow-active {
|
|
23
|
-
animation: iconflow-heartbeat
|
|
23
|
+
animation: iconflow-heartbeat var(--iconflow-duration, 0.8s) ease-in-out infinite;
|
|
24
24
|
}
|
|
25
25
|
@keyframes iconflow-shake {
|
|
26
26
|
0%, 100% {
|
package/dist/index.js
CHANGED
|
@@ -36,15 +36,8 @@ __export(index_exports, {
|
|
|
36
36
|
module.exports = __toCommonJS(index_exports);
|
|
37
37
|
|
|
38
38
|
// src/AnimatedIcon.jsx
|
|
39
|
-
var import_react = __toESM(require("react"));
|
|
40
|
-
var ANIMATION_TYPES = [
|
|
41
|
-
"shake",
|
|
42
|
-
"spin",
|
|
43
|
-
"bounce",
|
|
44
|
-
"swing",
|
|
45
|
-
"pulse",
|
|
46
|
-
"heartbeat"
|
|
47
|
-
];
|
|
39
|
+
var import_react = __toESM(require("react"), 1);
|
|
40
|
+
var ANIMATION_TYPES = ["shake", "spin", "bounce", "swing", "pulse", "heartbeat"];
|
|
48
41
|
var TRIGGERS = ["hover", "click", "mount", "loop"];
|
|
49
42
|
var AnimatedIcon = ({
|
|
50
43
|
icon: Icon,
|
|
@@ -75,11 +68,19 @@ var AnimatedIcon = ({
|
|
|
75
68
|
mount: {},
|
|
76
69
|
loop: {}
|
|
77
70
|
};
|
|
71
|
+
const durations = {
|
|
72
|
+
shake: `${0.5 / speed}s`,
|
|
73
|
+
spin: `${1 / speed}s`,
|
|
74
|
+
bounce: `${0.6 / speed}s`,
|
|
75
|
+
swing: `${0.8 / speed}s`,
|
|
76
|
+
pulse: `${1 / speed}s`,
|
|
77
|
+
heartbeat: `${0.8 / speed}s`
|
|
78
|
+
};
|
|
78
79
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
79
80
|
"span",
|
|
80
81
|
{
|
|
81
82
|
className: `iconflow-wrapper iconflow-${animationType} ${isTriggered ? "iconflow-active" : ""} ${className}`.trim(),
|
|
82
|
-
style: { "--iconflow-
|
|
83
|
+
style: { "--iconflow-duration": durations[animationType] },
|
|
83
84
|
...handlers[triggerType]
|
|
84
85
|
},
|
|
85
86
|
/* @__PURE__ */ import_react.default.createElement(Icon, { size, color, strokeWidth })
|
package/dist/index.mjs
CHANGED
|
@@ -1,13 +1,6 @@
|
|
|
1
1
|
// src/AnimatedIcon.jsx
|
|
2
2
|
import React, { useEffect, useState } from "react";
|
|
3
|
-
var ANIMATION_TYPES = [
|
|
4
|
-
"shake",
|
|
5
|
-
"spin",
|
|
6
|
-
"bounce",
|
|
7
|
-
"swing",
|
|
8
|
-
"pulse",
|
|
9
|
-
"heartbeat"
|
|
10
|
-
];
|
|
3
|
+
var ANIMATION_TYPES = ["shake", "spin", "bounce", "swing", "pulse", "heartbeat"];
|
|
11
4
|
var TRIGGERS = ["hover", "click", "mount", "loop"];
|
|
12
5
|
var AnimatedIcon = ({
|
|
13
6
|
icon: Icon,
|
|
@@ -38,11 +31,19 @@ var AnimatedIcon = ({
|
|
|
38
31
|
mount: {},
|
|
39
32
|
loop: {}
|
|
40
33
|
};
|
|
34
|
+
const durations = {
|
|
35
|
+
shake: `${0.5 / speed}s`,
|
|
36
|
+
spin: `${1 / speed}s`,
|
|
37
|
+
bounce: `${0.6 / speed}s`,
|
|
38
|
+
swing: `${0.8 / speed}s`,
|
|
39
|
+
pulse: `${1 / speed}s`,
|
|
40
|
+
heartbeat: `${0.8 / speed}s`
|
|
41
|
+
};
|
|
41
42
|
return /* @__PURE__ */ React.createElement(
|
|
42
43
|
"span",
|
|
43
44
|
{
|
|
44
45
|
className: `iconflow-wrapper iconflow-${animationType} ${isTriggered ? "iconflow-active" : ""} ${className}`.trim(),
|
|
45
|
-
style: { "--iconflow-
|
|
46
|
+
style: { "--iconflow-duration": durations[animationType] },
|
|
46
47
|
...handlers[triggerType]
|
|
47
48
|
},
|
|
48
49
|
/* @__PURE__ */ React.createElement(Icon, { size, color, strokeWidth })
|
|
@@ -7,122 +7,65 @@
|
|
|
7
7
|
|
|
8
8
|
/* SHAKE */
|
|
9
9
|
.iconflow-shake.iconflow-active {
|
|
10
|
-
animation: iconflow-shake
|
|
10
|
+
animation: iconflow-shake var(--iconflow-duration, 0.5s) ease-in-out;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
/* SPIN */
|
|
14
14
|
.iconflow-spin.iconflow-active {
|
|
15
|
-
animation: iconflow-spin
|
|
15
|
+
animation: iconflow-spin var(--iconflow-duration, 1s) linear infinite;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
/* BOUNCE */
|
|
19
19
|
.iconflow-bounce.iconflow-active {
|
|
20
|
-
animation: iconflow-bounce
|
|
20
|
+
animation: iconflow-bounce var(--iconflow-duration, 0.6s) ease infinite;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
/* SWING */
|
|
24
24
|
.iconflow-swing.iconflow-active {
|
|
25
|
-
animation: iconflow-swing
|
|
25
|
+
animation: iconflow-swing var(--iconflow-duration, 0.8s) ease-in-out infinite;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
/* PULSE */
|
|
29
29
|
.iconflow-pulse.iconflow-active {
|
|
30
|
-
animation: iconflow-pulse
|
|
30
|
+
animation: iconflow-pulse var(--iconflow-duration, 1s) ease-in-out infinite;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
/* HEARTBEAT */
|
|
34
34
|
.iconflow-heartbeat.iconflow-active {
|
|
35
|
-
animation: iconflow-heartbeat
|
|
35
|
+
animation: iconflow-heartbeat var(--iconflow-duration, 0.8s) ease-in-out infinite;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
/* KEYFRAMES */
|
|
39
39
|
@keyframes iconflow-shake {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
transform: rotate(0deg);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
25% {
|
|
47
|
-
transform: rotate(-15deg);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
75% {
|
|
51
|
-
transform: rotate(15deg);
|
|
52
|
-
}
|
|
40
|
+
0%, 100% { transform: rotate(0deg); }
|
|
41
|
+
25% { transform: rotate(-15deg); }
|
|
42
|
+
75% { transform: rotate(15deg); }
|
|
53
43
|
}
|
|
54
44
|
|
|
55
45
|
@keyframes iconflow-spin {
|
|
56
|
-
from {
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
to {
|
|
61
|
-
transform: rotate(360deg);
|
|
62
|
-
}
|
|
46
|
+
from { transform: rotate(0deg); }
|
|
47
|
+
to { transform: rotate(360deg); }
|
|
63
48
|
}
|
|
64
49
|
|
|
65
50
|
@keyframes iconflow-bounce {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
100% {
|
|
69
|
-
transform: translateY(0);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
50% {
|
|
73
|
-
transform: translateY(-6px);
|
|
74
|
-
}
|
|
51
|
+
0%, 100% { transform: translateY(0); }
|
|
52
|
+
50% { transform: translateY(-6px); }
|
|
75
53
|
}
|
|
76
54
|
|
|
77
55
|
@keyframes iconflow-swing {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
transform: rotate(0deg);
|
|
82
|
-
transform-origin: top center;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
25% {
|
|
86
|
-
transform: rotate(15deg);
|
|
87
|
-
transform-origin: top center;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
75% {
|
|
91
|
-
transform: rotate(-15deg);
|
|
92
|
-
transform-origin: top center;
|
|
93
|
-
}
|
|
56
|
+
0%, 100% { transform: rotate(0deg); transform-origin: top center; }
|
|
57
|
+
25% { transform: rotate(15deg); transform-origin: top center; }
|
|
58
|
+
75% { transform: rotate(-15deg); transform-origin: top center; }
|
|
94
59
|
}
|
|
95
60
|
|
|
96
61
|
@keyframes iconflow-pulse {
|
|
97
|
-
|
|
98
|
-
0
|
|
99
|
-
100% {
|
|
100
|
-
opacity: 1;
|
|
101
|
-
transform: scale(1);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
50% {
|
|
105
|
-
opacity: 0.6;
|
|
106
|
-
transform: scale(0.9);
|
|
107
|
-
}
|
|
62
|
+
0%, 100% { opacity: 1; transform: scale(1); }
|
|
63
|
+
50% { opacity: 0.6; transform: scale(0.9); }
|
|
108
64
|
}
|
|
109
65
|
|
|
110
66
|
@keyframes iconflow-heartbeat {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
25% {
|
|
118
|
-
transform: scale(1.3);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
50% {
|
|
122
|
-
transform: scale(1);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
75% {
|
|
126
|
-
transform: scale(1.2);
|
|
127
|
-
}
|
|
67
|
+
0%, 100% { transform: scale(1); }
|
|
68
|
+
25% { transform: scale(1.3); }
|
|
69
|
+
50% { transform: scale(1); }
|
|
70
|
+
75% { transform: scale(1.2); }
|
|
128
71
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "iconflow",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "Animated icon wrapper for Lucide React icons",
|
|
5
|
+
"type": "module",
|
|
5
6
|
"main": "dist/index.js",
|
|
6
7
|
"module": "dist/index.mjs",
|
|
7
8
|
"exports": {
|
|
@@ -15,7 +16,7 @@
|
|
|
15
16
|
"dist"
|
|
16
17
|
],
|
|
17
18
|
"scripts": {
|
|
18
|
-
"build:js": "tsup",
|
|
19
|
+
"build:js": "tsup --config tsup.config.js",
|
|
19
20
|
"build:css": "cpx src/styles.css dist/styles.css",
|
|
20
21
|
"build": "npm run build:js && npm run build:css",
|
|
21
22
|
"prepublishOnly": "npm run build"
|
|
@@ -27,8 +28,7 @@
|
|
|
27
28
|
},
|
|
28
29
|
"devDependencies": {
|
|
29
30
|
"cpx": "^1.5.0",
|
|
30
|
-
"tsup": "^8.5.1"
|
|
31
|
-
"typescript": "^6.0.3"
|
|
31
|
+
"tsup": "^8.5.1"
|
|
32
32
|
},
|
|
33
33
|
"keywords": [
|
|
34
34
|
"icons",
|