Debe importar los nombres de los iconos y usarlos en la matriz de elements sin comillas.

 <script> import { Icon, Home, Cube } from "svelte-hero-icons"; let elements = [ { icon: Home, name: "Home", page: "Page1" }, { icon: Cube, name: "New", page: "Page2" }]; </script>

 <div> {#each elements as { icon, name, page }, i} <Icon src={icon} size="32" /> {/each} </div>

He usado la etiqueta p en lugar del ícono, pero puede usar o generar un ícono con

La razón por la que esto no funciona es porque <Icon src="xxx" /> no espera una cadena sino un objeto . Si importa los iconos de la biblioteca y los registra, verá que siguen el formato:

 { "default": { "a": { "fill": "none", "viewBox": "0 0 24 24", "stroke": "currentColor", "aria-hidden": "true" }, "path": [ { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", "d": "M5 10l7-7m0 0l7 7m-7-7v18" } ] }, "solid": { "a": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "path": [ { "fill-rule": "evenodd", "d": "M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z", "clip-rule": "evenodd" } ] } }

Entonces, lo que debe hacer es importar los íconos y usarlos en su matriz de elementos como ya menciona otra respuesta. O alternativamente, importe todos los íconos en su aplicación y haga algo como

 <Icon src={allIcons[name]} />

pero luego pierdes el movimiento del árbol y haces que tu paquete sea mucho más grande.