0
191
Vistas¿Cómo renderizar un ícono basado en accesorios usando react y typescript?
Estoy usando react-feather para renderizar íconos en un componente. Puedo hacer que importe un icono estático codificándolo. Pero, ¿cómo hago para que represente el icono en función de lo que se le ha pasado en los accesorios IconLeft.icon ?
import { Camera } from 'react-feather'; import React, { FunctionComponent } from 'react'; type HeaderProps = { title: string; iconLeft?: { icon?: string; url?: string; state?: string; label?: string; } } export const DefaultHeader: FunctionComponent<HeaderProps> = ({ title, iconLeft, iconRight}) => <header> <h1>{String}</h1> <Camera size={24} stroke-width={2}/> </header>
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Puede usar JSX.Element como el tipo para accesorios de iconos.
Ejemplo:
type HeaderProps = { title: string; icon: JSX.Element; }; const Header: FC<HeaderProps> = ({ icon, title }) => { return ( <header> <h1>{title}</h1> {icon} </header> ); }; export default function App() { return ( <div className="App"> <Header title="header" icon={<Camera />} /> </div> ); } 
·
Juan Pablo Isaza
Denunciar
0
Puede usar cloneElement para renderizar dinámicamente cualquier componente que desee pasándolo como accesorio.
import React, { cloneElement, FunctionComponent } from "react"; type HeaderProps = { title: string; iconLeft?: { icon: JSX.Element; url?: string; state?: string; label?: string; }; }; export const DefaultHeader: FunctionComponent<HeaderProps> = ({ title, iconLeft, }) => ( <header> <h1>{String}</h1> {iconLeft && cloneElement(iconLeft.icon, { size: 24, "stroke-width": 2 })} </header> );Ejemplo de uso:
<DefaultHeader iconLeft={{ icon: <Camera /> }} />
·
Juan Pablo Isaza
Denunciar
Responde la pregunta