Copy page

Components

DynamicIcon

src/lib/components/ui/dynamic-icon/DynamicIcon.svelte

Purpose

Renders any Lucide™ icon by name at runtime. The icon name is not known at build time (e.g. it comes from module configuration), so a static import is not possible. DynamicIcon solves this by pre-registering every icon module under @lucide/svelte/dist/icons/*.svelte via import.meta.glob, then lazy-loading and caching the requested icon on first use.

Origin

Custom — fully Primebrick-written. Uses import.meta.glob (Vite) and @lucide/svelte. Not vendored from any registry.

How it works

1. A module-level import.meta.glob('/node_modules/@lucide/svelte/dist/icons/*.svelte') call produces a map of path → lazy import function that Vite can statically analyze. This is required because Vite cannot resolve dynamic import() with template literals.
2. On each name change, an $effect calls loadIcon(name) which looks up the loader for /node_modules/@lucide/svelte/dist/icons/${name}.svelte, invokes it, and caches the resolved component in a Map.
3. While the chunk loads, a placeholder <span> of the icon's size keeps layout stable.
4. If the name is not found, a warning is logged and nothing renders.

Usage

Default

Code
<DynamicIcon name="package" size={16} />

With a class

Code
<DynamicIcon name="settings" size={20} class="text-muted-foreground" />

Driven by module config

Code
<DynamicIcon name={module.icon_name} size={18} />

Props

Full prop table: see API reference — dynamicicon.

Props: name: string, size?: number = 16, class?: string.

Next steps

• Component catalog
• UI stack
• API reference