@jis3r/icons 2.3.0 → 2.5.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/icons/eye.svelte +131 -0
- package/dist/icons/eye.svelte.d.ts +4 -0
- package/dist/icons/message-circle-x.svelte +109 -0
- package/dist/icons/message-circle-x.svelte.d.ts +4 -0
- package/dist/icons/message-square-x.svelte +109 -0
- package/dist/icons/message-square-x.svelte.d.ts +4 -0
- package/dist/icons/standalone-props.d.ts +6 -0
- package/dist/icons/standalone-props.js +14 -0
- package/dist/icons/user-check.svelte +46 -3
- package/dist/icons/user-pen.svelte +46 -2
- package/dist/index.d.ts +5 -0
- package/dist/index.js +3 -0
- package/package.json +4 -3
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { IconProps } from './types.js';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
color = 'currentColor',
|
|
6
|
+
size = 24,
|
|
7
|
+
strokeWidth = 2,
|
|
8
|
+
animate: animateProp = false,
|
|
9
|
+
class: className = ''
|
|
10
|
+
}: IconProps = $props();
|
|
11
|
+
|
|
12
|
+
let animating = $state(false);
|
|
13
|
+
let morphProgress = $state(0);
|
|
14
|
+
let frameId = -1;
|
|
15
|
+
let runId = 0;
|
|
16
|
+
|
|
17
|
+
const closeDurationMs = 120;
|
|
18
|
+
const openDurationMs = 160;
|
|
19
|
+
const lineY = 12;
|
|
20
|
+
const leftX = 2.062;
|
|
21
|
+
const rightX = 21.938;
|
|
22
|
+
const upperEndY = 11.652;
|
|
23
|
+
const lowerEndY = 12.348;
|
|
24
|
+
const archRadiusX = 10.75;
|
|
25
|
+
const archRadiusY = 10.75;
|
|
26
|
+
|
|
27
|
+
const easeIn = (t) => t * t * t;
|
|
28
|
+
const easeOut = (t) => 1 - Math.pow(1 - t, 3);
|
|
29
|
+
|
|
30
|
+
const topArchPath = (t) => {
|
|
31
|
+
const y = upperEndY + (lineY - upperEndY) * t;
|
|
32
|
+
const ry = Math.max(0.001, archRadiusY * (1 - t));
|
|
33
|
+
return 'M ' + leftX + ' ' + y + ' A ' + archRadiusX + ' ' + ry + ' 0 0 1 ' + rightX + ' ' + y;
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const bottomArchPath = (t) => {
|
|
37
|
+
const y = lowerEndY - (lowerEndY - lineY) * t;
|
|
38
|
+
const ry = Math.max(0.001, archRadiusY * (1 - t));
|
|
39
|
+
return 'M ' + rightX + ' ' + y + ' A ' + archRadiusX + ' ' + ry + ' 0 0 1 ' + leftX + ' ' + y;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
function animateMorph(from, to, durationMs, ease, currentRunId, onDone) {
|
|
43
|
+
const start = performance.now();
|
|
44
|
+
|
|
45
|
+
const tick = (now) => {
|
|
46
|
+
if (currentRunId !== runId) return;
|
|
47
|
+
const elapsed = now - start;
|
|
48
|
+
const t = Math.min(elapsed / durationMs, 1);
|
|
49
|
+
const eased = ease(t);
|
|
50
|
+
morphProgress = from + (to - from) * eased;
|
|
51
|
+
|
|
52
|
+
if (t < 1) {
|
|
53
|
+
frameId = requestAnimationFrame(tick);
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
onDone();
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
frameId = requestAnimationFrame(tick);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function handleMouseEnter() {
|
|
64
|
+
if (animating) return;
|
|
65
|
+
if (frameId !== -1) cancelAnimationFrame(frameId);
|
|
66
|
+
runId += 1;
|
|
67
|
+
const currentRunId = runId;
|
|
68
|
+
animating = true;
|
|
69
|
+
|
|
70
|
+
animateMorph(0, 1, closeDurationMs, easeIn, currentRunId, () => {
|
|
71
|
+
animateMorph(1, 0, openDurationMs, easeOut, currentRunId, () => {
|
|
72
|
+
if (currentRunId !== runId) return;
|
|
73
|
+
animating = false;
|
|
74
|
+
morphProgress = 0;
|
|
75
|
+
frameId = -1;
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
const topOutlineD = $derived(topArchPath(morphProgress));
|
|
81
|
+
const bottomOutlineD = $derived(bottomArchPath(morphProgress));
|
|
82
|
+
</script>
|
|
83
|
+
|
|
84
|
+
<div class={className} aria-label="eye" role="img" onmouseenter={handleMouseEnter}>
|
|
85
|
+
<svg
|
|
86
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
87
|
+
width={size}
|
|
88
|
+
height={size}
|
|
89
|
+
viewBox="0 0 24 24"
|
|
90
|
+
fill="none"
|
|
91
|
+
stroke={color}
|
|
92
|
+
stroke-width={strokeWidth}
|
|
93
|
+
stroke-linecap="round"
|
|
94
|
+
stroke-linejoin="round"
|
|
95
|
+
class="eye-icon"
|
|
96
|
+
class:animate={animateProp || animating}
|
|
97
|
+
>
|
|
98
|
+
<path d={topOutlineD} class="eye-outline" />
|
|
99
|
+
<path d={bottomOutlineD} class="eye-outline" />
|
|
100
|
+
|
|
101
|
+
<circle cx="12" cy="12" r="3" class="eye-pupil" />
|
|
102
|
+
</svg>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<style>
|
|
106
|
+
div {
|
|
107
|
+
display: inline-block;
|
|
108
|
+
}
|
|
109
|
+
.eye-icon {
|
|
110
|
+
overflow: visible;
|
|
111
|
+
}
|
|
112
|
+
.eye-pupil {
|
|
113
|
+
transform-origin: 12px 12px;
|
|
114
|
+
}
|
|
115
|
+
.eye-icon.animate .eye-pupil {
|
|
116
|
+
animation: blinkPupil 0.28s forwards;
|
|
117
|
+
}
|
|
118
|
+
@keyframes blinkPupil {
|
|
119
|
+
0% {
|
|
120
|
+
transform: scaleY(1);
|
|
121
|
+
animation-timing-function: ease-in;
|
|
122
|
+
}
|
|
123
|
+
50% {
|
|
124
|
+
transform: scaleY(0.042);
|
|
125
|
+
animation-timing-function: ease-out;
|
|
126
|
+
}
|
|
127
|
+
100% {
|
|
128
|
+
transform: scaleY(1);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
</style>
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { IconProps } from './types.js';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
color = 'currentColor',
|
|
6
|
+
size = 24,
|
|
7
|
+
strokeWidth = 2,
|
|
8
|
+
animate = false,
|
|
9
|
+
class: className = ''
|
|
10
|
+
}: IconProps = $props();
|
|
11
|
+
|
|
12
|
+
function handleMouseEnter() {
|
|
13
|
+
if (animate) return;
|
|
14
|
+
animate = true;
|
|
15
|
+
setTimeout(() => {
|
|
16
|
+
animate = false;
|
|
17
|
+
}, 800);
|
|
18
|
+
}
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<div class={className} aria-label="message-circle-x" role="img" onmouseenter={handleMouseEnter}>
|
|
22
|
+
<svg
|
|
23
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
24
|
+
width={size}
|
|
25
|
+
height={size}
|
|
26
|
+
viewBox="0 0 24 24"
|
|
27
|
+
fill="none"
|
|
28
|
+
stroke={color}
|
|
29
|
+
stroke-width={strokeWidth}
|
|
30
|
+
stroke-linecap="round"
|
|
31
|
+
stroke-linejoin="round"
|
|
32
|
+
class="message-circle-x-icon"
|
|
33
|
+
>
|
|
34
|
+
<g class="message-circle-x-group" class:animate>
|
|
35
|
+
<path
|
|
36
|
+
d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
|
|
37
|
+
/>
|
|
38
|
+
<path d="m15 9-6 6" class="diagonal-1" />
|
|
39
|
+
<path d="m9 9 6 6" class="diagonal-2" />
|
|
40
|
+
</g>
|
|
41
|
+
</svg>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<style>
|
|
45
|
+
div {
|
|
46
|
+
display: inline-block;
|
|
47
|
+
}
|
|
48
|
+
.message-circle-x-icon {
|
|
49
|
+
overflow: visible;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.message-circle-x-group {
|
|
53
|
+
transform-origin: bottom left;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.message-circle-x-group.animate {
|
|
57
|
+
animation: messageCircleAnimation 0.8s ease-in-out;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.diagonal-1,
|
|
61
|
+
.diagonal-2 {
|
|
62
|
+
stroke-dasharray: 8.5;
|
|
63
|
+
stroke-dashoffset: 0;
|
|
64
|
+
transition: stroke-dashoffset 0.15s ease-out;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.message-circle-x-group.animate .diagonal-1 {
|
|
68
|
+
opacity: 0;
|
|
69
|
+
animation: lineAnimation 0.3s ease-out forwards;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.message-circle-x-group.animate .diagonal-2 {
|
|
73
|
+
opacity: 0;
|
|
74
|
+
animation: lineAnimation 0.3s ease-out 0.25s forwards;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@keyframes messageCircleAnimation {
|
|
78
|
+
0% {
|
|
79
|
+
transform: rotate(0deg);
|
|
80
|
+
}
|
|
81
|
+
40% {
|
|
82
|
+
transform: rotate(8deg);
|
|
83
|
+
}
|
|
84
|
+
60% {
|
|
85
|
+
transform: rotate(-8deg);
|
|
86
|
+
}
|
|
87
|
+
80% {
|
|
88
|
+
transform: rotate(2deg);
|
|
89
|
+
}
|
|
90
|
+
100% {
|
|
91
|
+
transform: rotate(0deg);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
@keyframes lineAnimation {
|
|
96
|
+
0% {
|
|
97
|
+
opacity: 0;
|
|
98
|
+
stroke-dashoffset: 8.5;
|
|
99
|
+
}
|
|
100
|
+
15% {
|
|
101
|
+
opacity: 1;
|
|
102
|
+
stroke-dashoffset: 8.5;
|
|
103
|
+
}
|
|
104
|
+
100% {
|
|
105
|
+
opacity: 1;
|
|
106
|
+
stroke-dashoffset: 0;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
</style>
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { IconProps } from './types.js';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
color = 'currentColor',
|
|
6
|
+
size = 24,
|
|
7
|
+
strokeWidth = 2,
|
|
8
|
+
animate = false,
|
|
9
|
+
class: className = ''
|
|
10
|
+
}: IconProps = $props();
|
|
11
|
+
|
|
12
|
+
function handleMouseEnter() {
|
|
13
|
+
if (animate) return;
|
|
14
|
+
animate = true;
|
|
15
|
+
setTimeout(() => {
|
|
16
|
+
animate = false;
|
|
17
|
+
}, 800);
|
|
18
|
+
}
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<div class={className} aria-label="message-square-x" role="img" onmouseenter={handleMouseEnter}>
|
|
22
|
+
<svg
|
|
23
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
24
|
+
width={size}
|
|
25
|
+
height={size}
|
|
26
|
+
viewBox="0 0 24 24"
|
|
27
|
+
fill="none"
|
|
28
|
+
stroke={color}
|
|
29
|
+
stroke-width={strokeWidth}
|
|
30
|
+
stroke-linecap="round"
|
|
31
|
+
stroke-linejoin="round"
|
|
32
|
+
class="message-square-x-icon"
|
|
33
|
+
>
|
|
34
|
+
<g class="message-square-x-group" class:animate>
|
|
35
|
+
<path
|
|
36
|
+
d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
|
|
37
|
+
/>
|
|
38
|
+
<path d="m14.5 8.5-5 5" class="diagonal-1" />
|
|
39
|
+
<path d="m9.5 8.5 5 5" class="diagonal-2" />
|
|
40
|
+
</g>
|
|
41
|
+
</svg>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<style>
|
|
45
|
+
div {
|
|
46
|
+
display: inline-block;
|
|
47
|
+
}
|
|
48
|
+
.message-square-x-icon {
|
|
49
|
+
overflow: visible;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.message-square-x-group {
|
|
53
|
+
transform-origin: bottom left;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.message-square-x-group.animate {
|
|
57
|
+
animation: messageSquareAnimation 0.8s ease-in-out;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.diagonal-1,
|
|
61
|
+
.diagonal-2 {
|
|
62
|
+
stroke-dasharray: 7.1;
|
|
63
|
+
stroke-dashoffset: 0;
|
|
64
|
+
transition: stroke-dashoffset 0.15s ease-out;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.message-square-x-group.animate .diagonal-1 {
|
|
68
|
+
opacity: 0;
|
|
69
|
+
animation: lineAnimation 0.3s ease-out forwards;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.message-square-x-group.animate .diagonal-2 {
|
|
73
|
+
opacity: 0;
|
|
74
|
+
animation: lineAnimation 0.3s ease-out 0.25s forwards;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@keyframes messageSquareAnimation {
|
|
78
|
+
0% {
|
|
79
|
+
transform: rotate(0deg);
|
|
80
|
+
}
|
|
81
|
+
40% {
|
|
82
|
+
transform: rotate(8deg);
|
|
83
|
+
}
|
|
84
|
+
60% {
|
|
85
|
+
transform: rotate(-8deg);
|
|
86
|
+
}
|
|
87
|
+
80% {
|
|
88
|
+
transform: rotate(2deg);
|
|
89
|
+
}
|
|
90
|
+
100% {
|
|
91
|
+
transform: rotate(0deg);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
@keyframes lineAnimation {
|
|
96
|
+
0% {
|
|
97
|
+
opacity: 0;
|
|
98
|
+
stroke-dashoffset: 7.1;
|
|
99
|
+
}
|
|
100
|
+
15% {
|
|
101
|
+
opacity: 1;
|
|
102
|
+
stroke-dashoffset: 7.1;
|
|
103
|
+
}
|
|
104
|
+
100% {
|
|
105
|
+
opacity: 1;
|
|
106
|
+
stroke-dashoffset: 0;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
</style>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared replacement for icon source when inlining IconProps (e.g. standalone snippets, registry).
|
|
3
|
+
* Keep in sync with src/lib/icons/types.ts when IconProps changes.
|
|
4
|
+
*/
|
|
5
|
+
export const ICON_PROPS_IMPORT: RegExp;
|
|
6
|
+
export const INLINED_ICON_PROPS: "interface IconProps {\n\t\tcolor?: string;\n\t\tsize?: number;\n\t\tstrokeWidth?: number;\n\t\tanimate?: boolean;\n\t\tclass?: string;\n\t}\n\n";
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared replacement for icon source when inlining IconProps (e.g. standalone snippets, registry).
|
|
3
|
+
* Keep in sync with src/lib/icons/types.ts when IconProps changes.
|
|
4
|
+
*/
|
|
5
|
+
export const ICON_PROPS_IMPORT = /import type \{ IconProps \} from '\.\/types\.js';\n\n?/;
|
|
6
|
+
export const INLINED_ICON_PROPS = `interface IconProps {
|
|
7
|
+
color?: string;
|
|
8
|
+
size?: number;
|
|
9
|
+
strokeWidth?: number;
|
|
10
|
+
animate?: boolean;
|
|
11
|
+
class?: string;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
`;
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
animate = true;
|
|
15
15
|
setTimeout(() => {
|
|
16
16
|
animate = false;
|
|
17
|
-
},
|
|
17
|
+
}, 600);
|
|
18
18
|
}
|
|
19
19
|
</script>
|
|
20
20
|
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
class="user-check-icon"
|
|
33
33
|
class:animate
|
|
34
34
|
>
|
|
35
|
-
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
|
36
|
-
<circle cx="9" cy="7" r="4" />
|
|
35
|
+
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class="user-path" />
|
|
36
|
+
<circle cx="9" cy="7" r="4" class="user-circle" />
|
|
37
37
|
<polyline points="16 11 18 13 22 9" class="check-path" />
|
|
38
38
|
</svg>
|
|
39
39
|
</div>
|
|
@@ -55,6 +55,49 @@
|
|
|
55
55
|
.user-check-icon.animate .check-path {
|
|
56
56
|
animation: checkAnimation 0.5s ease-out backwards;
|
|
57
57
|
}
|
|
58
|
+
.user-path,
|
|
59
|
+
.user-circle {
|
|
60
|
+
transition: transform 0.6s ease-in-out;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.user-check-icon.animate .user-path {
|
|
64
|
+
animation: pathBounce 0.6s ease-in-out;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.user-check-icon.animate .user-circle {
|
|
68
|
+
animation: circleBounce 0.6s ease-in-out;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@keyframes pathBounce {
|
|
72
|
+
0% {
|
|
73
|
+
transform: translateY(0);
|
|
74
|
+
}
|
|
75
|
+
33% {
|
|
76
|
+
transform: translateY(2px);
|
|
77
|
+
}
|
|
78
|
+
66% {
|
|
79
|
+
transform: translateY(-2px);
|
|
80
|
+
}
|
|
81
|
+
100% {
|
|
82
|
+
transform: translateY(0);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@keyframes circleBounce {
|
|
87
|
+
0% {
|
|
88
|
+
transform: translateY(0);
|
|
89
|
+
}
|
|
90
|
+
33% {
|
|
91
|
+
transform: translateY(4px);
|
|
92
|
+
}
|
|
93
|
+
66% {
|
|
94
|
+
transform: translateY(-2px);
|
|
95
|
+
}
|
|
96
|
+
100% {
|
|
97
|
+
transform: translateY(0);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
58
101
|
@keyframes checkAnimation {
|
|
59
102
|
0% {
|
|
60
103
|
stroke-dashoffset: 9;
|
|
@@ -30,14 +30,15 @@
|
|
|
30
30
|
stroke-linecap="round"
|
|
31
31
|
stroke-linejoin="round"
|
|
32
32
|
class="user-pen-icon"
|
|
33
|
+
class:animate
|
|
33
34
|
>
|
|
34
|
-
<path d="M11.5 15H7a4 4 0 0 0-4 4v2" />
|
|
35
|
+
<path d="M11.5 15H7a4 4 0 0 0-4 4v2" class="user-path" />
|
|
35
36
|
<path
|
|
36
37
|
d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"
|
|
37
38
|
class="pen"
|
|
38
39
|
class:animate
|
|
39
40
|
/>
|
|
40
|
-
<circle cx="10" cy="7" r="4" />
|
|
41
|
+
<circle cx="10" cy="7" r="4" class="user-circle" />
|
|
41
42
|
</svg>
|
|
42
43
|
</div>
|
|
43
44
|
|
|
@@ -58,6 +59,49 @@
|
|
|
58
59
|
animation: penWiggle 0.5s ease-in-out 2;
|
|
59
60
|
}
|
|
60
61
|
|
|
62
|
+
.user-path,
|
|
63
|
+
.user-circle {
|
|
64
|
+
transition: transform 0.6s ease-in-out;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.user-pen-icon.animate .user-path {
|
|
68
|
+
animation: pathBounce 0.6s ease-in-out;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.user-pen-icon.animate .user-circle {
|
|
72
|
+
animation: circleBounce 0.6s ease-in-out;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@keyframes pathBounce {
|
|
76
|
+
0% {
|
|
77
|
+
transform: translateY(0);
|
|
78
|
+
}
|
|
79
|
+
33% {
|
|
80
|
+
transform: translateY(2px);
|
|
81
|
+
}
|
|
82
|
+
66% {
|
|
83
|
+
transform: translateY(-2px);
|
|
84
|
+
}
|
|
85
|
+
100% {
|
|
86
|
+
transform: translateY(0);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@keyframes circleBounce {
|
|
91
|
+
0% {
|
|
92
|
+
transform: translateY(0);
|
|
93
|
+
}
|
|
94
|
+
33% {
|
|
95
|
+
transform: translateY(4px);
|
|
96
|
+
}
|
|
97
|
+
66% {
|
|
98
|
+
transform: translateY(-2px);
|
|
99
|
+
}
|
|
100
|
+
100% {
|
|
101
|
+
transform: translateY(0);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
61
105
|
@keyframes penWiggle {
|
|
62
106
|
0%,
|
|
63
107
|
100% {
|
package/dist/index.d.ts
CHANGED
|
@@ -213,6 +213,7 @@ export { default as Eclipse } from './icons/eclipse.svelte';
|
|
|
213
213
|
export { default as EggOff } from './icons/egg-off.svelte';
|
|
214
214
|
export { default as Expand } from './icons/expand.svelte';
|
|
215
215
|
export { default as EyeOff } from './icons/eye-off.svelte';
|
|
216
|
+
export { default as Eye } from './icons/eye.svelte';
|
|
216
217
|
export { default as FileChartColumnIncreasing } from './icons/file-chart-column-increasing.svelte';
|
|
217
218
|
export { default as FileChartColumn } from './icons/file-chart-column.svelte';
|
|
218
219
|
export { default as FileChartLine } from './icons/file-chart-line.svelte';
|
|
@@ -310,6 +311,7 @@ export { default as MessageCircleMore } from './icons/message-circle-more.svelte
|
|
|
310
311
|
export { default as MessageCircleOff } from './icons/message-circle-off.svelte';
|
|
311
312
|
export { default as MessageCircleQuestionMark } from './icons/message-circle-question-mark.svelte';
|
|
312
313
|
export { default as MessageCircleWarning } from './icons/message-circle-warning.svelte';
|
|
314
|
+
export { default as MessageCircleX } from './icons/message-circle-x.svelte';
|
|
313
315
|
export { default as MessageCircle } from './icons/message-circle.svelte';
|
|
314
316
|
export { default as MessageSquareCode } from './icons/message-square-code.svelte';
|
|
315
317
|
export { default as MessageSquareDashed } from './icons/message-square-dashed.svelte';
|
|
@@ -319,6 +321,7 @@ export { default as MessageSquareMore } from './icons/message-square-more.svelte
|
|
|
319
321
|
export { default as MessageSquareOff } from './icons/message-square-off.svelte';
|
|
320
322
|
export { default as MessageSquareQuote } from './icons/message-square-quote.svelte';
|
|
321
323
|
export { default as MessageSquareWarning } from './icons/message-square-warning.svelte';
|
|
324
|
+
export { default as MessageSquareX } from './icons/message-square-x.svelte';
|
|
322
325
|
export { default as MessageSquare } from './icons/message-square.svelte';
|
|
323
326
|
export { default as MicOff } from './icons/mic-off.svelte';
|
|
324
327
|
export { default as MilkOff } from './icons/milk-off.svelte';
|
|
@@ -525,3 +528,5 @@ export { default as Wifi } from './icons/wifi.svelte';
|
|
|
525
528
|
export { default as WineOff } from './icons/wine-off.svelte';
|
|
526
529
|
export { default as X } from './icons/x.svelte';
|
|
527
530
|
export { default as ZapOff } from './icons/zap-off.svelte';
|
|
531
|
+
export type { IconProps } from './icons/types.js';
|
|
532
|
+
export type IconName = 'accessibility' | 'activity' | 'airplay' | 'alarm-clock-check' | 'alarm-clock-off' | 'alarm-clock' | 'align-horizontal-space-around' | 'align-vertical-space-around' | 'anvil' | 'archive' | 'arrow-big-down-dash' | 'arrow-big-down' | 'arrow-big-left-dash' | 'arrow-big-left' | 'arrow-big-right-dash' | 'arrow-big-right' | 'arrow-big-up-dash' | 'arrow-big-up' | 'arrow-down-0-1' | 'arrow-down-1-0' | 'arrow-down-a-z' | 'arrow-down-left' | 'arrow-down-right' | 'arrow-down-z-a' | 'arrow-down' | 'arrow-left-right' | 'arrow-left' | 'arrow-right-left' | 'arrow-right' | 'arrow-up-0-1' | 'arrow-up-1-0' | 'arrow-up-a-z' | 'arrow-up-left' | 'arrow-up-right' | 'arrow-up-z-a' | 'arrow-up' | 'audio-lines' | 'award' | 'axe' | 'axis-3d' | 'badge-alert' | 'badge-check' | 'badge-question-mark' | 'battery-charging' | 'battery-full' | 'battery-low' | 'battery-medium' | 'battery-warning' | 'battery' | 'bean-off' | 'beer-off' | 'bell-off' | 'bell-ring' | 'bell' | 'between-horizontal-end' | 'between-horizontal-start' | 'between-vertical-end' | 'between-vertical-start' | 'binary' | 'blend' | 'blocks' | 'bluetooth-off' | 'bold' | 'bolt' | 'bone' | 'book-a' | 'book-audio' | 'book-check' | 'book-dashed' | 'book-down' | 'book-headphones' | 'book-heart' | 'book-image' | 'book-key' | 'book-lock' | 'book-marked' | 'book-minus' | 'book-open-check' | 'book-open-text' | 'book-plus' | 'book-text' | 'book-type' | 'book-up-2' | 'book-up' | 'book-user' | 'book-x' | 'book' | 'bookmark-check' | 'bookmark-minus' | 'bookmark-plus' | 'bookmark-x' | 'bookmark' | 'bot-off' | 'bot' | 'boxes' | 'brain-cog' | 'briefcase-business' | 'briefcase-conveyor-belt' | 'briefcase-medical' | 'briefcase' | 'brush-cleaning' | 'brush' | 'bug-off' | 'calendar-check-2' | 'calendar-check' | 'calendar-cog' | 'calendar-days' | 'calendar-off' | 'calendar-sync' | 'camera-off' | 'candy-off' | 'captions-off' | 'cast' | 'cctv' | 'chart-bar-decreasing' | 'chart-bar-increasing' | 'chart-bar' | 'chart-column-decreasing' | 'chart-column-increasing' | 'chart-column' | 'chart-gantt' | 'chart-line' | 'chart-no-axes-column-decreasing' | 'chart-no-axes-column-increasing' | 'chart-no-axes-column' | 'chart-no-axes-combined' | 'chart-no-axes-gantt' | 'chart-pie' | 'chart-scatter' | 'chart-spline' | 'check-check' | 'check' | 'cherry' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-down-up' | 'chevrons-down' | 'chevrons-left-right' | 'chevrons-left' | 'chevrons-right-left' | 'chevrons-right' | 'chevrons-up-down' | 'chevrons-up' | 'cigarette-off' | 'circle-alert' | 'circle-arrow-down' | 'circle-arrow-left' | 'circle-arrow-out-down-left' | 'circle-arrow-out-down-right' | 'circle-arrow-out-up-left' | 'circle-arrow-out-up-right' | 'circle-arrow-right' | 'circle-arrow-up' | 'circle-check-big' | 'circle-check' | 'circle-chevron-down' | 'circle-chevron-left' | 'circle-chevron-right' | 'circle-chevron-up' | 'circle-off' | 'circle-parking-off' | 'circle-plus' | 'circle-question-mark' | 'clapperboard' | 'clipboard-check' | 'clipboard-list' | 'clipboard-pen-line' | 'clipboard-pen' | 'clipboard-x' | 'clipboard' | 'clock-1' | 'clock-10' | 'clock-11' | 'clock-12' | 'clock-2' | 'clock-3' | 'clock-4' | 'clock-5' | 'clock-6' | 'clock-7' | 'clock-8' | 'clock-9' | 'clock' | 'cloud-cog' | 'cloud-download' | 'cloud-moon' | 'cloud-off' | 'cloud-upload' | 'cog' | 'compass' | 'contrast' | 'copy-check' | 'copy' | 'cpu' | 'crop' | 'diamond-plus' | 'dice-1' | 'dice-2' | 'dice-3' | 'dice-4' | 'dice-5' | 'dice-6' | 'diff' | 'disc-3' | 'dna-off' | 'download' | 'droplet-off' | 'drum' | 'ear-off' | 'eclipse' | 'egg-off' | 'expand' | 'eye-off' | 'eye' | 'file-chart-column-increasing' | 'file-chart-column' | 'file-chart-line' | 'file-check-corner' | 'file-check' | 'file-cog' | 'file-down' | 'file-exclamation-point' | 'file-minus' | 'file-pen-line' | 'file-pen' | 'file-plus' | 'file-question-mark' | 'file-sliders' | 'file-stack' | 'file-terminal' | 'file-up' | 'fish-off' | 'flag-off' | 'flashlight-off' | 'flask-conical-off' | 'folder-check' | 'folder-cog' | 'folder-down' | 'folder-kanban' | 'folder-pen' | 'folder-plus' | 'folder-sync' | 'folder-up' | 'folder-x' | 'frame' | 'funnel-x' | 'gallery-horizontal-end' | 'gallery-horizontal' | 'gallery-thumbnails' | 'gallery-vertical-end' | 'gallery-vertical' | 'gauge' | 'gavel' | 'grid-2x2-check' | 'grip-horizontal' | 'grip-vertical' | 'grip' | 'hammer' | 'hand-coins' | 'hand-heart' | 'hard-drive-download' | 'hard-drive-upload' | 'headphone-off' | 'heart-off' | 'heart' | 'history' | 'hop-off' | 'house-wifi' | 'house' | 'image-down' | 'image-off' | 'image-up' | 'images' | 'infinity' | 'kanban' | 'key-round' | 'key-square' | 'key' | 'keyboard-off' | 'keyboard' | 'landmark' | 'layers' | 'layout-dashboard' | 'layout-grid' | 'layout-panel-left' | 'layout-panel-top' | 'layout-template' | 'lightbulb-off' | 'lightbulb' | 'link-2-off' | 'list-check' | 'list-checks' | 'list-restart' | 'list-todo' | 'loader-pinwheel' | 'locate-off' | 'log-out' | 'mail-check' | 'map-pin-check-inside' | 'map-pin-check' | 'map-pin-off' | 'maximize-2' | 'maximize' | 'megaphone-off' | 'message-circle-code' | 'message-circle-dashed' | 'message-circle-heart' | 'message-circle-more' | 'message-circle-off' | 'message-circle-question-mark' | 'message-circle-warning' | 'message-circle-x' | 'message-circle' | 'message-square-code' | 'message-square-dashed' | 'message-square-dot' | 'message-square-heart' | 'message-square-more' | 'message-square-off' | 'message-square-quote' | 'message-square-warning' | 'message-square-x' | 'message-square' | 'mic-off' | 'milk-off' | 'minimize-2' | 'minimize' | 'minus' | 'monitor-check' | 'monitor-cog' | 'monitor-down' | 'monitor-off' | 'monitor-up' | 'mouse-off' | 'mouse-pointer-2' | 'mouse-pointer' | 'move-diagonal-2' | 'move-diagonal' | 'move-down-left' | 'move-down-right' | 'move-down' | 'move-horizontal' | 'move-left' | 'move-right' | 'move-up-left' | 'move-up-right' | 'move-up' | 'move-vertical' | 'navigation-2-off' | 'navigation-off' | 'nfc' | 'notebook-pen' | 'nut-off' | 'octagon-alert' | 'orbit' | 'package-check' | 'paintbrush' | 'panel-bottom-close' | 'panel-bottom-open' | 'panel-bottom' | 'panel-left-close' | 'panel-left-open' | 'panel-left' | 'panel-right-close' | 'panel-right-open' | 'panel-right' | 'panel-top-close' | 'panel-top-open' | 'panel-top' | 'paperclip' | 'pen-line' | 'pen-off' | 'pen' | 'pencil-line' | 'pencil-off' | 'pencil' | 'phone-off' | 'pickaxe' | 'pin-off' | 'plane' | 'play' | 'plus' | 'pointer-off' | 'power-off' | 'printer-check' | 'rabbit' | 'radar' | 'radio-tower' | 'radio' | 'rainbow' | 'redo-dot' | 'redo' | 'refresh-ccw-dot' | 'refresh-ccw' | 'refresh-cw-off' | 'refresh-cw' | 'rocket' | 'rocking-chair' | 'rotate-ccw-key' | 'rotate-ccw' | 'rotate-cw' | 'route-off' | 'route' | 'rss' | 'satellite-dish' | 'save-off' | 'scan-text' | 'scissors' | 'search-check' | 'search' | 'send-horizontal' | 'send' | 'server-cog' | 'server-off' | 'settings' | 'shield-alert' | 'shield-check' | 'shield-off' | 'shield-plus' | 'shield-question-mark' | 'ship-wheel' | 'ship' | 'shopping-cart' | 'shovel' | 'shower-head' | 'shrink' | 'signal-high' | 'signal-low' | 'signal-medium' | 'signal-zero' | 'signal' | 'signature' | 'sliders-horizontal' | 'sliders-vertical' | 'smartphone-nfc' | 'snowflake' | 'sparkle' | 'sparkles' | 'speech' | 'spell-check' | 'square-arrow-down-left' | 'square-arrow-down-right' | 'square-arrow-down' | 'square-arrow-left' | 'square-arrow-out-down-left' | 'square-arrow-out-down-right' | 'square-arrow-out-up-left' | 'square-arrow-out-up-right' | 'square-arrow-right' | 'square-arrow-up-left' | 'square-arrow-up-right' | 'square-arrow-up' | 'square-chart-gantt' | 'square-check-big' | 'square-check' | 'square-chevron-down' | 'square-chevron-left' | 'square-chevron-right' | 'square-chevron-up' | 'square-dashed-kanban' | 'square-kanban' | 'square-parking-off' | 'square-pen' | 'square-plus' | 'square-scissors' | 'square-stack' | 'square-terminal' | 'star-off' | 'star' | 'sun' | 'sword' | 'tag' | 'telescope' | 'terminal' | 'text-align-center' | 'text-cursor-input' | 'text-cursor' | 'text-search' | 'thermometer' | 'thumbs-down' | 'thumbs-up' | 'ticket-check' | 'timer-off' | 'timer' | 'toggle-left' | 'toggle-right' | 'tornado' | 'touchpad-off' | 'trash-2' | 'trash' | 'triangle-alert' | 'umbrella-off' | 'undo-dot' | 'undo' | 'unfold-horizontal' | 'unfold-vertical' | 'unplug' | 'upload' | 'user-check' | 'user-cog' | 'user-pen' | 'user-round-check' | 'user-round-cog' | 'user-round-pen' | 'user-round' | 'user-x' | 'user' | 'users-round' | 'users' | 'vault' | 'vibrate-off' | 'vibrate' | 'video-off' | 'volume-off' | 'vote' | 'washing-machine' | 'waves' | 'webhook-off' | 'wheat-off' | 'wifi-high' | 'wifi-low' | 'wifi-off' | 'wifi-pen' | 'wifi-zero' | 'wifi' | 'wine-off' | 'x' | 'zap-off';
|
package/dist/index.js
CHANGED
|
@@ -213,6 +213,7 @@ export { default as Eclipse } from './icons/eclipse.svelte';
|
|
|
213
213
|
export { default as EggOff } from './icons/egg-off.svelte';
|
|
214
214
|
export { default as Expand } from './icons/expand.svelte';
|
|
215
215
|
export { default as EyeOff } from './icons/eye-off.svelte';
|
|
216
|
+
export { default as Eye } from './icons/eye.svelte';
|
|
216
217
|
export { default as FileChartColumnIncreasing } from './icons/file-chart-column-increasing.svelte';
|
|
217
218
|
export { default as FileChartColumn } from './icons/file-chart-column.svelte';
|
|
218
219
|
export { default as FileChartLine } from './icons/file-chart-line.svelte';
|
|
@@ -310,6 +311,7 @@ export { default as MessageCircleMore } from './icons/message-circle-more.svelte
|
|
|
310
311
|
export { default as MessageCircleOff } from './icons/message-circle-off.svelte';
|
|
311
312
|
export { default as MessageCircleQuestionMark } from './icons/message-circle-question-mark.svelte';
|
|
312
313
|
export { default as MessageCircleWarning } from './icons/message-circle-warning.svelte';
|
|
314
|
+
export { default as MessageCircleX } from './icons/message-circle-x.svelte';
|
|
313
315
|
export { default as MessageCircle } from './icons/message-circle.svelte';
|
|
314
316
|
export { default as MessageSquareCode } from './icons/message-square-code.svelte';
|
|
315
317
|
export { default as MessageSquareDashed } from './icons/message-square-dashed.svelte';
|
|
@@ -319,6 +321,7 @@ export { default as MessageSquareMore } from './icons/message-square-more.svelte
|
|
|
319
321
|
export { default as MessageSquareOff } from './icons/message-square-off.svelte';
|
|
320
322
|
export { default as MessageSquareQuote } from './icons/message-square-quote.svelte';
|
|
321
323
|
export { default as MessageSquareWarning } from './icons/message-square-warning.svelte';
|
|
324
|
+
export { default as MessageSquareX } from './icons/message-square-x.svelte';
|
|
322
325
|
export { default as MessageSquare } from './icons/message-square.svelte';
|
|
323
326
|
export { default as MicOff } from './icons/mic-off.svelte';
|
|
324
327
|
export { default as MilkOff } from './icons/milk-off.svelte';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jis3r/icons",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.0",
|
|
4
4
|
"description": "beautifully crafted, moving icons. for svelte.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svelte",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"test": "npm run test:unit -- --run",
|
|
29
29
|
"index": "tsx scripts/indexIcons.ts && prettier --write src/lib-docs/icons-meta.ts",
|
|
30
30
|
"reexport": "tsx scripts/generateIconExports.ts",
|
|
31
|
-
"registry:build": "node scripts/updateRegistry.js && node scripts/buildRegistry.js",
|
|
31
|
+
"registry:build": "npm run reexport && node scripts/updateRegistry.js && node scripts/buildRegistry.js",
|
|
32
32
|
"prep": "npm run index && npm run reexport && npm run registry:build && npm run build && npm run package && npm run format"
|
|
33
33
|
},
|
|
34
34
|
"files": [
|
|
@@ -66,6 +66,7 @@
|
|
|
66
66
|
"eslint": "^9.7.0",
|
|
67
67
|
"eslint-config-prettier": "^10.1.1",
|
|
68
68
|
"eslint-plugin-svelte": "^3.5.1",
|
|
69
|
+
"geist-svelte": "^1.0.0",
|
|
69
70
|
"globals": "^16.0.0",
|
|
70
71
|
"iflog": "^0.3.0",
|
|
71
72
|
"mode-watcher": "^0.5.1",
|
|
@@ -92,4 +93,4 @@
|
|
|
92
93
|
"overrides": {
|
|
93
94
|
"cookie": "0.7.0"
|
|
94
95
|
}
|
|
95
|
-
}
|
|
96
|
+
}
|