Custom SVG in Svelte 5

types.ts

import type { Snippet } from 'svelte';

export type WithElementRef<T, U extends HTMLElement | SVGElement = HTMLElement> = T & {
  ref?: U | null;
};

export type WithElementRefAndChild<
  T,
  U extends HTMLElement | SVGElement = HTMLElement
> = WithElementRef<T, U> & { child?: Snippet<[{ props: T }]> };

users-group.svelte

<script lang="ts">
	import type { WithElementRef } from '$lib/utils/types.js';
	import type { SVGAttributes } from 'svelte/elements';

	// biome-ignore lint/style/useConst: via bindable
	let {
		size = 16,
		ref = $bindable(null),
		...rest
	}: WithElementRef<SVGAttributes<SVGElement> & { size?: number }, SVGElement> = $props();
</script>

<svg
	height={size}
	stroke-linejoin="round"
	viewBox="0 0 101 100"
	width={size}
	style="color: currentColor;"
	bind:this={ref}
	{...rest}
>
	<path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M50.436 52.4379C37.572 52.4379 27.106 62.9039 27.106 75.7669V77.2229H73.765V75.7669C73.765 62.9039 63.299 52.4379 50.436 52.4379ZM30.068 74.3119C30.817 63.7299 39.666 55.3489 50.435 55.3489C61.204 55.3489 70.053 63.7289 70.802 74.3119H30.068ZM50.052 50.0519C57.573 50.0519 63.691 43.9329 63.691 36.4129C63.691 28.8929 57.572 22.7759 50.052 22.7759C42.533 22.7759 36.416 28.8939 36.416 36.4129C36.417 43.9329 42.534 50.0519 50.052 50.0519ZM50.052 25.6869C55.967 25.6869 60.78 30.4989 60.78 36.4129C60.78 42.3279 55.967 47.1409 50.052 47.1409C44.138 47.1409 39.327 42.3279 39.327 36.4129C39.328 30.4989 44.138 25.6869 50.052 25.6869ZM19.244 60.9619C21.886 60.9619 24.481 61.6669 26.749 63.0009L28.225 60.4919C25.5021 58.8929 22.4016 58.0502 19.244 58.0509C9.47495 58.0509 1.52795 65.9979 1.52795 75.7679V77.2239H23.205V74.3129H4.50995C5.24295 66.8279 11.572 60.9619 19.244 60.9619ZM18.961 55.2239C24.758 55.2239 29.474 50.5089 29.474 44.7129C29.474 38.9159 24.758 34.1999 18.961 34.1999C13.166 34.1999 8.45195 38.9159 8.45195 44.7129C8.45095 50.5089 13.166 55.2239 18.961 55.2239ZM18.961 37.1109C23.153 37.1109 26.563 40.5209 26.563 44.7129C26.563 48.9039 23.153 52.3129 18.961 52.3129C14.771 52.3129 11.363 48.9039 11.363 44.7129C11.362 40.5209 14.771 37.1109 18.961 37.1109ZM81.756 58.0509C78.5959 58.0509 75.49 58.8949 72.775 60.4919L74.25 63.0009C76.5254 61.6649 79.1163 60.9609 81.755 60.9619C89.4279 60.9619 95.756 66.8289 96.489 74.3119H77.798V77.2229H99.471V75.7669C99.472 65.9979 91.5249 58.0509 81.756 58.0509ZM82.04 55.2239C87.837 55.2239 92.553 50.5089 92.553 44.7129C92.553 38.9159 87.837 34.1999 82.04 34.1999C76.245 34.1999 71.531 38.9159 71.531 44.7129C71.531 50.5089 76.245 55.2239 82.04 55.2239ZM82.04 37.1109C86.232 37.1109 89.642 40.5209 89.642 44.7129C89.642 48.9039 86.232 52.3129 82.04 52.3129C77.85 52.3129 74.442 48.9039 74.442 44.7129C74.442 40.5209 77.85 37.1109 82.04 37.1109Z"
    fill="#884EE6"
  />
</svg>