I import icons dynamically in Svelte?

I have a sidebar menu in a svelte +layout.svelte with dynamic links:

<script lang="ts">
        import { menuNavLinks } from '$lib/links';
    import ArrowTD from 'virtual:icons/heroicons/arrow-trending-down-16-solid';
</script>

my links.ts looks like this:

// Navigation Sitemap

export type List = Array<{ href: string; label: string; keywords: string; badge?: string }>;
export const menuNavLinks: Record<string, Array<{ title: string; list: List }>> = {
    '/docs': [
        {
            title: 'Docs',
            list: [
                { href: '/docs/introduction', label: 'Introduction', keywords: 'svelte, sirens, license, release' },
                { href: '/docs/get-started', label: 'Get Started', keywords: 'start, install, cli, tailwind, themes, stylesheets' },
                { href: '/docs/quickstart', label: 'Quickstart', keywords: 'start, setup, tutorial, guide' }
            ]
        },
//etc..

I want to define the icon name as part of this structure and have it auto imported, if that makes sense. Thanks in advance.

unplugin / unplugin-icons

I import icons dynamically in Svelte? #351