@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.
Files changed (65) hide show
  1. package/README.md +95 -32
  2. package/dist/{images/favicon/favicon.ico → favicon.ico} +0 -0
  3. package/dist/geira-icons.css +315 -0
  4. package/dist/geira-icons.scss +303 -138
  5. package/dist/icons.json +265 -1567
  6. package/dist/index.html +496 -1
  7. package/dist/{images/favicon/android-chrome-512x512.png → logo.png} +0 -0
  8. package/package.json +15 -40
  9. package/tags.json +2119 -0
  10. package/.idea/geira-icons-tool.iml +0 -9
  11. package/.idea/misc.xml +0 -6
  12. package/.idea/modules.xml +0 -8
  13. package/.idea/vcs.xml +0 -6
  14. package/.idea/workspace.xml +0 -43
  15. package/clean.html +0 -1077
  16. package/dist/data.min.js +0 -2
  17. package/dist/data.min.js.map +0 -1
  18. package/dist/fonts/GeiraIcons-Regular-SVG.ttf +0 -0
  19. package/dist/fonts/GeiraIcons-Regular-SVG.woff2 +0 -0
  20. package/dist/geira-icons.min.css +0 -3
  21. package/dist/geira-icons.min.css.map +0 -1
  22. package/dist/geira-icons.min.js +0 -0
  23. package/dist/images/favicon/android-chrome-192x192.png +0 -0
  24. package/dist/images/favicon/apple-touch-icon.png +0 -0
  25. package/dist/images/favicon/browserconfig.xml +0 -9
  26. package/dist/images/favicon/favicon-16x16.png +0 -0
  27. package/dist/images/favicon/favicon-32x32.png +0 -0
  28. package/dist/images/favicon/mstile-150x150.png +0 -0
  29. package/dist/images/favicon/safari-pinned-tab.svg +0 -38
  30. package/dist/images/favicon/site.webmanifest +0 -19
  31. package/dist/main.min.js +0 -2
  32. package/dist/main.min.js.map +0 -1
  33. package/dist/styles.min.css +0 -3
  34. package/dist/styles.min.css.map +0 -1
  35. package/dist/styles.min.js +0 -0
  36. package/dist/usage.html +0 -1
  37. package/dist/utils.min.js +0 -2
  38. package/dist/utils.min.js.map +0 -1
  39. package/src/fonts/GeiraIcons-Regular-SVG.ttf +0 -0
  40. package/src/fonts/GeiraIcons-Regular-SVG.woff2 +0 -0
  41. package/src/fonts/GeiraIcons-Regular.ttf +0 -0
  42. package/src/fonts/GeiraIcons-Regular.woff +0 -0
  43. package/src/fonts/GeiraIcons-Regular.woff2 +0 -0
  44. package/src/images/favicon/android-chrome-192x192.png +0 -0
  45. package/src/images/favicon/android-chrome-512x512.png +0 -0
  46. package/src/images/favicon/apple-touch-icon.png +0 -0
  47. package/src/images/favicon/browserconfig.xml +0 -9
  48. package/src/images/favicon/favicon-16x16.png +0 -0
  49. package/src/images/favicon/favicon-32x32.png +0 -0
  50. package/src/images/favicon/favicon.ico +0 -0
  51. package/src/images/favicon/mstile-150x150.png +0 -0
  52. package/src/images/favicon/safari-pinned-tab.svg +0 -38
  53. package/src/images/favicon/site.webmanifest +0 -19
  54. package/src/index.html +0 -50
  55. package/src/js/data.js +0 -1568
  56. package/src/js/data.json +0 -1
  57. package/src/js/flutter.txt +0 -261
  58. package/src/js/flutter2.txt +0 -261
  59. package/src/js/icons.json +0 -1568
  60. package/src/js/script.js +0 -51
  61. package/src/js/utils.js +0 -74
  62. package/src/scss/geira-icons.scss +0 -150
  63. package/src/scss/styles.scss +0 -286
  64. package/src/usage.html +0 -376
  65. package/webpack.config.js +0 -100
package/dist/index.html CHANGED
@@ -1 +1,496 @@
1
- <!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Geira Icons</title><link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png"><link rel="manifest" href="images/favicon/site.webmanifest"><link rel="mask-icon" href="images/favicon/safari-pinned-tab.svg" color="#5bbad5"><meta name="msapplication-TileColor" content="#2b5797"><meta name="theme-color" content="#ffffff"><script defer="defer" src="data.min.js"></script><script defer="defer" src="main.min.js"></script><script defer="defer" src="geira-icons.min.js"></script><script defer="defer" src="styles.min.js"></script><link href="geira-icons.min.css" rel="stylesheet"><link href="styles.min.css" rel="stylesheet"></head><body><div class="main"><header><h1>Geira Icons <a href="https://badge.fury.io/js/%40geira%2Ficonfont"><img src="https://badge.fury.io/js/%40geira%2Ficonfont.svg" alt="npm version" height="18"></a></h1><ul><li class="active"><a href="index.html">Icons <span id="quantity"></span></a></li><li><a href="usage.html">Usage</a></li></ul><ul class="logos"><li><a href="https://www.npmjs.com/package/@geira/iconfont" target="_blank"><i class="geira-icons">npm</i></a></li><li><a href="https://github.com/liontude/geira-icons-tool" target="_blank"><i class="geira-icons">github</i></a></li></ul></header><div class="container"><div class="search"><input id="match" placeholder="Search icon..."></div><ul id="icons"></ul></div><footer><p>&copy;2025 <a style="color: inherit; text-decoration: none;" href="https://liontude.com" target="_blank">Liontude</a>. All Rights Reserved. Released under MIT License</p></footer></div></body></html>
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>&lt;link rel="stylesheet" href="node_modules/@geira/iconfont/dist/geira-icons.css"&gt;</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>&lt;span class="geira-icons gi-pencil"&gt;&lt;/span&gt;</code></pre>
390
+
391
+ <h3>Ligature-based usage</h3>
392
+ <pre><code>&lt;span class="geira-icons"&gt;pencil&lt;/span&gt;</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>&lt;span class="geira-icons gi-pencil gi-dark"&gt;&lt;/span&gt;
404
+ &lt;span class="geira-icons gi-pencil gi-dark gi-inactive"&gt;&lt;/span&gt;
405
+ &lt;span class="geira-icons gi-pencil gi-light"&gt;&lt;/span&gt;</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>&copy;<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>