40 lines
1.1 KiB
Svelte
40 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { SvelteHTMLElements } from 'svelte/elements';
|
|
|
|
const sizes = [128, 64, 32] as const;
|
|
|
|
interface Props {
|
|
icon_id: number | null | undefined;
|
|
size: (typeof sizes)[number];
|
|
alt?: string;
|
|
}
|
|
|
|
let { icon_id, size, alt, ...rest }: Props & SvelteHTMLElements['picture'] = $props();
|
|
|
|
const icon = $derived(icon_id ?? 0);
|
|
const avifs = $derived(
|
|
sizes
|
|
.filter((sz) => sz >= size)
|
|
.map((sz) => `/img/support/${icon}/${sz}x${sz}.avif ${sz / size}x`)
|
|
.join(', '),
|
|
);
|
|
const pngs = $derived(
|
|
sizes
|
|
.filter((sz) => sz >= size)
|
|
.map((sz) => `/img/support/${icon}/${sz}x${sz}.png ${sz / size}x`)
|
|
.join(', '),
|
|
);
|
|
const src = $derived(icon !== 0 ? `/img/support/${icon}/${sizes[0]}x${sizes[0]}.png` : `/img/support/10011`);
|
|
const title = $derived(alt ?? `Support card icon ID ${icon_id}`);
|
|
</script>
|
|
|
|
{#if icon !== 0}
|
|
<picture {...rest}>
|
|
<source srcset={avifs} type="image/avif" />
|
|
<source srcset={pngs} type="image/png" />
|
|
<img {src} {title} alt={title} class="inline" width={size} height={size} loading="lazy" />
|
|
</picture>
|
|
{:else}
|
|
<div class={`w-[${size}px] h-[${size}px]`}></div>
|
|
{/if}
|