Estoy aprendiendo React
, y me encontré con un problema que no pude solucionar (de la forma que explico a continuación), resulta que al importar un icono de React Icons la forma es
import {FaIconName} from 'X';
Pero quise hacerlo de forma dinámica, y creé un componente que me retorna lo que estoy buscando: un <div>
con un título y un icono.
export function SidebarItem({ item }) {
return (
<div className='sidebar_item' key={item.title}>
<Link to={item.path}>
<div className='flex'>
{item.title}
</div>
</Link>
</div>
);
Cuando quiero anexar el icono, lo quise hacer de la forma
<{item.icon}/> ----> con la sorpresa que no funciona...
Al darme cuenta del error intenté hacer otras formas como las siguientes
<{...item.icon}/>
{<{...item.icon}/>}
<`${item.icon}`/>
Aún todas sin funcionar.
Y aunque buscando aquí mismo encontré soluciones, como crear una función externa que evalúe el nombre del icono y retorne un componte de adecuado a la validación, lo que realmente quiero es salir de dudas si lo que estoy haciendo no se puede hacer, o simplemente no lo estoy aplicando de forma correcta, y con esto me refiero a hacer cosas justamente como estas:
<{...item.icon}/>
{<{...item.icon}/>}
<`${item.icon}`/>
Porque pensé que los literal strings me permitirían incluir los angle brackets </>
pero al parecer no.
Gracias.