@jis3r/icons 1.19.0 → 1.22.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/gallery-horizontal.svelte +100 -0
- package/dist/icons/gallery-horizontal.svelte.d.ts +19 -0
- package/dist/icons/gallery-vertical.svelte +100 -0
- package/dist/icons/gallery-vertical.svelte.d.ts +19 -0
- package/dist/icons/index.js +31 -0
- package/dist/icons/sparkle.svelte +77 -0
- package/dist/icons/sparkle.svelte.d.ts +19 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +3 -0
- package/package.json +1 -1
|
@@ -0,0 +1,100 @@
|
|
|
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
|
+
if (isHovered) return;
|
|
22
|
+
isHovered = true;
|
|
23
|
+
|
|
24
|
+
setTimeout(() => {
|
|
25
|
+
isHovered = false;
|
|
26
|
+
}, 600);
|
|
27
|
+
}
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<div class={className} aria-label="gallery-horizontal" role="img" onmouseenter={handleMouseEnter}>
|
|
31
|
+
<svg
|
|
32
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
33
|
+
width={size}
|
|
34
|
+
height={size}
|
|
35
|
+
viewBox="0 0 24 24"
|
|
36
|
+
fill="none"
|
|
37
|
+
stroke={color}
|
|
38
|
+
stroke-width={strokeWidth}
|
|
39
|
+
stroke-linecap="round"
|
|
40
|
+
stroke-linejoin="round"
|
|
41
|
+
class="gallery-horizontal-icon"
|
|
42
|
+
class:animate={isHovered}
|
|
43
|
+
>
|
|
44
|
+
<path d="M2 3v18" class="gallery-path gallery-path-1" />
|
|
45
|
+
<rect width="12" height="18" x="6" y="3" rx="2" class="gallery-rect" />
|
|
46
|
+
<path d="M22 3v18" class="gallery-path gallery-path-2" />
|
|
47
|
+
</svg>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<style>
|
|
51
|
+
div {
|
|
52
|
+
display: inline-block;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.gallery-horizontal-icon {
|
|
56
|
+
overflow: visible;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.gallery-path {
|
|
60
|
+
opacity: 1;
|
|
61
|
+
transform: scale(1) translateX(0);
|
|
62
|
+
transform-origin: center;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.gallery-rect {
|
|
66
|
+
opacity: 1;
|
|
67
|
+
transform: scale(1);
|
|
68
|
+
transform-origin: center;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.gallery-horizontal-icon.animate .gallery-path-1 {
|
|
72
|
+
animation: slideInLeft 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.gallery-horizontal-icon.animate .gallery-path-2 {
|
|
76
|
+
animation: slideInRight 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@keyframes slideInLeft {
|
|
80
|
+
0% {
|
|
81
|
+
opacity: 0;
|
|
82
|
+
transform: scale(0.8) translateX(4px);
|
|
83
|
+
}
|
|
84
|
+
100% {
|
|
85
|
+
opacity: 1;
|
|
86
|
+
transform: scale(1) translateX(0);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@keyframes slideInRight {
|
|
91
|
+
0% {
|
|
92
|
+
opacity: 0;
|
|
93
|
+
transform: scale(0.8) translateX(-4px);
|
|
94
|
+
}
|
|
95
|
+
100% {
|
|
96
|
+
opacity: 1;
|
|
97
|
+
transform: scale(1) translateX(0);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
</style>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export default GalleryHorizontal;
|
|
2
|
+
type GalleryHorizontal = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const GalleryHorizontal: 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,100 @@
|
|
|
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
|
+
if (isHovered) return;
|
|
22
|
+
isHovered = true;
|
|
23
|
+
|
|
24
|
+
setTimeout(() => {
|
|
25
|
+
isHovered = false;
|
|
26
|
+
}, 800);
|
|
27
|
+
}
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<div class={className} aria-label="gallery-vertical" role="img" onmouseenter={handleMouseEnter}>
|
|
31
|
+
<svg
|
|
32
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
33
|
+
width={size}
|
|
34
|
+
height={size}
|
|
35
|
+
viewBox="0 0 24 24"
|
|
36
|
+
fill="none"
|
|
37
|
+
stroke={color}
|
|
38
|
+
stroke-width={strokeWidth}
|
|
39
|
+
stroke-linecap="round"
|
|
40
|
+
stroke-linejoin="round"
|
|
41
|
+
class="gallery-vertical-icon"
|
|
42
|
+
class:animate={isHovered}
|
|
43
|
+
>
|
|
44
|
+
<path d="M3 2h18" class="gallery-path gallery-path-1" />
|
|
45
|
+
<rect width="18" height="12" x="3" y="6" rx="2" class="gallery-rect" />
|
|
46
|
+
<path d="M3 22h18" class="gallery-path gallery-path-2" />
|
|
47
|
+
</svg>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<style>
|
|
51
|
+
div {
|
|
52
|
+
display: inline-block;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.gallery-vertical-icon {
|
|
56
|
+
overflow: visible;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.gallery-path {
|
|
60
|
+
opacity: 1;
|
|
61
|
+
transform: scale(1) translateY(0);
|
|
62
|
+
transform-origin: center;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.gallery-rect {
|
|
66
|
+
opacity: 1;
|
|
67
|
+
transform: scale(1);
|
|
68
|
+
transform-origin: center;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.gallery-vertical-icon.animate .gallery-path-1 {
|
|
72
|
+
animation: slideInTop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.gallery-vertical-icon.animate .gallery-path-2 {
|
|
76
|
+
animation: slideInBottom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@keyframes slideInTop {
|
|
80
|
+
0% {
|
|
81
|
+
opacity: 0;
|
|
82
|
+
transform: scale(0.8) translateY(4px);
|
|
83
|
+
}
|
|
84
|
+
100% {
|
|
85
|
+
opacity: 1;
|
|
86
|
+
transform: scale(1) translateY(0);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@keyframes slideInBottom {
|
|
91
|
+
0% {
|
|
92
|
+
opacity: 0;
|
|
93
|
+
transform: scale(0.8) translateY(-4px);
|
|
94
|
+
}
|
|
95
|
+
100% {
|
|
96
|
+
opacity: 1;
|
|
97
|
+
transform: scale(1) translateY(0);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
</style>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export default GalleryVertical;
|
|
2
|
+
type GalleryVertical = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const GalleryVertical: 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
|
@@ -242,8 +242,10 @@ import folderPlus from './folder-plus.svelte';
|
|
|
242
242
|
import folderSync from './folder-sync.svelte';
|
|
243
243
|
import folderUp from './folder-up.svelte';
|
|
244
244
|
import frame from './frame.svelte';
|
|
245
|
+
import galleryHorizontal from './gallery-horizontal.svelte';
|
|
245
246
|
import galleryHorizontalEnd from './gallery-horizontal-end.svelte';
|
|
246
247
|
import galleryThumbnails from './gallery-thumbnails.svelte';
|
|
248
|
+
import galleryVertical from './gallery-vertical.svelte';
|
|
247
249
|
import galleryVerticalEnd from './gallery-vertical-end.svelte';
|
|
248
250
|
import gauge from './gauge.svelte';
|
|
249
251
|
import gavel from './gavel.svelte';
|
|
@@ -415,6 +417,7 @@ import slidersHorizontal from './sliders-horizontal.svelte';
|
|
|
415
417
|
import slidersVertical from './sliders-vertical.svelte';
|
|
416
418
|
import smartphoneNfc from './smartphone-nfc.svelte';
|
|
417
419
|
import snowflake from './snowflake.svelte';
|
|
420
|
+
import sparkle from './sparkle.svelte';
|
|
418
421
|
import sparkles from './sparkles.svelte';
|
|
419
422
|
import speech from './speech.svelte';
|
|
420
423
|
import spellCheck from './spell-check.svelte';
|
|
@@ -3129,6 +3132,12 @@ let ICONS_LIST = [
|
|
|
3129
3132
|
tags: ['logo', 'design', 'tool'],
|
|
3130
3133
|
categories: ['design', 'photography']
|
|
3131
3134
|
},
|
|
3135
|
+
{
|
|
3136
|
+
name: 'gallery-horizontal',
|
|
3137
|
+
icon: galleryHorizontal,
|
|
3138
|
+
tags: ['carousel', 'pictures', 'images', 'scroll', 'swipe', 'album', 'portfolio'],
|
|
3139
|
+
categories: ['layout', 'design', 'development', 'photography', 'multimedia']
|
|
3140
|
+
},
|
|
3132
3141
|
{
|
|
3133
3142
|
name: 'gallery-horizontal-end',
|
|
3134
3143
|
icon: galleryHorizontalEnd,
|
|
@@ -3153,6 +3162,12 @@ let ICONS_LIST = [
|
|
|
3153
3162
|
tags: ['carousel', 'pictures', 'images', 'album', 'portfolio', 'preview'],
|
|
3154
3163
|
categories: ['layout', 'design', 'development', 'photography', 'multimedia']
|
|
3155
3164
|
},
|
|
3165
|
+
{
|
|
3166
|
+
name: 'gallery-vertical',
|
|
3167
|
+
icon: galleryVertical,
|
|
3168
|
+
tags: ['carousel', 'pictures', 'images', 'scroll', 'swipe', 'album', 'portfolio'],
|
|
3169
|
+
categories: ['layout', 'design', 'development', 'photography', 'multimedia']
|
|
3170
|
+
},
|
|
3156
3171
|
{
|
|
3157
3172
|
name: 'gallery-vertical-end',
|
|
3158
3173
|
icon: galleryVerticalEnd,
|
|
@@ -5022,6 +5037,22 @@ let ICONS_LIST = [
|
|
|
5022
5037
|
tags: ['cold', 'weather', 'freeze', 'snow', 'winter'],
|
|
5023
5038
|
categories: ['weather', 'seasons']
|
|
5024
5039
|
},
|
|
5040
|
+
{
|
|
5041
|
+
name: 'sparkle',
|
|
5042
|
+
icon: sparkle,
|
|
5043
|
+
tags: [
|
|
5044
|
+
'star',
|
|
5045
|
+
'effect',
|
|
5046
|
+
'filter',
|
|
5047
|
+
'night',
|
|
5048
|
+
'magic',
|
|
5049
|
+
'shiny',
|
|
5050
|
+
'glitter',
|
|
5051
|
+
'twinkle',
|
|
5052
|
+
'celebration'
|
|
5053
|
+
],
|
|
5054
|
+
categories: ['shapes']
|
|
5055
|
+
},
|
|
5025
5056
|
{
|
|
5026
5057
|
name: 'sparkles',
|
|
5027
5058
|
icon: sparkles,
|
|
@@ -0,0 +1,77 @@
|
|
|
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
|
+
}, 600);
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<div class={className} aria-label="sparkle" 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="sparkle-icon"
|
|
41
|
+
class:animate={isHovered}
|
|
42
|
+
>
|
|
43
|
+
<path
|
|
44
|
+
d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
|
|
45
|
+
class="sparkle-path"
|
|
46
|
+
/>
|
|
47
|
+
</svg>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<style>
|
|
51
|
+
div {
|
|
52
|
+
display: inline-block;
|
|
53
|
+
}
|
|
54
|
+
.sparkle-icon {
|
|
55
|
+
overflow: visible;
|
|
56
|
+
transform-origin: center;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.sparkle-icon.animate {
|
|
60
|
+
animation: sparkleScale 0.6s ease-in-out forwards;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@keyframes sparkleScale {
|
|
64
|
+
0% {
|
|
65
|
+
transform: scale(1);
|
|
66
|
+
}
|
|
67
|
+
33% {
|
|
68
|
+
transform: scale(0.9);
|
|
69
|
+
}
|
|
70
|
+
66% {
|
|
71
|
+
transform: scale(1.2);
|
|
72
|
+
}
|
|
73
|
+
100% {
|
|
74
|
+
transform: scale(1);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
</style>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export default Sparkle;
|
|
2
|
+
type Sparkle = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const Sparkle: 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/index.d.ts
CHANGED
|
@@ -243,8 +243,10 @@ export { default as FolderSync } from "./icons/folder-sync.svelte";
|
|
|
243
243
|
export { default as FolderUp } from "./icons/folder-up.svelte";
|
|
244
244
|
export { default as Frame } from "./icons/frame.svelte";
|
|
245
245
|
export { default as GalleryHorizontalEnd } from "./icons/gallery-horizontal-end.svelte";
|
|
246
|
+
export { default as GalleryHorizontal } from "./icons/gallery-horizontal.svelte";
|
|
246
247
|
export { default as GalleryThumbnails } from "./icons/gallery-thumbnails.svelte";
|
|
247
248
|
export { default as GalleryVerticalEnd } from "./icons/gallery-vertical-end.svelte";
|
|
249
|
+
export { default as GalleryVertical } from "./icons/gallery-vertical.svelte";
|
|
248
250
|
export { default as Gauge } from "./icons/gauge.svelte";
|
|
249
251
|
export { default as Gavel } from "./icons/gavel.svelte";
|
|
250
252
|
export { default as Grid2x2Check } from "./icons/grid-2x2-check.svelte";
|
|
@@ -415,6 +417,7 @@ export { default as SlidersHorizontal } from "./icons/sliders-horizontal.svelte"
|
|
|
415
417
|
export { default as SlidersVertical } from "./icons/sliders-vertical.svelte";
|
|
416
418
|
export { default as SmartphoneNfc } from "./icons/smartphone-nfc.svelte";
|
|
417
419
|
export { default as Snowflake } from "./icons/snowflake.svelte";
|
|
420
|
+
export { default as Sparkle } from "./icons/sparkle.svelte";
|
|
418
421
|
export { default as Sparkles } from "./icons/sparkles.svelte";
|
|
419
422
|
export { default as Speech } from "./icons/speech.svelte";
|
|
420
423
|
export { default as SpellCheck } from "./icons/spell-check.svelte";
|
package/dist/index.js
CHANGED
|
@@ -243,8 +243,10 @@ export { default as FolderSync } from './icons/folder-sync.svelte';
|
|
|
243
243
|
export { default as FolderUp } from './icons/folder-up.svelte';
|
|
244
244
|
export { default as Frame } from './icons/frame.svelte';
|
|
245
245
|
export { default as GalleryHorizontalEnd } from './icons/gallery-horizontal-end.svelte';
|
|
246
|
+
export { default as GalleryHorizontal } from './icons/gallery-horizontal.svelte';
|
|
246
247
|
export { default as GalleryThumbnails } from './icons/gallery-thumbnails.svelte';
|
|
247
248
|
export { default as GalleryVerticalEnd } from './icons/gallery-vertical-end.svelte';
|
|
249
|
+
export { default as GalleryVertical } from './icons/gallery-vertical.svelte';
|
|
248
250
|
export { default as Gauge } from './icons/gauge.svelte';
|
|
249
251
|
export { default as Gavel } from './icons/gavel.svelte';
|
|
250
252
|
export { default as Grid2x2Check } from './icons/grid-2x2-check.svelte';
|
|
@@ -415,6 +417,7 @@ export { default as SlidersHorizontal } from './icons/sliders-horizontal.svelte'
|
|
|
415
417
|
export { default as SlidersVertical } from './icons/sliders-vertical.svelte';
|
|
416
418
|
export { default as SmartphoneNfc } from './icons/smartphone-nfc.svelte';
|
|
417
419
|
export { default as Snowflake } from './icons/snowflake.svelte';
|
|
420
|
+
export { default as Sparkle } from './icons/sparkle.svelte';
|
|
418
421
|
export { default as Sparkles } from './icons/sparkles.svelte';
|
|
419
422
|
export { default as Speech } from './icons/speech.svelte';
|
|
420
423
|
export { default as SpellCheck } from './icons/spell-check.svelte';
|