@geira/iconfont 0.3.3 → 4.0.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/README.md +95 -32
- package/dist/{images/favicon/favicon.ico → favicon.ico} +0 -0
- package/dist/geira-icons.css +315 -0
- package/dist/geira-icons.scss +303 -138
- package/dist/icons.json +265 -1567
- package/dist/index.html +496 -1
- package/dist/{images/favicon/android-chrome-512x512.png → logo.png} +0 -0
- package/package.json +15 -40
- package/tags.json +2119 -0
- package/.idea/geira-icons-tool.iml +0 -9
- package/.idea/misc.xml +0 -6
- package/.idea/modules.xml +0 -8
- package/.idea/vcs.xml +0 -6
- package/.idea/workspace.xml +0 -43
- package/clean.html +0 -1077
- package/dist/data.min.js +0 -2
- package/dist/data.min.js.map +0 -1
- package/dist/fonts/GeiraIcons-Regular-SVG.ttf +0 -0
- package/dist/fonts/GeiraIcons-Regular-SVG.woff2 +0 -0
- package/dist/geira-icons.min.css +0 -3
- package/dist/geira-icons.min.css.map +0 -1
- package/dist/geira-icons.min.js +0 -0
- package/dist/images/favicon/android-chrome-192x192.png +0 -0
- package/dist/images/favicon/apple-touch-icon.png +0 -0
- package/dist/images/favicon/browserconfig.xml +0 -9
- package/dist/images/favicon/favicon-16x16.png +0 -0
- package/dist/images/favicon/favicon-32x32.png +0 -0
- package/dist/images/favicon/mstile-150x150.png +0 -0
- package/dist/images/favicon/safari-pinned-tab.svg +0 -38
- package/dist/images/favicon/site.webmanifest +0 -19
- package/dist/main.min.js +0 -2
- package/dist/main.min.js.map +0 -1
- package/dist/styles.min.css +0 -3
- package/dist/styles.min.css.map +0 -1
- package/dist/styles.min.js +0 -0
- package/dist/usage.html +0 -1
- package/dist/utils.min.js +0 -2
- package/dist/utils.min.js.map +0 -1
- package/src/fonts/GeiraIcons-Regular-SVG.ttf +0 -0
- package/src/fonts/GeiraIcons-Regular-SVG.woff2 +0 -0
- package/src/fonts/GeiraIcons-Regular.ttf +0 -0
- package/src/fonts/GeiraIcons-Regular.woff +0 -0
- package/src/fonts/GeiraIcons-Regular.woff2 +0 -0
- package/src/images/favicon/android-chrome-192x192.png +0 -0
- package/src/images/favicon/android-chrome-512x512.png +0 -0
- package/src/images/favicon/apple-touch-icon.png +0 -0
- package/src/images/favicon/browserconfig.xml +0 -9
- package/src/images/favicon/favicon-16x16.png +0 -0
- package/src/images/favicon/favicon-32x32.png +0 -0
- package/src/images/favicon/favicon.ico +0 -0
- package/src/images/favicon/mstile-150x150.png +0 -0
- package/src/images/favicon/safari-pinned-tab.svg +0 -38
- package/src/images/favicon/site.webmanifest +0 -19
- package/src/index.html +0 -50
- package/src/js/data.js +0 -1568
- package/src/js/data.json +0 -1
- package/src/js/flutter.txt +0 -261
- package/src/js/flutter2.txt +0 -261
- package/src/js/icons.json +0 -1568
- package/src/js/script.js +0 -51
- package/src/js/utils.js +0 -74
- package/src/scss/geira-icons.scss +0 -150
- package/src/scss/styles.scss +0 -286
- package/src/usage.html +0 -376
- package/webpack.config.js +0 -100
package/dist/index.html
CHANGED
|
@@ -1 +1,496 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Geira Icons v4.0.0</title>
|
|
7
|
+
<link rel="icon" href="./favicon.ico">
|
|
8
|
+
<link rel="stylesheet" href="./geira-icons.css">
|
|
9
|
+
<style>
|
|
10
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
11
|
+
|
|
12
|
+
:root {
|
|
13
|
+
--orange: #F05A28;
|
|
14
|
+
--orange-dark: #D44A1A;
|
|
15
|
+
--orange-light: #FEF0EB;
|
|
16
|
+
--teal: #1A9BA1;
|
|
17
|
+
--teal-light: #E8F6F7;
|
|
18
|
+
--bg: #F7F6F4;
|
|
19
|
+
--surface: #FFFFFF;
|
|
20
|
+
--border: #E8E4E0;
|
|
21
|
+
--text: #1A1714;
|
|
22
|
+
--text-muted: #7A736D;
|
|
23
|
+
--radius: 10px;
|
|
24
|
+
--shadow-sm: 0 1px 3px rgba(0,0,0,.07);
|
|
25
|
+
--shadow-md: 0 4px 12px rgba(0,0,0,.10);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
body {
|
|
29
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
30
|
+
background: var(--bg);
|
|
31
|
+
color: var(--text);
|
|
32
|
+
min-height: 100vh;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* ── Header ── */
|
|
36
|
+
header {
|
|
37
|
+
background: var(--surface);
|
|
38
|
+
border-bottom: 1px solid var(--border);
|
|
39
|
+
padding: 0 24px;
|
|
40
|
+
height: 60px;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
gap: 12px;
|
|
44
|
+
position: sticky;
|
|
45
|
+
top: 0;
|
|
46
|
+
z-index: 10;
|
|
47
|
+
box-shadow: var(--shadow-sm);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.logo {
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
gap: 10px;
|
|
54
|
+
text-decoration: none;
|
|
55
|
+
flex: none;
|
|
56
|
+
}
|
|
57
|
+
.logo img {
|
|
58
|
+
width: 32px;
|
|
59
|
+
height: 32px;
|
|
60
|
+
border-radius: 7px;
|
|
61
|
+
}
|
|
62
|
+
.logo-text {
|
|
63
|
+
font-size: 17px;
|
|
64
|
+
font-weight: 700;
|
|
65
|
+
color: var(--text);
|
|
66
|
+
letter-spacing: -.3px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.version-badge {
|
|
70
|
+
font-size: 11px;
|
|
71
|
+
font-weight: 600;
|
|
72
|
+
color: var(--text-muted);
|
|
73
|
+
background: var(--bg);
|
|
74
|
+
padding: 2px 8px;
|
|
75
|
+
border-radius: 999px;
|
|
76
|
+
border: 1px solid var(--border);
|
|
77
|
+
flex: none;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.pkg-badges {
|
|
81
|
+
display: flex;
|
|
82
|
+
gap: 6px;
|
|
83
|
+
flex: none;
|
|
84
|
+
}
|
|
85
|
+
.pkg-badge {
|
|
86
|
+
display: inline-flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
gap: 5px;
|
|
89
|
+
padding: 4px 10px;
|
|
90
|
+
border-radius: 999px;
|
|
91
|
+
font-size: 11px;
|
|
92
|
+
font-weight: 600;
|
|
93
|
+
text-decoration: none;
|
|
94
|
+
transition: opacity .15s;
|
|
95
|
+
}
|
|
96
|
+
.pkg-badge:hover { opacity: .8; }
|
|
97
|
+
.pkg-badge.npm {
|
|
98
|
+
background: #CB3837;
|
|
99
|
+
color: #fff;
|
|
100
|
+
}
|
|
101
|
+
.pkg-badge.pub {
|
|
102
|
+
background: var(--teal);
|
|
103
|
+
color: #fff;
|
|
104
|
+
}
|
|
105
|
+
.pkg-badge svg { flex: none; }
|
|
106
|
+
|
|
107
|
+
.search-wrap {
|
|
108
|
+
flex: 1;
|
|
109
|
+
max-width: 360px;
|
|
110
|
+
margin-left: auto;
|
|
111
|
+
position: relative;
|
|
112
|
+
}
|
|
113
|
+
.search-wrap input {
|
|
114
|
+
width: 100%;
|
|
115
|
+
padding: 8px 12px 8px 36px;
|
|
116
|
+
border: 1.5px solid var(--border);
|
|
117
|
+
border-radius: var(--radius);
|
|
118
|
+
font-size: 14px;
|
|
119
|
+
outline: none;
|
|
120
|
+
background: var(--bg);
|
|
121
|
+
color: var(--text);
|
|
122
|
+
transition: border-color .15s, background .15s;
|
|
123
|
+
}
|
|
124
|
+
.search-wrap input:focus {
|
|
125
|
+
border-color: var(--orange);
|
|
126
|
+
background: var(--surface);
|
|
127
|
+
}
|
|
128
|
+
.search-icon {
|
|
129
|
+
position: absolute;
|
|
130
|
+
left: 10px;
|
|
131
|
+
top: 50%;
|
|
132
|
+
transform: translateY(-50%);
|
|
133
|
+
color: var(--text-muted);
|
|
134
|
+
font-size: 16px;
|
|
135
|
+
pointer-events: none;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* ── Nav ── */
|
|
139
|
+
nav {
|
|
140
|
+
display: flex;
|
|
141
|
+
padding: 0 24px;
|
|
142
|
+
background: var(--surface);
|
|
143
|
+
border-bottom: 1px solid var(--border);
|
|
144
|
+
}
|
|
145
|
+
nav button {
|
|
146
|
+
padding: 13px 20px;
|
|
147
|
+
border: none;
|
|
148
|
+
background: none;
|
|
149
|
+
cursor: pointer;
|
|
150
|
+
font-size: 14px;
|
|
151
|
+
font-weight: 500;
|
|
152
|
+
color: var(--text-muted);
|
|
153
|
+
border-bottom: 2px solid transparent;
|
|
154
|
+
margin-bottom: -1px;
|
|
155
|
+
transition: color .15s;
|
|
156
|
+
}
|
|
157
|
+
nav button:hover { color: var(--text); }
|
|
158
|
+
nav button.active {
|
|
159
|
+
color: var(--orange);
|
|
160
|
+
border-bottom-color: var(--orange);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* ── Tabs ── */
|
|
164
|
+
.tab { display: none; }
|
|
165
|
+
.tab.active { display: block; }
|
|
166
|
+
|
|
167
|
+
/* ── Gallery ── */
|
|
168
|
+
.gallery-header {
|
|
169
|
+
padding: 20px 24px 12px;
|
|
170
|
+
display: flex;
|
|
171
|
+
align-items: center;
|
|
172
|
+
justify-content: space-between;
|
|
173
|
+
}
|
|
174
|
+
.gallery-header .count {
|
|
175
|
+
font-size: 13px;
|
|
176
|
+
color: var(--text-muted);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.grid {
|
|
180
|
+
display: grid;
|
|
181
|
+
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
|
|
182
|
+
gap: 8px;
|
|
183
|
+
padding: 4px 24px 40px;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.icon-card {
|
|
187
|
+
background: var(--surface);
|
|
188
|
+
border: 1.5px solid var(--border);
|
|
189
|
+
border-radius: var(--radius);
|
|
190
|
+
padding: 20px 8px 12px;
|
|
191
|
+
cursor: pointer;
|
|
192
|
+
text-align: center;
|
|
193
|
+
transition: border-color .15s, box-shadow .15s, background .15s, transform .1s;
|
|
194
|
+
user-select: none;
|
|
195
|
+
}
|
|
196
|
+
.icon-card:hover {
|
|
197
|
+
border-color: var(--orange);
|
|
198
|
+
box-shadow: var(--shadow-md);
|
|
199
|
+
transform: translateY(-1px);
|
|
200
|
+
}
|
|
201
|
+
.icon-card.copied {
|
|
202
|
+
background: var(--orange-light);
|
|
203
|
+
border-color: var(--orange);
|
|
204
|
+
}
|
|
205
|
+
.icon-card .geira-icons {
|
|
206
|
+
font-size: 42px;
|
|
207
|
+
display: block;
|
|
208
|
+
margin-bottom: 10px;
|
|
209
|
+
color: var(--text);
|
|
210
|
+
transition: color .15s;
|
|
211
|
+
}
|
|
212
|
+
.icon-card:hover .geira-icons { color: var(--orange); }
|
|
213
|
+
.icon-card .name {
|
|
214
|
+
font-size: 10px;
|
|
215
|
+
color: var(--text-muted);
|
|
216
|
+
word-break: break-all;
|
|
217
|
+
line-height: 1.4;
|
|
218
|
+
}
|
|
219
|
+
.icon-card .uni {
|
|
220
|
+
font-size: 9px;
|
|
221
|
+
color: #B8B0A8;
|
|
222
|
+
margin-top: 4px;
|
|
223
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.no-results {
|
|
227
|
+
padding: 64px 24px;
|
|
228
|
+
text-align: center;
|
|
229
|
+
color: var(--text-muted);
|
|
230
|
+
}
|
|
231
|
+
.no-results .geira-icons { font-size: 48px; display: block; margin-bottom: 12px; opacity: .3; }
|
|
232
|
+
|
|
233
|
+
/* ── Usage ── */
|
|
234
|
+
.usage {
|
|
235
|
+
max-width: 760px;
|
|
236
|
+
margin: 0 auto;
|
|
237
|
+
padding: 36px 24px 64px;
|
|
238
|
+
}
|
|
239
|
+
.usage h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
|
|
240
|
+
.usage h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 32px 0 10px; }
|
|
241
|
+
.usage p { font-size: 14px; line-height: 1.7; color: var(--text-muted); margin-bottom: 8px; }
|
|
242
|
+
|
|
243
|
+
.pkg-links { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
|
|
244
|
+
.pkg-link {
|
|
245
|
+
display: inline-flex;
|
|
246
|
+
align-items: center;
|
|
247
|
+
gap: 8px;
|
|
248
|
+
padding: 10px 16px;
|
|
249
|
+
border: 1.5px solid var(--border);
|
|
250
|
+
border-radius: var(--radius);
|
|
251
|
+
text-decoration: none;
|
|
252
|
+
font-size: 13px;
|
|
253
|
+
font-weight: 500;
|
|
254
|
+
color: var(--text);
|
|
255
|
+
background: var(--surface);
|
|
256
|
+
transition: border-color .15s, color .15s;
|
|
257
|
+
}
|
|
258
|
+
.pkg-link:hover { border-color: var(--orange); color: var(--orange); }
|
|
259
|
+
.pkg-link .dot {
|
|
260
|
+
width: 8px; height: 8px;
|
|
261
|
+
border-radius: 50%;
|
|
262
|
+
flex: none;
|
|
263
|
+
}
|
|
264
|
+
.pkg-link .dot.npm { background: #CB3837; }
|
|
265
|
+
.pkg-link .dot.pub { background: var(--teal); }
|
|
266
|
+
|
|
267
|
+
pre {
|
|
268
|
+
background: #1C1917;
|
|
269
|
+
color: #E7E0D8;
|
|
270
|
+
border-radius: var(--radius);
|
|
271
|
+
padding: 16px 18px;
|
|
272
|
+
font-size: 13px;
|
|
273
|
+
overflow-x: auto;
|
|
274
|
+
margin-bottom: 8px;
|
|
275
|
+
line-height: 1.65;
|
|
276
|
+
}
|
|
277
|
+
code { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
|
|
278
|
+
|
|
279
|
+
.demo-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
|
|
280
|
+
.demo-chip {
|
|
281
|
+
display: inline-flex;
|
|
282
|
+
align-items: center;
|
|
283
|
+
gap: 8px;
|
|
284
|
+
padding: 6px 14px;
|
|
285
|
+
background: var(--surface);
|
|
286
|
+
border: 1.5px solid var(--border);
|
|
287
|
+
border-radius: 999px;
|
|
288
|
+
font-size: 12px;
|
|
289
|
+
font-weight: 500;
|
|
290
|
+
color: var(--text-muted);
|
|
291
|
+
}
|
|
292
|
+
.demo-chip .geira-icons { color: var(--text); }
|
|
293
|
+
|
|
294
|
+
/* ── Footer ── */
|
|
295
|
+
footer {
|
|
296
|
+
text-align: center;
|
|
297
|
+
padding: 28px 24px;
|
|
298
|
+
font-size: 12px;
|
|
299
|
+
color: var(--text-muted);
|
|
300
|
+
border-top: 1px solid var(--border);
|
|
301
|
+
}
|
|
302
|
+
footer a { color: inherit; text-decoration: none; }
|
|
303
|
+
footer a:hover { color: var(--orange); }
|
|
304
|
+
|
|
305
|
+
/* ── Toast ── */
|
|
306
|
+
#toast {
|
|
307
|
+
position: fixed;
|
|
308
|
+
bottom: 24px;
|
|
309
|
+
left: 50%;
|
|
310
|
+
transform: translateX(-50%) translateY(16px);
|
|
311
|
+
background: #1C1917;
|
|
312
|
+
color: #E7E0D8;
|
|
313
|
+
padding: 10px 20px;
|
|
314
|
+
border-radius: var(--radius);
|
|
315
|
+
font-size: 13px;
|
|
316
|
+
opacity: 0;
|
|
317
|
+
transition: opacity .2s, transform .2s;
|
|
318
|
+
pointer-events: none;
|
|
319
|
+
z-index: 100;
|
|
320
|
+
}
|
|
321
|
+
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
|
322
|
+
</style>
|
|
323
|
+
</head>
|
|
324
|
+
<body>
|
|
325
|
+
|
|
326
|
+
<header>
|
|
327
|
+
<a class="logo" href="https://geira.com" target="_blank">
|
|
328
|
+
<img src="./logo.png" alt="Geira">
|
|
329
|
+
<span class="logo-text">Geira Icons</span>
|
|
330
|
+
</a>
|
|
331
|
+
<span class="version-badge">v4.0.0</span>
|
|
332
|
+
<div class="pkg-badges">
|
|
333
|
+
<a class="pkg-badge npm" href="https://www.npmjs.com/package/@geira/iconfont" target="_blank">
|
|
334
|
+
<svg width="12" height="12" viewBox="0 0 18 7" fill="currentColor"><path d="M0 0h18v6H9V7H5V6H0V0zm1 5h2V2h1v3h1V1H1v4zm5-4v5h2V5h2V1H6zm6 0v4h2V2h1v3h1V2h1v3h1V1h-6z"/></svg>
|
|
335
|
+
npm
|
|
336
|
+
</a>
|
|
337
|
+
<a class="pkg-badge pub" href="https://pub.dev/packages/geira_icons" target="_blank">
|
|
338
|
+
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l7.5 3.75L12 11.68 4.5 7.93 12 4.18zM4 9.5l7 3.5v6.82L4 16.32V9.5zm9 10.32V12.98l7-3.5v6.82L13 19.82z"/></svg>
|
|
339
|
+
pub.dev
|
|
340
|
+
</a>
|
|
341
|
+
</div>
|
|
342
|
+
<div class="search-wrap">
|
|
343
|
+
<span class="geira-icons search-icon gi-search"></span>
|
|
344
|
+
<input type="search" id="search" placeholder="Search by name or tag…" autocomplete="off">
|
|
345
|
+
</div>
|
|
346
|
+
</header>
|
|
347
|
+
|
|
348
|
+
<nav>
|
|
349
|
+
<button class="active" data-tab="gallery">Icons</button>
|
|
350
|
+
<button data-tab="usage">Usage</button>
|
|
351
|
+
</nav>
|
|
352
|
+
|
|
353
|
+
<div id="gallery" class="tab active">
|
|
354
|
+
<div class="gallery-header">
|
|
355
|
+
<span class="count" id="count"></span>
|
|
356
|
+
</div>
|
|
357
|
+
<div class="grid" id="grid"></div>
|
|
358
|
+
<div class="no-results" id="no-results" style="display:none">
|
|
359
|
+
<span class="geira-icons gi-search"></span>
|
|
360
|
+
No icons match your search.
|
|
361
|
+
</div>
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
<div id="usage" class="tab">
|
|
365
|
+
<div class="usage">
|
|
366
|
+
<h2>Using Geira Icons</h2>
|
|
367
|
+
<div class="pkg-links">
|
|
368
|
+
<a class="pkg-link" href="https://www.npmjs.com/package/@geira/iconfont" target="_blank">
|
|
369
|
+
<span class="dot npm"></span> @geira/iconfont on npm
|
|
370
|
+
</a>
|
|
371
|
+
<a class="pkg-link" href="https://pub.dev/packages/geira_icons" target="_blank">
|
|
372
|
+
<span class="dot pub"></span> geira_icons on pub.dev
|
|
373
|
+
</a>
|
|
374
|
+
</div>
|
|
375
|
+
|
|
376
|
+
<h3>Install</h3>
|
|
377
|
+
<pre><code># Web / npm
|
|
378
|
+
npm install @geira/iconfont
|
|
379
|
+
|
|
380
|
+
# Flutter / pub.dev
|
|
381
|
+
flutter pub add geira_icons</code></pre>
|
|
382
|
+
|
|
383
|
+
<h3>Include CSS</h3>
|
|
384
|
+
<pre><code><link rel="stylesheet" href="node_modules/@geira/iconfont/dist/geira-icons.css"></code></pre>
|
|
385
|
+
<p>Or via SCSS:</p>
|
|
386
|
+
<pre><code>@use '@geira/iconfont/dist/geira-icons';</code></pre>
|
|
387
|
+
|
|
388
|
+
<h3>Class-based usage (recommended)</h3>
|
|
389
|
+
<pre><code><span class="geira-icons gi-pencil"></span></code></pre>
|
|
390
|
+
|
|
391
|
+
<h3>Ligature-based usage</h3>
|
|
392
|
+
<pre><code><span class="geira-icons">pencil</span></code></pre>
|
|
393
|
+
|
|
394
|
+
<h3>Size modifiers</h3>
|
|
395
|
+
<div class="demo-row">
|
|
396
|
+
<span class="demo-chip"><span class="geira-icons gi-18 gi-pencil"></span> .gi-18</span>
|
|
397
|
+
<span class="demo-chip"><span class="geira-icons gi-24 gi-pencil"></span> .gi-24</span>
|
|
398
|
+
<span class="demo-chip"><span class="geira-icons gi-36 gi-pencil"></span> .gi-36</span>
|
|
399
|
+
<span class="demo-chip"><span class="geira-icons gi-48 gi-pencil"></span> .gi-48</span>
|
|
400
|
+
</div>
|
|
401
|
+
|
|
402
|
+
<h3>Color modifiers</h3>
|
|
403
|
+
<pre><code><span class="geira-icons gi-pencil gi-dark"></span>
|
|
404
|
+
<span class="geira-icons gi-pencil gi-dark gi-inactive"></span>
|
|
405
|
+
<span class="geira-icons gi-pencil gi-light"></span></code></pre>
|
|
406
|
+
|
|
407
|
+
<h3>Transform modifiers</h3>
|
|
408
|
+
<div class="demo-row">
|
|
409
|
+
<span class="demo-chip"><span class="geira-icons gi-rotate-90 gi-pencil"></span> .gi-rotate-90</span>
|
|
410
|
+
<span class="demo-chip"><span class="geira-icons gi-rotate-180 gi-pencil"></span> .gi-rotate-180</span>
|
|
411
|
+
<span class="demo-chip"><span class="geira-icons gi-flip-h gi-pencil"></span> .gi-flip-h</span>
|
|
412
|
+
<span class="demo-chip"><span class="geira-icons gi-spin gi-wifi"></span> .gi-spin</span>
|
|
413
|
+
</div>
|
|
414
|
+
</div>
|
|
415
|
+
</div>
|
|
416
|
+
|
|
417
|
+
<footer>
|
|
418
|
+
<p>©<span id="year"></span> <a href="https://liontude.com" target="_blank">Liontude</a>. All Rights Reserved. Released under MIT License.</p>
|
|
419
|
+
</footer>
|
|
420
|
+
|
|
421
|
+
<div id="toast"></div>
|
|
422
|
+
|
|
423
|
+
<script>
|
|
424
|
+
const ICONS = [{"name":"none","unicode":"E000","tags":["clear","empty","blank","null","placeholder"]},{"name":"pencil","unicode":"E001","tags":["edit","write","draw","create","modify","pen"]},{"name":"brush","unicode":"E002","tags":["paint","art","design","draw","create","color"]},{"name":"wifi","unicode":"E004","tags":["wireless","internet","network","connection","router","signal","online"]},{"name":"chat","unicode":"E005","tags":["message","sms","conversation","bubble","text","talk","discussion"]},{"name":"notifications","unicode":"E007","tags":["alert","bell","alarm","notify","push","reminder"]},{"name":"notifications-off","unicode":"E008","tags":["alert","bell","alarm","mute","silent","disable","no","block"]},{"name":"notifications-active","unicode":"E009","tags":["alert","bell","alarm","ring","active","ringing","new"]},{"name":"send","unicode":"E00A","tags":["submit","deliver","message","arrow","sent","share","forward"]},{"name":"person","unicode":"E00B","tags":["user","account","profile","avatar","contact","member"]},{"name":"people","unicode":"E00C","tags":["group","users","team","accounts","community","members","multiple"]},{"name":"no-show","unicode":"E00D","tags":["person","hide","account","user","absent","cancel","missing","invisible"]},{"name":"person-status","unicode":"E00E","tags":["account","user","online","status","presence","active","indicator"]},{"name":"chart","unicode":"E013","tags":["poll","analytics","bar","graph","data","statistics","report","metrics"]},{"name":"back-ten","unicode":"E01C","tags":["rewind","seconds","arrow","backward","skip","time","player"]},{"name":"forth-ten","unicode":"E01D","tags":["forward","seconds","arrow","skip","time","player","ahead"]},{"name":"shuffle","unicode":"E01E","tags":["random","mix","playlist","sort","order"]},{"name":"restore","unicode":"E01F","tags":["reset","back","undo","arrow","history","previous","recover"]},{"name":"undo","unicode":"E02A","tags":["reset","back","restore","arrow","history","revert","previous"]},{"name":"update","unicode":"E02B","tags":["reload","arrow","sync","refresh","upgrade"]},{"name":"refresh","unicode":"E02C","tags":["reload","update","arrow","sync","restart"]},{"name":"chevron-up","unicode":"E02D","tags":["arrow","expand","keyboard","caret","navigate","up","collapse","top"]},{"name":"chevron-right","unicode":"E02E","tags":["arrow","forward","keyboard","navigate","caret","next","right"]},{"name":"chevron-down","unicode":"E02F","tags":["arrow","expand","keyboard","caret","navigate","down","collapse","bottom","dropdown"]},{"name":"chevron-left","unicode":"E03A","tags":["arrow","back","keyboard","navigate","caret","previous","left"]},{"name":"arrow-up","unicode":"E03B","tags":["navigate","up","direction","move","top"]},{"name":"arrow-right","unicode":"E03C","tags":["forward","keyboard","navigate","next","direction","move"]},{"name":"arrow-down","unicode":"E03D","tags":["navigate","down","direction","move","bottom"]},{"name":"arrow-left","unicode":"E03E","tags":["back","keyboard","navigate","previous","direction","move"]},{"name":"delete","unicode":"E03F","tags":["remove","trash","bin","discard","erase","destroy"]},{"name":"volume","unicode":"E04C","tags":["sound","speaker","audio","loud","max"]},{"name":"volume-low","unicode":"E04D","tags":["sound","speaker","audio","quiet","soft","min"]},{"name":"volume-medium","unicode":"E04E","tags":["sound","speaker","audio","mid"]},{"name":"volume-up","unicode":"E04F","tags":["sound","speaker","audio","loud","increase","higher"]},{"name":"volume-off","unicode":"E05A","tags":["sound","speaker","mute","silent","quiet","no","audio"]},{"name":"hearing","unicode":"E05B","tags":["sound","listen","audio","accessibility","ear","deaf"]},{"name":"mic","unicode":"E05C","tags":["voice","record","audio","microphone","speech","speak"]},{"name":"mic-off","unicode":"E05D","tags":["voice","audio","microphone","mute","silent","no"]},{"name":"recording","unicode":"E05E","tags":["voice","record","audio","video","capture","live"]},{"name":"no-audio","unicode":"E05F","tags":["sound","speaker","mute","silent","disabled","block"]},{"name":"refresh-audio","unicode":"E06A","tags":["sound","speaker","volume","reload","sync","update"]},{"name":"load-audio","unicode":"E06B","tags":["sound","speaker","volume","load","download","import"]},{"name":"play-circle","unicode":"E06D","tags":["record","audio","player","media","start","begin","video","round"]},{"name":"pause-circle","unicode":"E06E","tags":["audio","player","media","wait","hold","round"]},{"name":"stop-circle","unicode":"E06F","tags":["audio","player","media","end","halt","round"]},{"name":"next-circle","unicode":"E07A","tags":["audio","player","forward","media","skip","round"]},{"name":"back-circle","unicode":"E07B","tags":["audio","player","backward","media","rewind","round"]},{"name":"record-circle","unicode":"E07C","tags":["audio","player","media","capture","live","round"]},{"name":"play","unicode":"E07D","tags":["audio","player","media","start","begin","video","record"]},{"name":"pause","unicode":"E07E","tags":["audio","player","media","wait","hold"]},{"name":"stop","unicode":"E07F","tags":["audio","player","media","end","halt"]},{"name":"skip-next","unicode":"E08A","tags":["audio","player","forward","media","next","track"]},{"name":"skip-previous","unicode":"E08B","tags":["audio","player","backward","media","previous","track"]},{"name":"previous","unicode":"E08C","tags":["arrow","caret","chevron","skip","navigate","back","rewind"]},{"name":"next","unicode":"E08D","tags":["arrow","caret","chevron","skip","navigate","forward"]},{"name":"cloud","unicode":"E097","tags":["storage","sky","online","upload","download","weather","sync"]},{"name":"upload","unicode":"E098","tags":["arrow","up","share","transfer","cloud","send","export"]},{"name":"up-balls","unicode":"E099","tags":["arrow","up","load","transfer","move"]},{"name":"download","unicode":"E09A","tags":["arrow","down","save","transfer","cloud","import","get"]},{"name":"rearrange","unicode":"E09B","tags":["arrow","reorder","sort","drag","move","organize","swap"]},{"name":"slider","unicode":"E09D","tags":["filter","setting","range","adjust","control","sort"]},{"name":"list","unicode":"E09E","tags":["menu","items","rows","collection","bullet","ordered"]},{"name":"sidebar-close","unicode":"E09F","tags":["menu","panel","drawer","hide","collapse","navigation"]},{"name":"sidebar-open","unicode":"E0A0","tags":["menu","panel","drawer","show","expand","navigation"]},{"name":"open-menu","unicode":"E0A1","tags":["text","expand","show","navigation","hamburger"]},{"name":"close-menu","unicode":"E0A2","tags":["text","collapse","hide","navigation"]},{"name":"down-menu","unicode":"E0A3","tags":["text","dropdown","expand","navigation","select"]},{"name":"up-menu","unicode":"E0A4","tags":["text","collapse","navigation"]},{"name":"launch","unicode":"E0A5","tags":["exit","open","external","link","dialog","modal","new","window"]},{"name":"exit-to-app","unicode":"E0A6","tags":["exit","logout","leave","app","out","switch"]},{"name":"menu","unicode":"E0A7","tags":["hamburger","navigation","sidebar","lines","options"]},{"name":"more-vert","unicode":"E0A8","tags":["options","dots","vertical","kebab","actions","context"]},{"name":"more-horiz","unicode":"E0A9","tags":["options","dots","horizontal","actions","context"]},{"name":"cell-phone","unicode":"E0B8","tags":["mobile","telephone","smart","device","smartphone","call"]},{"name":"phone","unicode":"E0B9","tags":["telephone","call","contact","voice","landline"]},{"name":"home","unicode":"E0BA","tags":["house","main","start","dashboard","building","beginning"]},{"name":"language","unicode":"E0BB","tags":["globe","translate","international","world","locale","earth"]},{"name":"url","unicode":"E0BC","tags":["link","web","address","browser","http","internet","href"]},{"name":"lang","unicode":"E0BD","tags":["language","translate","text","locale","alphabet"]},{"name":"lang-help","unicode":"E0BE","tags":["language","translate","help","support","locale","guide"]},{"name":"map","unicode":"E0BF","tags":["place","location","pin","navigate","gps","directions","geography"]},{"name":"country","unicode":"E0C0","tags":["place","location","flag","globe","gps","nation","world"]},{"name":"navigation","unicode":"E0C1","tags":["place","location","compass","gps","direction","guide","map"]},{"name":"notification","unicode":"E0C8","tags":["push","mobile","phone","alert","bell","badge"]},{"name":"flag","unicode":"E0C9","tags":["report","mark","signal","country","warning","bookmark"]},{"name":"place","unicode":"E0CA","tags":["location","pin","map","marker","gps","spot","point"]},{"name":"mail","unicode":"E0CB","tags":["email","envelope","message","inbox","letter","send"]},{"name":"award","unicode":"E0E7","tags":["prize","badge","medal","recognition","honor","discount","achievement"]},{"name":"trophy","unicode":"E0E8","tags":["prize","award","win","achievement","champion","cup","competition"]},{"name":"shopping-cart","unicode":"E0F5","tags":["checkout","buy","purchase","ecommerce","basket","shop","order"]},{"name":"bet","unicode":"E0F6","tags":["credit","card","debit","money","cash","casino","game","wager","gamble"]},{"name":"add-balance","unicode":"E0F7","tags":["credit","debit","money","cash","wallet","deposit","payment","top"]},{"name":"payment","unicode":"E0F8","tags":["credit","card","debit","money","cash","pay","transaction","checkout"]},{"name":"bill","unicode":"E0F9","tags":["invoice","receipt","money","cash","payment","document"]},{"name":"deal","unicode":"E0FA","tags":["prize","redeem","promo","discount","offer","bargain","sale"]},{"name":"gift","unicode":"E0FB","tags":["prize","promo","discount","present","surprise","reward","celebrate"]},{"name":"time","unicode":"E0FC","tags":["clock","schedule","watch","hour","minute","timer"]},{"name":"chronometer","unicode":"E0FD","tags":["clock","schedule","watch","stopwatch","timer","measure"]},{"name":"time-record","unicode":"E0FE","tags":["chronometer","clock","watch","stopwatch","timer","log","history"]},{"name":"hourglass","unicode":"E100","tags":["clock","time","wait","loading","countdown","sand","patience"]},{"name":"folder","unicode":"E111","tags":["doc","file","directory","storage","organize"]},{"name":"folder-open","unicode":"E112","tags":["doc","file","directory","storage","expand","open"]},{"name":"folder-add","unicode":"E113","tags":["doc","file","directory","storage","new","create","plus"]},{"name":"folder-special","unicode":"E114","tags":["doc","file","directory","storage","star","favorite","important"]},{"name":"folder-delete","unicode":"E115","tags":["doc","file","directory","storage","remove","trash","discard"]},{"name":"folder-secure","unicode":"E116","tags":["doc","file","directory","storage","lock","private","encrypted"]},{"name":"page","unicode":"E117","tags":["doc","file","document","paper","sheet"]},{"name":"book","unicode":"E118","tags":["study","docs","read","learning","knowledge","pages"]},{"name":"test","unicode":"E119","tags":["study","exam","quiz","assessment","evaluation"]},{"name":"flash-cards","unicode":"E11A","tags":["study","learning","flip","flashcard","memorize","review"]},{"name":"test-repeat","unicode":"E11B","tags":["study","exam","quiz","retry","redo","practice","again"]},{"name":"test-star","unicode":"E11C","tags":["study","exam","quiz","favorite","rate","important"]},{"name":"test-daily","unicode":"E11D","tags":["study","exam","quiz","calendar","daily","schedule","routine"]},{"name":"audiobook","unicode":"E123","tags":["study","docs","book","audio","listen","learning","podcast"]},{"name":"pdf","unicode":"E124","tags":["page","doc","file","document","acrobat","format"]},{"name":"doc","unicode":"E125","tags":["page","document","file","word","text","write"]},{"name":"jpg","unicode":"E126","tags":["image","photo","picture","file","format"]},{"name":"png","unicode":"E127","tags":["image","photo","picture","file","format","transparent"]},{"name":"chevron-tr","unicode":"E130","tags":["arrow","diagonal","caret","top","right","corner","expand"]},{"name":"chevron-dr","unicode":"E131","tags":["arrow","diagonal","caret","down","right","corner","collapse"]},{"name":"chevron-dl","unicode":"E132","tags":["arrow","diagonal","caret","down","left","corner"]},{"name":"chevron-tl","unicode":"E133","tags":["arrow","diagonal","caret","top","left","corner"]},{"name":"check","unicode":"E134","tags":["mark","done","complete","confirm","tick","yes","correct","ok"]},{"name":"check-outline","unicode":"E135","tags":["mark","done","complete","confirm","tick","yes","border","outline"]},{"name":"checked","unicode":"E136","tags":["square","mark","box","checkbox","selected","true","active"]},{"name":"unchecked","unicode":"E137","tags":["square","mark","box","checkbox","empty","false","inactive"]},{"name":"rb-checked","unicode":"E139","tags":["circle","mark","radio","button","selected","active","dot"]},{"name":"rb-unchecked","unicode":"E13A","tags":["circle","mark","radio","button","empty","inactive"]},{"name":"match","unicode":"E13B","tags":["correspond","align","fit","check","equal","compare","verify"]},{"name":"thunder","unicode":"E162","tags":["lightning","bolt","electric","weather","flash","energy","storm","power"]},{"name":"temperature","unicode":"E163","tags":["thermometer","hot","warm","cold","heat","weather","celsius","degree"]},{"name":"odd-even","unicode":"E164","tags":["alternating","split","fire","warm","pattern"]},{"name":"hot","unicode":"E165","tags":["fire","warm","heat","burn","temperature","flame"]},{"name":"cold","unicode":"E166","tags":["ice","frozen","snow","temperature","winter","cool","freeze"]},{"name":"hot-cold","unicode":"E167","tags":["fire","ice","cold","temperature","contrast","both","warm"]},{"name":"delta","unicode":"E168","tags":["change","difference","triangle","math","variation","sign"]},{"name":"delta-cold","unicode":"E169","tags":["cold","frozen","change","difference","ice","sign"]},{"name":"delta-hot","unicode":"E16A","tags":["hot","fire","warm","change","difference","sign"]},{"name":"sum","unicode":"E16B","tags":["plus","add","total","math","sigma","aggregate","count"]},{"name":"sum-hot","unicode":"E16C","tags":["plus","add","fire","warm","total","hot"]},{"name":"sum-cold","unicode":"E16D","tags":["plus","add","ice","cold","frozen","total"]},{"name":"face-id","unicode":"E177","tags":["fingerprint","identity","biometric","security","face","recognition","passcode","auth"]},{"name":"scan","unicode":"E17F","tags":["barcode","qr","code","reader","capture"]},{"name":"retry-scan","unicode":"E180","tags":["barcode","qr","code","reader","retry","reload","again"]},{"name":"ar-horiz","unicode":"E181","tags":["aspect","ratio","horizontal","landscape","resize","widescreen"]},{"name":"ar-vert","unicode":"E182","tags":["aspect","ratio","vertical","portrait","resize"]},{"name":"parking","unicode":"E19F","tags":["car","spot","vehicle","park","transport","p"]},{"name":"bike","unicode":"E1A0","tags":["bicycle","cycling","transport","pedal","eco"]},{"name":"walk","unicode":"E1A1","tags":["pedestrian","foot","transport","direction","step"]},{"name":"girl","unicode":"E1A2","tags":["child","kid","female","young","person"]},{"name":"boy","unicode":"E1A3","tags":["child","kid","male","young","person"]},{"name":"disabled","unicode":"E1A4","tags":["wheelchair","accessibility","handicap","inclusive","mobility"]},{"name":"photo-id","unicode":"E1A5","tags":["identity","badge","passport","document","id","credential"]},{"name":"learn","unicode":"E1A6","tags":["study","education","user","account","person","student","knowledge"]},{"name":"examen","unicode":"E1A7","tags":["exam","test","study","assessment","person","student","education"]},{"name":"video-call","unicode":"E1A8","tags":["virtual","mobile","conference","camera","meet","online","person"]},{"name":"interview","unicode":"E1A9","tags":["person","people","talk","virtual","meeting","conversation","hire"]},{"name":"politician","unicode":"E1CC","tags":["speech","president","podium","government","leader","public"]},{"name":"bull","unicode":"E1CD","tags":["animal","horns","stock","market","strong","cow"]},{"name":"cow","unicode":"E1CE","tags":["animal","farm","livestock","bull","dairy"]},{"name":"verified","unicode":"E1E1","tags":["shield","security","check","trusted","authenticated","approved","safe"]},{"name":"verified-user","unicode":"E1E2","tags":["shield","security","person","account","trusted","authenticated"]},{"name":"lock","unicode":"E1E3","tags":["padlock","secure","private","password","closed","protect","safe"]},{"name":"lock-open","unicode":"E1E4","tags":["padlock","unlock","open","access","insecure"]},{"name":"advertising","unicode":"E1FA","tags":["ads","publicity","campaign","marketing","promote","banner"]},{"name":"no-advertising","unicode":"E1FB","tags":["ads","publicity","campaign","marketing","block","mute","ban"]},{"name":"video","unicode":"E1FC","tags":["camera","record","media","film","movie","clip","play"]},{"name":"alert","unicode":"E200","tags":["warning","error","danger","caution","exclamation","notice"]},{"name":"question-answer","unicode":"E201","tags":["faqs","help","chat","support","bubble","qa","info"]},{"name":"info","unicode":"E202","tags":["help","information","about","details","notice","tooltip"]},{"name":"help","unicode":"E203","tags":["support","faq","question","assistance","guidance","info"]},{"name":"error","unicode":"E204","tags":["warning","alert","danger","bug","problem","failed","issue"]},{"name":"visibility","unicode":"E205","tags":["eye","show","visible","view","display","see","preview"]},{"name":"visibility-off","unicode":"E206","tags":["eye","hide","invisible","blind","conceal","mask","password"]},{"name":"thumb-up","unicode":"E207","tags":["like","approve","positive","vote","good","agree","yes"]},{"name":"thumb-down","unicode":"E208","tags":["unlike","dislike","reject","negative","vote","bad","disagree"]},{"name":"favorite-border","unicode":"E209","tags":["like","heart","love","wish","unfilled","outline","hollow"]},{"name":"favorite","unicode":"E20A","tags":["like","heart","love","wish","filled","saved","loved"]},{"name":"favorite-dislike","unicode":"E20B","tags":["heart","unlike","dislike","broken","removed","unlike"]},{"name":"share","unicode":"E20C","tags":["social","distribute","forward","export","send","spread"]},{"name":"bookmark","unicode":"E20D","tags":["save","mark","tag","favorite","reading","later","store"]},{"name":"star-border","unicode":"E20E","tags":["grade","rate","empty","unfilled","outline","review"]},{"name":"star-half","unicode":"E20F","tags":["rate","partial","half","review","rating"]},{"name":"star","unicode":"E210","tags":["rate","grade","favorite","quality","review","featured"]},{"name":"rate","unicode":"E211","tags":["review","star","comment","thumb","feedback","grade"]},{"name":"ticket","unicode":"E212","tags":["voucher","pass","event","coupon","entry","admission"]},{"name":"game","unicode":"E213","tags":["play","console","gaming","entertainment","joystick","fun"]},{"name":"lotto","unicode":"E214","tags":["luck","bingo","casino","gaming","lottery","draw","chance"]},{"name":"cabala","unicode":"E215","tags":["eye","luck","dream","mystical","spiritual","symbol"]},{"name":"clover","unicode":"E216","tags":["luck","dream","lottery","green","shamrock","chance"]},{"name":"legal","unicode":"E219","tags":["lawyer","justice","court","law","gavel","scale","rules"]},{"name":"sad-face","unicode":"E22D","tags":["emoji","sad","unhappy","cry","emotion","frown","negative"]},{"name":"happy-face","unicode":"E22E","tags":["emoji","happy","smile","joy","emotion","positive","grin"]},{"name":"dictation","unicode":"E22F","tags":["voice","sound","write","speech","microphone","transcribe"]},{"name":"oral","unicode":"E230","tags":["record","speech","mic","text","voice","exam","speak","talk"]},{"name":"event-available","unicode":"E231","tags":["calendar","date","appointment","schedule","check","done","free"]},{"name":"upcoming","unicode":"E232","tags":["calendar","date","appointment","schedule","future","next","soon"]},{"name":"past","unicode":"E233","tags":["calendar","date","appointment","schedule","history","previous","done"]},{"name":"event","unicode":"E234","tags":["calendar","date","appointment","schedule","today","meeting"]},{"name":"no-event","unicode":"E235","tags":["calendar","date","appointment","schedule","cancel","empty","blocked"]},{"name":"month","unicode":"E236","tags":["calendar","date","appointment","schedule","monthly","view","grid"]},{"name":"dashboard","unicode":"E23A","tags":["home","main","overview","panel","admin","control","summary"]},{"name":"campaign","unicode":"E23B","tags":["megaphone","bullhorn","mic","marketing","ads","announce","broadcast"]},{"name":"unpin","unicode":"E243","tags":["pin","locate","remove","detach","unmark"]},{"name":"push-pin","unicode":"E244","tags":["pin","locate","attach","tack","mark","fixed"]},{"name":"search","unicode":"E245","tags":["magnifying","zoom","find","query","lookup","discover"]},{"name":"search-page","unicode":"E246","tags":["magnifying","zoom","find","document","doc","page"]},{"name":"search-person","unicode":"E247","tags":["magnifying","zoom","account","user","find","profile","person"]},{"name":"search-number","unicode":"E248","tags":["magnifying","zoom","find","numeric","number","count"]},{"name":"camera","unicode":"E254","tags":["photo","picture","capture","lens","shoot","photograph"]},{"name":"no-image","unicode":"E255","tags":["photos","gallery","media","missing","broken","empty","placeholder"]},{"name":"images","unicode":"E256","tags":["collections","photos","gallery","media","pictures","album"]},{"name":"remove","unicode":"E257","tags":["minus","subtract","delete","take","away","reduce"]},{"name":"remove-circle","unicode":"E258","tags":["minus","subtract","delete","round","button"]},{"name":"add","unicode":"E259","tags":["plus","sum","create","new","insert","increase"]},{"name":"add-circle","unicode":"E25A","tags":["plus","sum","create","new","insert","round","button"]},{"name":"close","unicode":"E25B","tags":["cancel","clear","dismiss","exit","x","remove","cross"]},{"name":"cancel","unicode":"E25C","tags":["clear","close","dismiss","abort","stop","x"]},{"name":"filter","unicode":"E25D","tags":["sort","refine","search","criteria","narrow","adjust"]},{"name":"edit","unicode":"E25E","tags":["create","pen","modify","write","change","update","pencil"]},{"name":"settings","unicode":"E25F","tags":["gear","config","preferences","options","configure","system","control"]},{"name":"save","unicode":"E260","tags":["disk","store","write","floppy","preserve","keep"]},{"name":"add-square","unicode":"E262","tags":["plus","add","insert","box","create","new"]},{"name":"remove-square","unicode":"E263","tags":["minus","subtract","delete","box","reduce"]},{"name":"more-less","unicode":"E264","tags":["approximately","roughly","plus","minus","compare","estimate","range"]},{"name":"total","unicode":"E265","tags":["amount","sum","count","math","aggregate","result","all"]},{"name":"number","unicode":"E266","tags":["hashtag","hash","count","numeric","pound","figure"]},{"name":"television","unicode":"E26B","tags":["tv","monitor","screen","display","broadcast","channel","watch"]},{"name":"store","unicode":"E26C","tags":["storefront","business","local","shop","retail","commerce","market"]},{"name":"drink","unicode":"E26D","tags":["beverage","bar","wine","cocktail","glass","amenity","alcohol"]},{"name":"open-box","unicode":"E271","tags":["gift","resource","surprise","unboxing","package","delivery"]},{"name":"briefcase","unicode":"E274","tags":["portfolio","work","job","business","luggage","bag","professional","docs"]},{"name":"bulb-number","unicode":"E279","tags":["hint","idea","think","count","tip","light","numbered"]},{"name":"bulb-on","unicode":"E27A","tags":["idea","hint","think","active","bright","light","enabled"]},{"name":"bulb","unicode":"E27B","tags":["idea","hint","think","inactive","off","light","suggestion"]},{"name":"cashier","unicode":"E27C","tags":["pos","cash","register","checkout","payment","store","retail"]},{"name":"afternoon","unicode":"E285","tags":["sun","noon","day","bright","weather","daytime"]},{"name":"evening","unicode":"E286","tags":["moon","night","dark","dusk","sky","weather","nighttime"]},{"name":"full-square","unicode":"E287","tags":["square","filled","shape","block","solid"]},{"name":"full-dot","unicode":"E288","tags":["circle","dot","filled","point","bullet","round"]},{"name":"brightness-1","unicode":"E289","tags":["brightness","light","sun","display"]},{"name":"brightness-2","unicode":"E28A","tags":["brightness","light","sun","display"]},{"name":"brightness-3","unicode":"E28B","tags":["brightness","light","sun","display"]},{"name":"brightness-4","unicode":"E28C","tags":["brightness","light","sun","display"]},{"name":"brightness-5","unicode":"E28D","tags":["brightness","light","sun","display"]},{"name":"brightness-6","unicode":"E28E","tags":["brightness","light","sun","display"]},{"name":"brightness-7","unicode":"E28F","tags":["brightness","light","sun","display"]},{"name":"facebook","unicode":"E291","tags":["social","network","fb","social media","meta"]},{"name":"twitter","unicode":"E292","tags":["social","network","tweet","bird","social media"]},{"name":"youtube","unicode":"E293","tags":["social","network","video","streaming","social media","watch"]},{"name":"instagram","unicode":"E294","tags":["social","network","photo","stories","social media","reel"]},{"name":"linkedin","unicode":"E295","tags":["social","network","professional","job","social media","career"]},{"name":"github","unicode":"E2A0","tags":["code","repository","git","developer","open source","version","logo"]},{"name":"gitlab","unicode":"E2A1","tags":["code","repository","git","developer","devops","logo"]},{"name":"npm","unicode":"E2A2","tags":["package","javascript","node","developer","registry","logo"]},{"name":"apple-logo","unicode":"E2A3","tags":["brand","ios","mac","tech","logo"]},{"name":"facebook-logo","unicode":"E2A4","tags":["brand","social","fb","meta","logo"]},{"name":"google-logo","unicode":"E2A5","tags":["brand","search","tech","logo"]},{"name":"whatsapp-logo","unicode":"E2A6","tags":["brand","messaging","chat","social","logo"]},{"name":"x-logo","unicode":"E2A7","tags":["twitter","brand","social","logo"]},{"name":"logo","unicode":"E2AF","tags":["brand","geira","create","art","font","identity"]}];
|
|
425
|
+
|
|
426
|
+
const grid = document.getElementById('grid');
|
|
427
|
+
const countEl = document.getElementById('count');
|
|
428
|
+
const noResults = document.getElementById('no-results');
|
|
429
|
+
const searchInput = document.getElementById('search');
|
|
430
|
+
|
|
431
|
+
function render(query) {
|
|
432
|
+
const q = (query || '').toLowerCase().trim();
|
|
433
|
+
const filtered = q
|
|
434
|
+
? ICONS.filter(ic => ic.name.includes(q) || ic.tags.some(t => t.includes(q)))
|
|
435
|
+
: ICONS;
|
|
436
|
+
|
|
437
|
+
countEl.textContent = filtered.length + ' icons';
|
|
438
|
+
grid.innerHTML = '';
|
|
439
|
+
noResults.style.display = filtered.length === 0 ? 'block' : 'none';
|
|
440
|
+
|
|
441
|
+
for (const ic of filtered) {
|
|
442
|
+
const card = document.createElement('div');
|
|
443
|
+
card.className = 'icon-card';
|
|
444
|
+
card.innerHTML =
|
|
445
|
+
'<span class="geira-icons gi-' + ic.name + '"></span>' +
|
|
446
|
+
'<div class="name">' + ic.name + '</div>' +
|
|
447
|
+
'<div class="uni">' + ic.unicode + '</div>';
|
|
448
|
+
card.addEventListener('click', () => copyClass(card, '.gi-' + ic.name));
|
|
449
|
+
grid.appendChild(card);
|
|
450
|
+
}
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
function copyClass(card, cls) {
|
|
454
|
+
navigator.clipboard.writeText(cls).then(() => {
|
|
455
|
+
card.classList.add('copied');
|
|
456
|
+
showToast('Copied ' + cls);
|
|
457
|
+
setTimeout(() => card.classList.remove('copied'), 1000);
|
|
458
|
+
});
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
const toast = document.getElementById('toast');
|
|
462
|
+
let toastTimer;
|
|
463
|
+
function showToast(msg) {
|
|
464
|
+
toast.textContent = msg;
|
|
465
|
+
toast.classList.add('show');
|
|
466
|
+
clearTimeout(toastTimer);
|
|
467
|
+
toastTimer = setTimeout(() => toast.classList.remove('show'), 1800);
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
searchInput.addEventListener('input', e => render(e.target.value));
|
|
471
|
+
|
|
472
|
+
document.querySelectorAll('nav button').forEach(btn => {
|
|
473
|
+
btn.addEventListener('click', () => {
|
|
474
|
+
document.querySelectorAll('nav button').forEach(b => b.classList.remove('active'));
|
|
475
|
+
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
476
|
+
btn.classList.add('active');
|
|
477
|
+
document.getElementById(btn.dataset.tab).classList.add('active');
|
|
478
|
+
});
|
|
479
|
+
});
|
|
480
|
+
|
|
481
|
+
document.getElementById('year').textContent = new Date().getFullYear();
|
|
482
|
+
render('');
|
|
483
|
+
|
|
484
|
+
// Live reload (dev server only)
|
|
485
|
+
(function () {
|
|
486
|
+
if (!location.hostname || location.hostname === '') return;
|
|
487
|
+
const ws = new WebSocket('ws://' + location.host);
|
|
488
|
+
ws.onmessage = e => {
|
|
489
|
+
const msg = JSON.parse(e.data);
|
|
490
|
+
if (msg.type === 'reload') location.reload();
|
|
491
|
+
};
|
|
492
|
+
ws.onclose = () => setTimeout(() => location.reload(), 1000);
|
|
493
|
+
})();
|
|
494
|
+
</script>
|
|
495
|
+
</body>
|
|
496
|
+
</html>
|
|
File without changes
|