0
150
ViewsLlamar al objeto de matriz en src no funciona
tengo una matriz:
let x = ''; let elements = [ { icon:"Home",name:'Home',page:'Page1' }, { icon:'Cube',name:'New',page:'Page2' }];Estoy haciendo un bucle en él:
{#each elements as { icon, name, page }, i} <Icon src={icon} size="24" />Esto aquí no funciona: src={icon}
La forma correcta debería ser así:
<Icon src="{Filter}" solid />Si reemplazo el {icono} con una cadena, ¡funciona! ¿Alguien puede decirme por qué? Gracias
3 answers
Answer question0
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>0
He usado la etiqueta p en lugar del ícono, pero puede usar o generar un ícono con
0
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.