Skip to content

Commit 9d7d10b

Browse files
catdevnullcatdevnull
committed
usar iconos de forma mas eficiente
1 parent 687db60 commit 9d7d10b

File tree

4 files changed

+64
-23
lines changed

4 files changed

+64
-23
lines changed

‎sitio-sveltekit/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@
3636
"vite": "^6.0.0"
3737
},
3838
"dependencies": {
39-
"@iconify/svelte": "^4.1.0",
4039
"@sentry/sveltekit": "^8",
4140
"@tailwindcss/typography": "^0.5.15",
4241
"d3": "^7.9.0",

‎sitio-sveltekit/src/lib/components/icon.svelte

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts">
2+
export let icon:
3+
| 'fa6-solid-plane'
4+
| 'fa6-solid-plane-slash'
5+
| 'grommet-icons-info'
6+
| 'lucide-plane-takeoff'; // definidos en `+layout.svelte`
7+
</script>
8+
9+
<svg {...$$restProps}>
10+
<use href={`#${icon}`} />
11+
</svg>

‎sitio-sveltekit/src/routes/+layout.svelte

+37
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,40 @@
4141
<div class="min-h-screen bg-white dark:bg-neutral-900 dark:text-neutral-200">
4242
{@render children()}
4343
</div>
44+
45+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
46+
<defs>
47+
<symbol viewBox="0 0 576 512" id="fa6-solid-plane">
48+
<path
49+
fill="currentColor"
50+
d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64H365.7L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1h-56.2c-10.6 0-18.3-10.2-15.4-20.4l49-171.6H112l-43.2 57.6c-3 4-7.8 6.4-12.8 6.4H14c-7.8 0-14-6.3-14-14c0-1.3.2-2.6.5-3.9L32 256L.5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14h42c5 0 9.8 2.4 12.8 6.4L112 192h102.9l-49-171.6c-3-10.2 4.7-20.4 15.3-20.4h56.2c11.5 0 22.1 6.2 27.8 16.1L365.7 192z"
51+
></path></symbol
52+
>
53+
<symbol viewBox="0 0 640 512" id="fa6-solid-plane-slash"
54+
><path
55+
fill="currentColor"
56+
d="M514.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64h-73.8l190.3 149.1c10.4 8.2 12.3 23.3 4.1 33.7s-23.3 12.3-33.7 4.1l-592-464C-1.2 34.7-3.1 19.6 5.1 9.2S28.4-3.1 38.8 5.1l199.3 156.2l-40.3-140.9C194.9 10.2 202.6 0 213.2 0h56.2c11.5 0 22.1 6.2 27.8 16.1L397.7 192zM41.5 128.7l321 252.9l-65.3 114.3c-5.7 10-16.3 16.1-27.8 16.1h-56.2c-10.6 0-18.3-10.2-15.4-20.4l49-171.6H144l-43.2 57.6c-3 4-7.8 6.4-12.8 6.4H46c-7.8 0-14-6.3-14-14c0-1.3.2-2.6.5-3.9L64 256L32.5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-6.2 4-11.4 9.5-13.3"
57+
></path></symbol
58+
>
59+
60+
<symbol viewBox="0 0 24 24" id="grommet-icons-info"
61+
><path
62+
fill="none"
63+
stroke="currentColor"
64+
stroke-width="2"
65+
d="M15 17c0-3 4-5 4-9s-3-7-7-7s-7 3-7 7s4 6 4 9v3q0 3 3 3t3-3zm-6 1h6"
66+
></path></symbol
67+
>
68+
69+
<symbol viewBox="0 0 24 24" id="lucide-plane-takeoff"
70+
><path
71+
fill="none"
72+
stroke="currentColor"
73+
stroke-linecap="round"
74+
stroke-linejoin="round"
75+
stroke-width="2"
76+
d="M2 22h20M6.36 17.4L4 17l-2-4l1.1-.55a2 2 0 0 1 1.8 0l.17.1a2 2 0 0 0 1.8 0L8 12L5 6l.9-.45a2 2 0 0 1 2.09.2l4.02 3a2 2 0 0 0 2.1.2l4.19-2.06a2.4 2.4 0 0 1 1.73-.17L21 7a1.4 1.4 0 0 1 .87 1.99l-.38.76c-.23.46-.6.84-1.07 1.08L7.58 17.2a2 2 0 0 1-1.22.18Z"
77+
></path></symbol
78+
>
79+
</defs>
80+
</svg>

‎sitio-sveltekit/src/routes/+page.svelte

+16-22
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,12 @@
1111
import type { Vuelo } from '$lib';
1212
import {
1313
AlertCircleIcon,
14-
AlertOctagonIcon,
1514
ArrowDownIcon,
1615
ArrowLeftIcon,
1716
ArrowRightIcon,
18-
ClockIcon,
19-
PlaneIcon,
2017
PlaneTakeoffIcon
2118
} from 'lucide-svelte';
22-
import NuloScienceSvg from '$lib/assets/Nulo_Science_Inc.svg';
23-
import Icon from '@iconify/svelte';
19+
import Icon from '$lib/components/icon.svelte';
2420
import AverageVis from './average-vis.svelte';
2521
import { getDelayColor, COLOR_CLASSES } from '$lib/colors';
2622
import { AEROPUERTOS_FLYBONDI } from '@/aeropuertos-flybondi';
@@ -89,7 +85,6 @@
8985
if (b.json.estes === 'Cancelado') return 1;
9086
return b.delta - a.delta;
9187
});
92-
$: console.log(vuelos, todosLosVuelos);
9388
$: aerolineasVuelosAterrizados = todosLosVuelos.filter(
9489
(vuelo) =>
9590
vuelo.json.idaerolinea === 'AR' &&
@@ -260,21 +255,22 @@
260255
.format('YYYY-MM-DD')}{aerolineaSeleccionada !== 'FO'
261256
? '&aerolinea=' + aerolineaSeleccionada
262257
: ''}"
258+
aria-label="Ir al día anterior"
263259
>
264260
<ArrowLeftIcon class="h-4 w-4" />
265261
</Button>
266262
{:else}
267263
<div></div>
268264
{/if}
269265
<div class="flex items-center gap-4">
270-
<h3
266+
<span
271267
class="flex w-full flex-col items-center justify-center text-neutral-700 dark:text-neutral-300"
272268
>
273269
<span class="text-xs leading-tight">viendo datos de</span>
274270
<span class=" font-bold leading-tight"
275271
>{longDateFormatter.format(dayjs(date).toDate()).replace(',', '')}</span
276272
>
277-
</h3>
273+
</span>
278274
<Select.Root
279275
selected={{ value: aerolineaSeleccionada, label: AEROLINEAS[aerolineaSeleccionada] }}
280276
onSelectedChange={(e) => (aerolineaSeleccionada = e?.value as keyof typeof AEROLINEAS)}
@@ -300,6 +296,7 @@
300296
.tz('America/Argentina/Buenos_Aires')
301297
.add(1, 'day')
302298
.format('YYYY-MM-DD')}"
299+
aria-label="Ir al día siguiente"
303300
>
304301
<ArrowRightIcon class="h-4 w-4" />
305302
</Button>
@@ -320,13 +317,13 @@
320317
{#if vuelo.atda}
321318
<Icon
322319
class="h-8 w-8 {getDelayColor(vuelo.delta)}"
323-
icon="fa-solid:plane"
320+
icon="fa6-solid-plane"
324321
aria-label="Vuelo {vuelo.json.nro} con {vuelo.delta / 60} minutos de retraso"
325322
/>
326323
{:else if vuelo.json.estes === 'Cancelado'}
327324
<Icon
328325
class="h-8 w-8 text-neutral-700 dark:text-neutral-300"
329-
icon="fa-solid:plane-slash"
326+
icon="fa6-solid-plane-slash"
330327
aria-label="Vuelo {vuelo.json.nro} cancelado"
331328
/>
332329
{/if}
@@ -347,24 +344,24 @@
347344
<div class="flex items-center gap-1">
348345
<Icon
349346
class="size-4 text-neutral-700 dark:text-neutral-300"
350-
icon="fa-solid:plane-slash"
347+
icon="fa6-solid-plane-slash"
351348
/>
352349
<span>Cancelado</span>
353350
</div>
354351
<div class="flex items-center gap-1">
355-
<Icon class="size-4 text-[#b10000]" icon="fa-solid:plane" />
352+
<Icon class="size-4 text-[#b10000]" icon="fa6-solid-plane" />
356353
<span>mas de 45min</span>
357354
</div>
358355
<div class="flex items-center gap-1">
359-
<Icon class="size-4 {COLOR_CLASSES[45 * 60]}" icon="fa-solid:plane" />
356+
<Icon class="size-4 {COLOR_CLASSES[45 * 60]}" icon="fa6-solid-plane" />
360357
<span>45-30min</span>
361358
</div>
362359
<div class="flex items-center gap-1">
363-
<Icon class="size-4 {COLOR_CLASSES[30 * 60]}" icon="fa-solid:plane" />
360+
<Icon class="size-4 {COLOR_CLASSES[30 * 60]}" icon="fa6-solid-plane" />
364361
<span>30-15min</span>
365362
</div>
366363
<div class="flex items-center gap-1">
367-
<Icon class="size-4 {COLOR_CLASSES[15 * 60]}" icon="fa-solid:plane" />
364+
<Icon class="size-4 {COLOR_CLASSES[15 * 60]}" icon="fa6-solid-plane" />
368365
<span>15-0min</span>
369366
</div>
370367
</div>
@@ -379,7 +376,7 @@
379376
<AlertDialog.Root>
380377
<AlertDialog.Trigger>
381378
<Button size="icon" variant="outline" class="size-7" aria-label="Ver metodología">
382-
<Icon icon="grommet-icons:info" class="size-4" />
379+
<Icon icon="grommet-icons-info" class="size-4" />
383380
</Button>
384381
</AlertDialog.Trigger>
385382
<AlertDialog.Content>
@@ -449,7 +446,7 @@
449446
class="absolute right-4 top-4 size-7"
450447
aria-label="Ver metodología"
451448
>
452-
<Icon icon="grommet-icons:info" class="size-4" />
449+
<Icon icon="grommet-icons-info" class="size-4" />
453450
</Button>
454451
</AlertDialog.Trigger>
455452
<AlertDialog.Content>
@@ -572,10 +569,7 @@
572569
<hr class="flex-1 border-neutral-200 dark:border-neutral-700" />
573570
</div>
574571
{#each vuelos as vuelo}
575-
<div
576-
class="rounded-lg bg-neutral-100 px-2 py-1 dark:bg-neutral-800"
577-
data-id={vuelo.aerolineas_flight_id}
578-
>
572+
<div class="rounded-lg bg-neutral-100 px-2 py-1 dark:bg-neutral-800">
579573
<div class="flex flex-col justify-between">
580574
<span class="text-sm text-neutral-900 dark:text-neutral-100">
581575
<a
@@ -600,7 +594,7 @@
600594
class={`font-bold ${vuelo.json.estes === 'Cancelado' ? 'font-black text-black dark:text-neutral-100' : getDelayColor(vuelo.delta, true)} flex items-center text-sm leading-none`}
601595
>
602596
{#if vuelo.atda}
603-
<PlaneTakeoffIcon class="mr-1 h-4 w-4" />
597+
<Icon icon="lucide-plane-takeoff" class="mr-1 size-4" />
604598
{delayString(vuelo)}
605599
{:else if vuelo.json.estes === 'Cancelado'}{/if}
606600
</span>

0 commit comments

Comments
 (0)