@jis3r/icons 1.15.0 → 1.17.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 (8) hide show
  1. package/dist/icons/accessibility.svelte +132 -0
  2. package/dist/icons/accessibility.svelte.d.ts +19 -0
  3. package/dist/icons/index.js +14 -0
  4. package/dist/icons/sparkles.svelte +153 -0
  5. package/dist/icons/sparkles.svelte.d.ts +19 -0
  6. package/dist/index.d.ts +2 -0
  7. package/dist/index.js +2 -0
  8. package/package.json +1 -1
package/dist/icons/accessibility.svelte ADDED
@@ -0,0 +1,132 @@
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) {
22
+ isHovered = true;
23
+ setTimeout(() => {
24
+ isHovered = false;
25
+ }, 1400);
26
+ }
27
+ }
28
+ </script>
29
+
30
+ <div class={className} aria-label="accessibility" 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="accessibility-icon"
42
+ class:animate={isHovered}
43
+ >
44
+ <circle cx="16" cy="4" r="1" class="accessibility-circle" />
45
+ <g class="accessibility-group1">
46
+ <path d="M18,19l1-7-6,1" />
47
+ <path d="M8,5l5.5,3-2.4,3.5" />
48
+ <path d="M8 5 L5 8" class="accessibility-path3" />
49
+ </g>
50
+ <g class="accessibility-group2">
51
+ <path d="M4.2,14.5c-.8,2.6.7,5.4,3.3,6.2,1.2.4,2.4.3,3.6-.2" />
52
+ <path d="M13.8,17.5c.8-2.6-.7-5.4-3.3-6.2-1.2-.4-2.4-.3-3.6.2" />
53
+ </g>
54
+ <path d="M13,13.1c-.5-.7-1.1-1.2-1.9-1.6" />
55
+ </svg>
56
+ </div>
57
+
58
+ <style>
59
+ div {
60
+ display: inline-block;
61
+ }
62
+ .accessibility-icon {
63
+ overflow: visible;
64
+ }
65
+
66
+ .accessibility-circle {
67
+ transition: transform 0.3s ease;
68
+ }
69
+
70
+ .accessibility-group1 {
71
+ transform-origin: center;
72
+ transition: transform 0.3s ease;
73
+ }
74
+
75
+ .accessibility-group2 {
76
+ transform-origin: 9px 16px;
77
+ transition: transform 0.3s ease;
78
+ }
79
+
80
+ .accessibility-path3 {
81
+ transform-origin: 8px 5px;
82
+ transition: transform 0.3s ease;
83
+ }
84
+
85
+ .accessibility-icon.animate .accessibility-group1 {
86
+ animation: group1Rotate 0.8s ease-in-out;
87
+ }
88
+
89
+ .accessibility-icon.animate .accessibility-group2 {
90
+ animation: group2Rotate 1s ease-in-out 0.4s;
91
+ }
92
+
93
+ .accessibility-icon.animate .accessibility-path3 {
94
+ animation: path3Rotate 0.4s ease-in-out 0.2s;
95
+ }
96
+
97
+ @keyframes group1Rotate {
98
+ 0% {
99
+ transform: rotate(0deg);
100
+ }
101
+ 25% {
102
+ transform: rotate(5deg);
103
+ }
104
+ 50% {
105
+ transform: rotate(-5deg);
106
+ }
107
+ 100% {
108
+ transform: rotate(0deg);
109
+ }
110
+ }
111
+
112
+ @keyframes group2Rotate {
113
+ 0% {
114
+ transform: rotate(0deg);
115
+ }
116
+ 100% {
117
+ transform: rotate(360deg);
118
+ }
119
+ }
120
+
121
+ @keyframes path3Rotate {
122
+ 0% {
123
+ transform: rotate(0deg);
124
+ }
125
+ 50% {
126
+ transform: rotate(-60deg);
127
+ }
128
+ 100% {
129
+ transform: rotate(0deg);
130
+ }
131
+ }
132
+ </style>
package/dist/icons/accessibility.svelte.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ export default Accessibility;
2
+ type Accessibility = {
3
+ $on?(type: string, callback: (e: any) => void): () => void;
4
+ $set?(props: Partial<Props>): void;
5
+ };
6
+ declare const Accessibility: 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
@@ -1,3 +1,4 @@
1
+ import accessibility from './accessibility.svelte';
1
2
  import activity from './activity.svelte';
