0
190
Views¿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 answers
Answer question0
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
Report
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
Report
Answer question