zenno/career/ismdata: start of auto career analysis

zenno/src/lib/SpecialtyIcon.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import * as support from '$lib/data/support';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	const sizes = [70, 35, 16];
+
+	interface Props {
+		name: keyof typeof support.SPECIALTY_ICON;
+		size: (typeof sizes)[number];
+	}
+
+	let { name, size, ...rest }: Props & SvelteHTMLElements['picture'] = $props();
+
+	const icon = $derived(support.SPECIALTY_ICON[name]);
+	const avifs = $derived(
+		sizes
+			.filter((sz) => sz >= size)
+			.map((sz) => `/img/support/type/${icon}/${sz}x${sz}.avif ${sz / size}x`)
+			.join(', '),
+	);
+	const pngs = $derived(
+		sizes
+			.filter((sz) => sz >= size)
+			.map((sz) => `/img/support/type/${icon}/${sz}x${sz}.png ${sz / size}x`)
+			.join(', '),
+	);
+	const src = $derived(`/img/support/${icon}/${sizes[0]}x${sizes[0]}.png`);
+</script>
+
+<picture {...rest}>
+	<source srcset={avifs} type="image/avif" />
+	<source srcset={pngs} type="image/png" />
+	<img {src} alt={name} class="inline" width={size} height={size} loading="lazy" />
+</picture>