2
3
  import airplay from './airplay.svelte';
3
4
  import alarmClock from './alarm-clock.svelte';
@@ -412,6 +413,7 @@ import slidersHorizontal from './sliders-horizontal.svelte';
412
413
  import slidersVertical from './sliders-vertical.svelte';
413
414
  import smartphoneNfc from './smartphone-nfc.svelte';
414
415
  import snowflake from './snowflake.svelte';
416
+ import sparkles from './sparkles.svelte';
415
417
  import speech from './speech.svelte';
416
418
  import spellCheck from './spell-check.svelte';
417
419
  import squareArrowDown from './square-arrow-down.svelte';
@@ -501,6 +503,12 @@ import x from './x.svelte';
501
503
  import zapOff from './zap-off.svelte';
502
504
 
503
505
  let ICONS_LIST = [
506
+ {
507
+ name: 'accessibility',
508
+ icon: accessibility,
509
+ tags: ['disability', 'disabled', 'dda', 'wheelchair'],
510
+ categories: ['accessibility', 'medical']
511
+ },
504
512
  {
505
513
  name: 'activity',
506
514
  icon: activity,
@@ -5000,6 +5008,12 @@ let ICONS_LIST = [
5000
5008
  tags: ['cold', 'weather', 'freeze', 'snow', 'winter'],
5001
5009
  categories: ['weather', 'seasons']
5002
5010
  },
5011
+ {
5012
+ name: 'sparkles',
5013
+ icon: sparkles,
5014
+ tags: ['stars', 'effect', 'filter', 'night', 'magic'],
5015
+ categories: ['cursors', 'multimedia', 'gaming', 'weather']
5016
+ },
5003
5017
  {
5004
5018
  name: 'speech',
5005
5019
  icon: speech,
package/dist/icons/sparkles.svelte ADDED
@@ -0,0 +1,153 @@
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
+ }, 750);
26
+ }
27
+ </script>
28
+
29
+ <div class={className} aria-label="sparkles" 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="sparkles-icon"
41
+ class:animate={isHovered}
42
+ >
43
+ <g class="sparkles-group">
44
+ <path
45
+ 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"
46
+ class="sparkles-path"
47
+ />
48
+ </g>
49
+ <path d="M20 2v4 M22 4h-4" class="sparkles-plus" />
50
+ <circle cx="4" cy="20" r="2" class="sparkles-circle" />
51
+ </svg>
52
+ </div>
53
+
54
+ <style>
55
+ div {
56
+ display: inline-block;
57
+ }
58
+
59
+ .sparkles-icon {
60
+ overflow: visible;
61
+ }
62
+
63
+ .sparkles-group {
64
+ transform-origin: center;
65
+ transition: transform 0.6s ease-in-out;
66
+ }
67
+
68
+ .sparkles-icon.animate .sparkles-group {
69
+ animation: scaleGroup 0.6s ease-in-out;
70
+ }
71
+
72
+ .sparkles-plus {
73
+ opacity: 1;
74
+ transform: scale(1);
75
+ transform-origin: center;
76
+ transform-box: fill-box;
77
+ transition:
78
+ opacity 0.2s ease-in-out,
79
+ transform 0.2s ease-in-out;
80
+ }
81
+
82
+ .sparkles-icon.animate .sparkles-plus {
83
+ animation: pulsePlus 0.75s ease-in-out;
84
+ }
85
+
86
+ .sparkles-circle {
87
+ opacity: 1;
88
+ transform: scale(1);
89
+ transform-origin: center;
90
+ transform-box: fill-box;
91
+ transition:
92
+ opacity 0.2s ease-in-out,
93
+ transform 0.2s ease-in-out;
94
+ }
95
+
96
+ .sparkles-icon.animate .sparkles-circle {
97
+ animation: pulseCircle 0.6s ease-in-out;
98
+ }
99
+
100
+ @keyframes scaleGroup {
101
+ 0% {
102
+ transform: scale(1);
103
+ }
104
+ 33.33% {
105
+ transform: scale(0.9);
106
+ }
107
+ 66.67% {
108
+ transform: scale(1.1);
109
+ }
110
+ 100% {
111
+ transform: scale(1);
112
+ }
113
+ }
114
+
115
+ @keyframes pulsePlus {
116
+ 0%,
117
+ 20% {
118
+ opacity: 1;
119
+ transform: scale(1);
120
+ }
121
+ 46.67% {
122
+ opacity: 0;
123
+ transform: scale(0);
124
+ }
125
+ 73.33% {
126
+ opacity: 0;
127
+ transform: scale(0);
128
+ }
129
+ 100% {
130
+ opacity: 1;
131
+ transform: scale(1);
132
+ }
133
+ }
134
+
135
+ @keyframes pulseCircle {
136
+ 0% {
137
+ opacity: 1;
138
+ transform: scale(1);
139
+ }
140
+ 33.33% {
141
+ opacity: 0;
142
+ transform: scale(0);
143
+ }
144
+ 66.67% {
145
+ opacity: 0;
146
+ transform: scale(0);
147
+ }
148
+ 100% {
149
+ opacity: 1;
150
+ transform: scale(1);
151
+ }
152
+ }
153
+ </style>
package/dist/icons/sparkles.svelte.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ export default Sparkles;
2
+ type Sparkles = {
3
+ $on?(type: string, callback: (e: any) => void): () => void;
4
+ $set?(props: Partial<Props>): void;
5
+ };
6
+ declare const Sparkles: 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
@@ -1,3 +1,4 @@
1
+ export { default as Accessibility } from "./icons/accessibility.svelte";
1
2
  export { default as Activity } from "./icons/activity.svelte";
