@jis3r/icons 1.7.0 → 1.9.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/clipboard-list.svelte +164 -0
- package/dist/icons/clipboard-list.svelte.d.ts +19 -0
- package/dist/icons/clipboard.svelte +102 -0
- package/dist/icons/clipboard.svelte.d.ts +19 -0
- package/dist/icons/index.js +14 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/package.json +2 -2
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
/**
|
|
3
|
+
* @typedef {Object} Props
|
|
4
|
+
* @property {string} [color]
|
|
5
|
+
* @property {number} [size]
|
|
6
|
+
* @property {number} [strokeWidth]
|
|
7
|
+
* @property {boolean} [isHovered]
|
|
8
|
+
* @property {string} [class]
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/** @type {Props} */
|
|
12
|
+
let {
|
|
13
|
+
color = 'currentColor',
|
|
14
|
+
size = 28,
|
|
15
|
+
strokeWidth = 2,
|
|
16
|
+
isHovered = false,
|
|
17
|
+
class: className = ''
|
|
18
|
+
} = $props();
|
|
19
|
+
|
|
20
|
+
function handleMouseEnter() {
|
|
21
|
+
isHovered = true;
|
|
22
|
+
|
|
23
|
+
setTimeout(() => {
|
|
24
|
+
isHovered = false;
|
|
25
|
+
}, 700);
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<div class={className} aria-label="clipboard-list" role="img" onmouseenter={handleMouseEnter}>
|
|
30
|
+
<svg
|
|
31
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
32
|
+
width={size}
|
|
33
|
+
height={size}
|
|
34
|
+
viewBox="0 0 24 24"
|
|
35
|
+
fill="none"
|
|
36
|
+
stroke={color}
|
|
37
|
+
stroke-width={strokeWidth}
|
|
38
|
+
stroke-linecap="round"
|
|
39
|
+
stroke-linejoin="round"
|
|
40
|
+
class="clipboard-list-icon"
|
|
41
|
+
class:animate={isHovered}
|
|
42
|
+
>
|
|
43
|
+
<rect width="8" height="4" x="8" y="2" rx="1" ry="1" class="clip" />
|
|
44
|
+
<path
|
|
45
|
+
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
|
46
|
+
class="board"
|
|
47
|
+
/>
|
|
48
|
+
<path d="M12 11h4" class="list-item-1 list-item" />
|
|
49
|
+
<path d="M12 16h4" class="list-item-2 list-item" />
|
|
50
|
+
<path d="M8 11h.01" class="bullet bullet-1" />
|
|
51
|
+
<path d="M8 16h.01" class="bullet bullet-2" />
|
|
52
|
+
</svg>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<style>
|
|
56
|
+
div {
|
|
57
|
+
display: inline-block;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.clipboard-list-icon {
|
|
61
|
+
overflow: visible;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.clip,
|
|
65
|
+
.board {
|
|
66
|
+
transition: transform 0.3s ease;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.list-item {
|
|
70
|
+
opacity: 1;
|
|
71
|
+
transition: opacity 0.3s ease;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.bullet {
|
|
75
|
+
opacity: 1;
|
|
76
|
+
transition: opacity 0.3s ease;
|
|
77
|
+
transform-origin: center;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.clipboard-list-icon.animate .list-item,
|
|
81
|
+
.clipboard-list-icon.animate .bullet {
|
|
82
|
+
opacity: 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.clipboard-list-icon.animate .clip {
|
|
86
|
+
animation: clipBounce 0.5s ease-in-out;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.clipboard-list-icon.animate .board {
|
|
90
|
+
animation: boardShake 0.5s ease-in-out;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.clipboard-list-icon.animate .list-item-1 {
|
|
94
|
+
animation: lineFadeIn 0.2s ease-out forwards;
|
|
95
|
+
animation-delay: 0.15s;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.clipboard-list-icon.animate .bullet-1 {
|
|
99
|
+
animation: bulletFadeIn 0.2s ease-out forwards;
|
|
100
|
+
animation-delay: 0.2s;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.clipboard-list-icon.animate .list-item-2 {
|
|
104
|
+
animation: lineFadeIn 0.2s ease-out forwards;
|
|
105
|
+
animation-delay: 0.3s;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.clipboard-list-icon.animate .bullet-2 {
|
|
109
|
+
animation: bulletFadeIn 0.2s ease-out forwards;
|
|
110
|
+
animation-delay: 0.35s;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@keyframes clipBounce {
|
|
114
|
+
0% {
|
|
115
|
+
transform: translateY(0);
|
|
116
|
+
}
|
|
117
|
+
25% {
|
|
118
|
+
transform: translateY(-2px);
|
|
119
|
+
}
|
|
120
|
+
50% {
|
|
121
|
+
transform: translateY(1px);
|
|
122
|
+
}
|
|
123
|
+
100% {
|
|
124
|
+
transform: translateY(0);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@keyframes boardShake {
|
|
129
|
+
0% {
|
|
130
|
+
transform: rotate(0deg);
|
|
131
|
+
}
|
|
132
|
+
25% {
|
|
133
|
+
transform: rotate(-1deg);
|
|
134
|
+
}
|
|
135
|
+
75% {
|
|
136
|
+
transform: rotate(1deg);
|
|
137
|
+
}
|
|
138
|
+
100% {
|
|
139
|
+
transform: rotate(0deg);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@keyframes bulletFadeIn {
|
|
144
|
+
from {
|
|
145
|
+
opacity: 0;
|
|
146
|
+
transform: translateX(-6px) scale(0.8);
|
|
147
|
+
}
|
|
148
|
+
to {
|
|
149
|
+
opacity: 1;
|
|
150
|
+
transform: translateX(0) scale(1);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
@keyframes lineFadeIn {
|
|
155
|
+
from {
|
|
156
|
+
opacity: 0;
|
|
157
|
+
transform: translateX(-8px);
|
|
158
|
+
}
|
|
159
|
+
to {
|
|
160
|
+
opacity: 1;
|
|
161
|
+
transform: translateX(0);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
</style>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export default ClipboardList;
|
|
2
|
+
type ClipboardList = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const ClipboardList: import("svelte").Component<{
|
|
7
|
+
color?: string;
|
|
8
|
+
size?: number;
|
|
9
|
+
strokeWidth?: number;
|
|
10
|
+
isHovered?: boolean;
|
|
11
|
+
class?: string;
|
|
12
|
+
}, {}, "">;
|
|
13
|
+
type Props = {
|
|
14
|
+
color?: string;
|
|
15
|
+
size?: number;
|
|
16
|
+
strokeWidth?: number;
|
|
17
|
+
isHovered?: boolean;
|
|
18
|
+
class?: string;
|
|
19
|
+
};
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
/**
|
|
3
|
+
* @typedef {Object} Props
|
|
4
|
+
* @property {string} [color]
|
|
5
|
+
* @property {number} [size]
|
|
6
|
+
* @property {number} [strokeWidth]
|
|
7
|
+
* @property {boolean} [isHovered]
|
|
8
|
+
* @property {string} [class]
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/** @type {Props} */
|
|
12
|
+
let {
|
|
13
|
+
color = 'currentColor',
|
|
14
|
+
size = 24,
|
|
15
|
+
strokeWidth = 2,
|
|
16
|
+
isHovered = false,
|
|
17
|
+
class: className = ''
|
|
18
|
+
} = $props();
|
|
19
|
+
|
|
20
|
+
function handleMouseEnter() {
|
|
21
|
+
isHovered = true;
|
|
22
|
+
|
|
23
|
+
setTimeout(() => {
|
|
24
|
+
isHovered = false;
|
|
25
|
+
}, 700);
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<div class={className} aria-label="clipboard" role="img" onmouseenter={handleMouseEnter}>
|
|
30
|
+
<svg
|
|
31
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
32
|
+
width={size}
|
|
33
|
+
height={size}
|
|
34
|
+
viewBox="0 0 24 24"
|
|
35
|
+
fill="none"
|
|
36
|
+
stroke={color}
|
|
37
|
+
stroke-width={strokeWidth}
|
|
38
|
+
stroke-linecap="round"
|
|
39
|
+
stroke-linejoin="round"
|
|
40
|
+
class="clipboard-icon"
|
|
41
|
+
class:animate={isHovered}
|
|
42
|
+
>
|
|
43
|
+
<rect width="8" height="4" x="8" y="2" rx="1" ry="1" class="clip" />
|
|
44
|
+
<path
|
|
45
|
+
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
|
46
|
+
class="board"
|
|
47
|
+
/>
|
|
48
|
+
</svg>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<style>
|
|
52
|
+
div {
|
|
53
|
+
display: inline-block;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.clipboard-icon {
|
|
57
|
+
overflow: visible;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.clip,
|
|
61
|
+
.board {
|
|
62
|
+
transition: transform 0.3s ease;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.clipboard-icon.animate .clip {
|
|
66
|
+
animation: clipBounce 0.5s ease-in-out;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.clipboard-icon.animate .board {
|
|
70
|
+
animation: boardShake 0.5s ease-in-out;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@keyframes clipBounce {
|
|
74
|
+
0% {
|
|
75
|
+
transform: translateY(0);
|
|
76
|
+
}
|
|
77
|
+
25% {
|
|
78
|
+
transform: translateY(-2px);
|
|
79
|
+
}
|
|
80
|
+
50% {
|
|
81
|
+
transform: translateY(1px);
|
|
82
|
+
}
|
|
83
|
+
100% {
|
|
84
|
+
transform: translateY(0);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
@keyframes boardShake {
|
|
89
|
+
0% {
|
|
90
|
+
transform: rotate(0deg);
|
|
91
|
+
}
|
|
92
|
+
25% {
|
|
93
|
+
transform: rotate(-1deg);
|
|
94
|
+
}
|
|
95
|
+
75% {
|
|
96
|
+
transform: rotate(1deg);
|
|
97
|
+
}
|
|
98
|
+
100% {
|
|
99
|
+
transform: rotate(0deg);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
</style>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export default Clipboard;
|
|
2
|
+
type Clipboard = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const Clipboard: import("svelte").Component<{
|
|
7
|
+
color?: string;
|
|
8
|
+
size?: number;
|
|
9
|
+
strokeWidth?: number;
|
|
10
|
+
isHovered?: boolean;
|
|
11
|
+
class?: string;
|
|
12
|
+
}, {}, "">;
|
|
13
|
+
type Props = {
|
|
14
|
+
color?: string;
|
|
15
|
+
size?: number;
|
|
16
|
+
strokeWidth?: number;
|
|
17
|
+
isHovered?: boolean;
|
|
18
|
+
class?: string;
|
|
19
|
+
};
|
package/dist/icons/index.js
CHANGED
|
@@ -158,7 +158,9 @@ import circleParkingOff from './circle-parking-off.svelte';
|
|
|
158
158
|
import circlePlus from './circle-plus.svelte';
|
|
159
159
|
import circleQuestionMark from './circle-question-mark.svelte';
|
|
160
160
|
import clapperboard from './clapperboard.svelte';
|
|
161
|
+
import clipboard from './clipboard.svelte';
|
|
161
162
|
import clipboardCheck from './clipboard-check.svelte';
|
|
163
|
+
import clipboardList from './clipboard-list.svelte';
|
|
162
164
|
import clipboardPen from './clipboard-pen.svelte';
|
|
163
165
|
import clipboardPenLine from './clipboard-pen-line.svelte';
|
|
164
166
|
import clock from './clock.svelte';
|
|
@@ -2417,12 +2419,24 @@ let ICONS_LIST = [
|
|
|
2417
2419
|
],
|
|
2418
2420
|
categories: ['multimedia']
|
|
2419
2421
|
},
|
|
2422
|
+
{
|
|
2423
|
+
name: 'clipboard',
|
|
2424
|
+
icon: clipboard,
|
|
2425
|
+
tags: ['copy', 'paste'],
|
|
2426
|
+
categories: ['text']
|
|
2427
|
+
},
|
|
2420
2428
|
{
|
|
2421
2429
|
name: 'clipboard-check',
|
|
2422
2430
|
icon: clipboardCheck,
|
|
2423
2431
|
tags: ['copied', 'pasted', 'done', 'todo', 'tick', 'complete', 'task'],
|
|
2424
2432
|
categories: ['text']
|
|
2425
2433
|
},
|
|
2434
|
+
{
|
|
2435
|
+
name: 'clipboard-list',
|
|
2436
|
+
icon: clipboardList,
|
|
2437
|
+
tags: ['copy', 'paste', 'tasks'],
|
|
2438
|
+
categories: ['text']
|
|
2439
|
+
},
|
|
2426
2440
|
{
|
|
2427
2441
|
name: 'clipboard-pen',
|
|
2428
2442
|
icon: clipboardPen,
|
package/dist/index.d.ts
CHANGED
|
@@ -159,8 +159,10 @@ export { default as CirclePlus } from "./icons/circle-plus.svelte";
|
|
|
159
159
|
export { default as CircleQuestionMark } from "./icons/circle-question-mark.svelte";
|
|
160
160
|
export { default as Clapperboard } from "./icons/clapperboard.svelte";
|
|
161
161
|
export { default as ClipboardCheck } from "./icons/clipboard-check.svelte";
|
|
162
|
+
export { default as ClipboardList } from "./icons/clipboard-list.svelte";
|
|
162
163
|
export { default as ClipboardPenLine } from "./icons/clipboard-pen-line.svelte";
|
|
163
164
|
export { default as ClipboardPen } from "./icons/clipboard-pen.svelte";
|
|
165
|
+
export { default as Clipboard } from "./icons/clipboard.svelte";
|
|
164
166
|
export { default as Clock1 } from "./icons/clock-1.svelte";
|
|
165
167
|
export { default as Clock10 } from "./icons/clock-10.svelte";
|
|
166
168
|
export { default as Clock11 } from "./icons/clock-11.svelte";
|
package/dist/index.js
CHANGED
|
@@ -159,8 +159,10 @@ export { default as CirclePlus } from './icons/circle-plus.svelte';
|
|
|
159
159
|
export { default as CircleQuestionMark } from './icons/circle-question-mark.svelte';
|
|
160
160
|
export { default as Clapperboard } from './icons/clapperboard.svelte';
|
|
161
161
|
export { default as ClipboardCheck } from './icons/clipboard-check.svelte';
|
|
162
|
+
export { default as ClipboardList } from './icons/clipboard-list.svelte';
|
|
162
163
|
export { default as ClipboardPenLine } from './icons/clipboard-pen-line.svelte';
|
|
163
164
|
export { default as ClipboardPen } from './icons/clipboard-pen.svelte';
|
|
165
|
+
export { default as Clipboard } from './icons/clipboard.svelte';
|
|
164
166
|
export { default as Clock1 } from './icons/clock-1.svelte';
|
|
165
167
|
export { default as Clock10 } from './icons/clock-10.svelte';
|
|
166
168
|
export { default as Clock11 } from './icons/clock-11.svelte';
|
package/package.json
CHANGED