@jis3r/icons 1.14.0 → 1.16.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/accessibility.svelte +132 -0
- package/dist/icons/accessibility.svelte.d.ts +19 -0
- package/dist/icons/book-open-text.svelte +158 -0
- package/dist/icons/book-open-text.svelte.d.ts +19 -0
- package/dist/icons/index.js +44 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/package.json +2 -2
|
@@ -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>
|
|
@@ -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
|
+
};
|
|
@@ -0,0 +1,158 @@
|
|
|
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
|
+
}, 1500);
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<div class={className} aria-label="book-open-text" 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="book-open-text-icon"
|
|
41
|
+
class:animate={isHovered}
|
|
42
|
+
>
|
|
43
|
+
<path d="M12 7v14" class="center-line" />
|
|
44
|
+
<path d="M16 12h2" class="text-line text-line-right-bottom" />
|
|
45
|
+
<path d="M16 8h2" class="text-line text-line-right-top" />
|
|
46
|
+
<path
|
|
47
|
+
d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"
|
|
48
|
+
class="book-path"
|
|
49
|
+
/>
|
|
50
|
+
<path d="M6 12h2" class="text-line text-line-left-bottom" />
|
|
51
|
+
<path d="M6 8h2" class="text-line text-line-left-top" />
|
|
52
|
+
</svg>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<style>
|
|
56
|
+
div {
|
|
57
|
+
display: inline-block;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.book-open-text-icon {
|
|
61
|
+
overflow: visible;
|
|
62
|
+
transform-origin: center;
|
|
63
|
+
transition: transform 0.3s ease;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.book-open-text-icon.animate {
|
|
67
|
+
animation: bookOpen 0.8s ease;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.book-path {
|
|
71
|
+
transform-origin: center bottom;
|
|
72
|
+
transition: transform 0.3s ease;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.book-open-text-icon.animate .book-path {
|
|
76
|
+
animation: bookPages 0.8s ease;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.center-line {
|
|
80
|
+
transform-origin: center bottom;
|
|
81
|
+
transition: transform 0.3s ease;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.book-open-text-icon.animate .center-line {
|
|
85
|
+
animation: bookPages 0.8s ease;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.text-line {
|
|
89
|
+
stroke-dasharray: 3;
|
|
90
|
+
stroke-dashoffset: 0;
|
|
91
|
+
transform-origin: center bottom;
|
|
92
|
+
transition:
|
|
93
|
+
stroke-dashoffset 0s,
|
|
94
|
+
transform 0.3s ease;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.book-open-text-icon.animate .text-line {
|
|
98
|
+
stroke-dashoffset: 3;
|
|
99
|
+
animation: bookPages 0.8s ease;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.book-open-text-icon.animate .text-line-left-top {
|
|
103
|
+
animation:
|
|
104
|
+
bookPages 0.8s ease,
|
|
105
|
+
drawLine 0.4s ease 0.2s forwards;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.book-open-text-icon.animate .text-line-left-bottom {
|
|
109
|
+
animation:
|
|
110
|
+
bookPages 0.8s ease,
|
|
111
|
+
drawLine 0.4s ease 0.4s forwards;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.book-open-text-icon.animate .text-line-right-top {
|
|
115
|
+
animation:
|
|
116
|
+
bookPages 0.8s ease,
|
|
117
|
+
drawLine 0.4s ease 0.6s forwards;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.book-open-text-icon.animate .text-line-right-bottom {
|
|
121
|
+
animation:
|
|
122
|
+
bookPages 0.8s ease,
|
|
123
|
+
drawLine 0.4s ease 0.8s forwards;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
@keyframes bookOpen {
|
|
127
|
+
0% {
|
|
128
|
+
transform: scale(1);
|
|
129
|
+
}
|
|
130
|
+
20% {
|
|
131
|
+
transform: scale(1.05);
|
|
132
|
+
}
|
|
133
|
+
100% {
|
|
134
|
+
transform: scale(1);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@keyframes bookPages {
|
|
139
|
+
0% {
|
|
140
|
+
transform: scaleY(1);
|
|
141
|
+
}
|
|
142
|
+
30% {
|
|
143
|
+
transform: scaleY(1.1);
|
|
144
|
+
}
|
|
145
|
+
100% {
|
|
146
|
+
transform: scaleY(1);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@keyframes drawLine {
|
|
151
|
+
0% {
|
|
152
|
+
stroke-dashoffset: 3;
|
|
153
|
+
}
|
|
154
|
+
100% {
|
|
155
|
+
stroke-dashoffset: 0;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
</style>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export default BookOpenText;
|
|
2
|
+
type BookOpenText = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const BookOpenText: 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';
|
|
@@ -79,6 +80,7 @@ import bookmarkPlus from './bookmark-plus.svelte';
|
|
|
79
80
|
import bookmarkX from './bookmark-x.svelte';
|
|
80
81
|
import bookMinus from './book-minus.svelte';
|
|
81
82
|
import bookOpenCheck from './book-open-check.svelte';
|
|
83
|
+
import bookOpenText from './book-open-text.svelte';
|
|
82
84
|
import bookPlus from './book-plus.svelte';
|
|
83
85
|
import bookText from './book-text.svelte';
|
|
84
86
|
import bookType from './book-type.svelte';
|
|
@@ -500,6 +502,12 @@ import x from './x.svelte';
|
|
|
500
502
|
import zapOff from './zap-off.svelte';
|
|
501
503
|
|
|
502
504
|
let ICONS_LIST = [
|
|
505
|
+
{
|
|
506
|
+
name: 'accessibility',
|
|
507
|
+
icon: accessibility,
|
|
508
|
+
tags: ['disability', 'disabled', 'dda', 'wheelchair'],
|
|
509
|
+
categories: ['accessibility', 'medical']
|
|
510
|
+
},
|
|
503
511
|
{
|
|
504
512
|
name: 'activity',
|
|
505
513
|
icon: activity,
|
|
@@ -1595,6 +1603,42 @@ let ICONS_LIST = [
|
|
|
1595
1603
|
],
|
|
1596
1604
|
categories: ['text', 'development', 'gaming']
|
|
1597
1605
|
},
|
|
1606
|
+
{
|
|
1607
|
+
name: 'book-open-text',
|
|
1608
|
+
icon: bookOpenText,
|
|
1609
|
+
tags: [
|
|
1610
|
+
'reading',
|
|
1611
|
+
'pages',
|
|
1612
|
+
'booklet',
|
|
1613
|
+
'magazine',
|
|
1614
|
+
'leaflet',
|
|
1615
|
+
'pamphlet',
|
|
1616
|
+
'library',
|
|
1617
|
+
'writing',
|
|
1618
|
+
'written',
|
|
1619
|
+
'writer',
|
|
1620
|
+
'author',
|
|
1621
|
+
'story',
|
|
1622
|
+
'script',
|
|
1623
|
+
'fiction',
|
|
1624
|
+
'novel',
|
|
1625
|
+
'information',
|
|
1626
|
+
'knowledge',
|
|
1627
|
+
'education',
|
|
1628
|
+
'high school',
|
|
1629
|
+
'university',
|
|
1630
|
+
'college',
|
|
1631
|
+
'academy',
|
|
1632
|
+
'student',
|
|
1633
|
+
'study',
|
|
1634
|
+
'learning',
|
|
1635
|
+
'homework',
|
|
1636
|
+
'research',
|
|
1637
|
+
'documentation',
|
|
1638
|
+
'revealed'
|
|
1639
|
+
],
|
|
1640
|
+
categories: ['text', 'development']
|
|
1641
|
+
},
|
|
1598
1642
|
{
|
|
1599
1643
|
name: 'book-plus',
|
|
1600
1644
|
icon: bookPlus,
|
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";
|
|
@@ -73,6 +74,7 @@ export { default as BookLock } from "./icons/book-lock.svelte";
|
|
|
73
74
|
export { default as BookMarked } from "./icons/book-marked.svelte";
|
|
74
75
|
export { default as BookMinus } from "./icons/book-minus.svelte";
|
|
75
76
|
export { default as BookOpenCheck } from "./icons/book-open-check.svelte";
|
|
77
|
+
export { default as BookOpenText } from "./icons/book-open-text.svelte";
|
|
76
78
|
export { default as BookPlus } from "./icons/book-plus.svelte";
|
|
77
79
|
export { default as BookText } from "./icons/book-text.svelte";
|
|
78
80
|
export { default as BookType } from "./icons/book-type.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';
|
|
@@ -73,6 +74,7 @@ export { default as BookLock } from './icons/book-lock.svelte';
|
|
|
73
74
|
export { default as BookMarked } from './icons/book-marked.svelte';
|
|
74
75
|
export { default as BookMinus } from './icons/book-minus.svelte';
|
|
75
76
|
export { default as BookOpenCheck } from './icons/book-open-check.svelte';
|
|
77
|
+
export { default as BookOpenText } from './icons/book-open-text.svelte';
|
|
76
78
|
export { default as BookPlus } from './icons/book-plus.svelte';
|
|
77
79
|
export { default as BookText } from './icons/book-text.svelte';
|
|
78
80
|
export { default as BookType } from './icons/book-type.svelte';
|
package/package.json
CHANGED