0
189
VistasHow to render icon based on props using react and typescript?
I'm using react-feather to render icons in a component. I'm able to get it to import a static icon by hard coding it in. But how do I make it render the icon based on what has been passed to it in the IconLeft.icon props?
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
You can use JSX.Element as the type for icon props.
Example:
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
You can use cloneElement to dynamically render any component you want by passing it as a prop.
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>
);
Usage example:
<DefaultHeader iconLeft={{ icon: <Camera /> }} />
·
Juan Pablo Isaza
Denunciar
Responde la pregunta