@jis3r/icons 1.6.0 → 1.8.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.
Files changed (10) hide show
  1. package/dist/icons/clipboard-list.svelte +164 -0
  2. package/dist/icons/clipboard-list.svelte.d.ts +19 -0
  3. package/dist/icons/clipboard.svelte +102 -0
  4. package/dist/icons/clipboard.svelte.d.ts +19 -0
  5. package/dist/icons/file-sliders.svelte +75 -0
  6. package/dist/icons/file-sliders.svelte.d.ts +19 -0
  7. package/dist/icons/index.js +53 -0
  8. package/dist/index.d.ts +3 -0
  9. package/dist/index.js +3 -0
  10. package/package.json +1 -1
package/dist/icons/clipboard-list.svelte ADDED
@@ -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>
package/dist/icons/clipboard-list.svelte.d.ts ADDED
@@ -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
+ };
package/dist/icons/clipboard.svelte ADDED
@@ -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>
package/dist/icons/clipboard.svelte.d.ts ADDED
@@ -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/file-sliders.svelte ADDED
@@ -0,0 +1,75 @@
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
+
24
+ function handleMouseLeave() {
25
+ isHovered = false;
26
+ }
27
+ </script>
28
+
29
+ <div
30
+ class={className}
31
+ aria-label="file-sliders"
32
+ role="img"
33
+ onmouseenter={handleMouseEnter}
34
+ onmouseleave={handleMouseLeave}
35
+ >
36
+ <svg
37
+ xmlns="http://www.w3.org/2000/svg"
38
+ width="24"
39
+ height="24"
40
+ viewBox="0 0 24 24"
41
+ fill="none"
42
+ stroke="currentColor"
43
+ stroke-width="2"
44
+ stroke-linecap="round"
45
+ stroke-linejoin="round"
46
+ class="lucide lucide-file-sliders-icon lucide-file-sliders"
47
+ >
48
+ <path
49
+ d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
50
+ />
51
+ <path d="M14 2v5a1 1 0 0 0 1 1h5" />
52
+ <path d="M8 12h8" />
53
+ <path d="M10 11v2" class:animate-line1={isHovered} />
54
+ <path d="M8 17h8" />
55
+ <path d="M14 16v2" class:animate-line2={isHovered} />
56
+ </svg>
57
+ </div>
58
+
59
+ <style>
60
+ div {
61
+ display: inline-block;
62
+ }
63
+
64
+ path {
65
+ transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
66
+ }
67
+
68
+ .animate-line1 {
69
+ transform: translateX(4px);
70
+ }
71
+
72
+ .animate-line2 {
73
+ transform: translateX(-4px);
74
+ }
75
+ </style>
package/dist/icons/file-sliders.svelte.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ export default FileSliders;
2
+ type FileSliders = {
3
+ $on?(type: string, callback: (e: any) => void): () => void;
4
+ $set?(props: Partial<Props>): void;
5
+ };
6
+ declare const FileSliders: 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';
@@ -216,6 +218,7 @@ import filePen from './file-pen.svelte';
216
218
  import filePenLine from './file-pen-line.svelte';
217
219
  import filePlus from './file-plus.svelte';
218
220
  import fileQuestionMark from './file-question-mark.svelte';
221
+ import fileSliders from './file-sliders.svelte';
219
222
  import fileStack from './file-stack.svelte';
220
223
  import fileTerminal from './file-terminal.svelte';
221
224
  import fileUp from './file-up.svelte';
@@ -2416,12 +2419,24 @@ let ICONS_LIST = [
2416
2419
  ],
2417
2420
  categories: ['multimedia']
2418
2421
  },
2422
+ {
2423
+ name: 'clipboard',
2424
+ icon: clipboard,
2425
+ tags: ['copy', 'paste'],
2426
+ categories: ['text']
2427
+ },
2419
2428
  {
2420
2429
  name: 'clipboard-check',
2421
2430
  icon: clipboardCheck,
2422
2431
  tags: ['copied', 'pasted', 'done', 'todo', 'tick', 'complete', 'task'],
2423
2432
  categories: ['text']
2424
2433
  },
2434
+ {
2435
+ name: 'clipboard-list',
2436
+ icon: clipboardList,
2437
+ tags: ['copy', 'paste', 'tasks'],
2438
+ categories: ['text']
2439
+ },
2425
2440
  {
2426
2441
  name: 'clipboard-pen',
2427
2442
  icon: clipboardPen,
@@ -2872,6 +2887,44 @@ let ICONS_LIST = [
2872
2887
  tags: ['readme', 'help', 'question'],
2873
2888
  categories: ['files']
2874
2889
  },
2890
+ {
2891
+ name: 'file-sliders',
2892
+ icon: fileSliders,
2893
+ tags: [
2894
+ 'cogged',
2895
+ 'gear',
2896
+ 'mechanical',
2897
+ 'machinery',
2898
+ 'configuration',
2899
+ 'controls',
2900
+ 'preferences',
2901
+ 'settings',
2902
+ 'system',
2903
+ 'admin',
2904
+ 'edit',
2905
+ 'executable'
2906
+ ],
2907
+ categories: ['files', 'development']
2908
+ },
2909
+ {
2910
+ name: 'file-sliders',
2911
+ icon: fileSliders,
2912
+ tags: [
2913
+ 'cogged',
2914
+ 'gear',
2915
+ 'mechanical',
2916
+ 'machinery',
2917
+ 'configuration',
2918
+ 'controls',
2919
+ 'preferences',
2920
+ 'settings',
2921
+ 'system',
2922
+ 'admin',
2923
+ 'edit',
2924
+ 'executable'
2925
+ ],
2926
+ categories: ['files', 'development']
2927
+ },
2875
2928
  {
2876
2929
  name: 'file-stack',
2877
2930
  icon: fileStack,
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";
@@ -216,6 +218,7 @@ export { default as FilePenLine } from "./icons/file-pen-line.svelte";
216
218
  export { default as FilePen } from "./icons/file-pen.svelte";
217
219
  export { default as FilePlus } from "./icons/file-plus.svelte";
218
220
  export { default as FileQuestionMark } from "./icons/file-question-mark.svelte";
221
+ export { default as FileSliders } from "./icons/file-sliders.svelte";
219
222
  export { default as FileStack } from "./icons/file-stack.svelte";
220
223
  export { default as FileTerminal } from "./icons/file-terminal.svelte";
221
224
  export { default as FileUp } from "./icons/file-up.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';
@@ -216,6 +218,7 @@ export { default as FilePenLine } from './icons/file-pen-line.svelte';
216
218
  export { default as FilePen } from './icons/file-pen.svelte';
217
219
  export { default as FilePlus } from './icons/file-plus.svelte';
218
220
  export { default as FileQuestionMark } from './icons/file-question-mark.svelte';
221
+ export { default as FileSliders } from './icons/file-sliders.svelte';
219
222
  export { default as FileStack } from './icons/file-stack.svelte';
220
223
  export { default as FileTerminal } from './icons/file-terminal.svelte';
221
224
  export { default as FileUp } from './icons/file-up.svelte';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jis3r/icons",
3
- "version": "1.6.0",
3
+ "version": "1.8.0",
4
4
  "description": "beautifully crafted, moving icons. for svelte.",
5
5
  "keywords": [
6
6
  "svelte",