pages/src/lib/lists/link-list.svelte

<script lang="ts">
    export interface LinkEntry {
        icon?: string;
        text: string;
        link: string;
    }

    let {
        entries,
    } : {
        entries: LinkEntry[];
    } = $props();
</script>

{#snippet listEntry({ entry }: { entry: LinkEntry })}
    {#if entry.icon}
        <img height="24px" src={entry.icon} alt="Icon">
    {/if}
    {@html entry.text}
{/snippet}

<div class="list">
    {#each entries as entry}
        <a href={entry.link}>
            {@render listEntry({entry})}
        </a>
    {/each}
</div>