2
3
  export { default as Airplay } from "./icons/airplay.svelte";
3
4
  export { default as AlarmClockCheck } from "./icons/alarm-clock-check.svelte";
@@ -412,6 +413,7 @@ export { default as SlidersHorizontal } from "./icons/sliders-horizontal.svelte"
412
413
  export { default as SlidersVertical } from "./icons/sliders-vertical.svelte";
413
414
  export { default as SmartphoneNfc } from "./icons/smartphone-nfc.svelte";
414
415
  export { default as Snowflake } from "./icons/snowflake.svelte";
416
+ export { default as Sparkles } from "./icons/sparkles.svelte";
415
417
  export { default as Speech } from "./icons/speech.svelte";
416
418
  export { default as SpellCheck } from "./icons/spell-check.svelte";
417
419
  export { default as SquareArrowDownLeft } from "./icons/square-arrow-down-left.svelte";
package/dist/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ export { default as Accessibility } from './icons/accessibility.svelte';
1
2
  export { default as Activity } from './icons/activity.svelte';
2
3
  export { default as Airplay } from './icons/airplay.svelte';
3
4
  export { default as AlarmClockCheck } from './icons/alarm-clock-check.svelte';
@@ -412,6 +413,7 @@ export { default as SlidersHorizontal } from './icons/sliders-horizontal.svelte'
412
413
  export { default as SlidersVertical } from './icons/sliders-vertical.svelte';
413
414
  export { default as SmartphoneNfc } from './icons/smartphone-nfc.svelte';
414
415
  export { default as Snowflake } from './icons/snowflake.svelte';
416
+ export { default as Sparkles } from './icons/sparkles.svelte';
415
417
  export { default as Speech } from './icons/speech.svelte';
416
418
  export { default as SpellCheck } from './icons/spell-check.svelte';
417
419
  export { default as SquareArrowDownLeft } from './icons/square-arrow-down-left.svelte';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jis3r/icons",
3
- "version": "1.15.0",
3
+ "version": "1.17.0",
4
4
  "description": "beautifully crafted, moving icons. for svelte.",
5
5
  "keywords": [
6
6
  "svelte",