DynamicIcon

How to use it (in your app)

DynamicIcon on this page is a docs-only helper — it exists so the gallery below can re-skin to whichever icon library you pick in the Customizer. In your own app render an icon by name (or by a direct icon reference) with the public <Icon> component:

Name takes a PascalCase Lucide name (unknown names fall back to a circle); Svg takes any Lumeo.IconSource directly (a built-in LumeoIcons.* or any Lumeo.Icons.* pack member) and wins over Name. Size via the Size preset or a Class like h-5 w-5; set Title to give the icon an accessible name (otherwise it is aria-hidden decorative). Full reference on the Icon page.

All Supported Icons

Switch the icon library in the Customizer to see all icons update live.

How It Works

DynamicIcon is a docs-only component that maps an abstract icon name to the matching Lumeo.IconSource in whichever first-party pack is currently active, rendering it through SvgGlyph. It listens to IconService.OnChange and re-renders automatically.

Bring your own SVG (third-party interop)

Svg accepts any Lumeo.IconSource, and IconSource is just inner SVG markup plus how to paint it — so you can adapt any icon source that exposes an SVG string (a custom brand glyph, an inline <path>, or any third-party icon library) with no extra dependency. Build one with IconSource.Stroke(content, viewBox, strokeWidth) for outline sets or IconSource.Fill(content, viewBox) for solid ones, then hand it to <Icon Svg> or the lower-level <SvgGlyph Svg>. The markup is rendered as-is (no sanitization) — only pass trusted, static SVG content you control, never user-supplied strings.