How to render icon based on props using react and typescript?

user_4808108 0
Viewed 1421

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>
typescript reactjs javascript
2 Answers

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>
  );
}

Edit throbbing-voice-1uv84w

user_97651670

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 /> }} />
user_66222330
Related