CODEWITHSUNDEEP
reactjstypescriptreact-icons
Brady
Brady

Reputation: 193

Cant use React Icons component as an object value typescript

I am developing a personal website using typescript and react, and for my footer, I am mapping through an array of objects which each have a url property, as well as an icon property. The Icon property is supposed to have multiple different React Icons as the value, so that through each iteration, I can display a different Icon. When I originally implemented this in javascript, my code worked just fine, but after switching my codebase over to typescript, I am presented with this error:

"Parsing error: '>' expected.eslint 'FaGithub' refers to a value, but is being used as a type here. Did you mean 'typeof FaGithub'?ts(2749)"

This is the typescript implementation that I have so far. I have tried removing the angled brackets, and that eliminates the error, but I am unable to actually display the icon when mapping through the array. I would really appreciate any advice.

const socialIcons: { icon: IconType, url: string }[] = [
    {
        icon: <FaGithub />,
        url: "./"
    },
    {
        icon: <FaLinkedin />,
        url: "./"
    },
    {
        icon: <FaTwitter />,
        url: "./"
    },
    {
        icon: <FaInstagram />,
        url: "./"
    },
    {
        icon: <FaFacebook />,
        url: "./"
    },
]

{socialIcons.map((icons, index) => {
                    const {icon, url} = icons;
                    return (
                        <a href={url} key={index} target="_blank" rel="noopener noreferrer">
                            {icon}
                        </a>
                    );
                })}

This is how the socialIcons array originally looked in regular javascript.

const socialIcons = [
    {
        icon: <FaGithub />,
        url: "./"
    },
    {
        icon: <FaLinkedin />,
        url: "./"
    },
    {
        icon: <FaTwitter />,
        url: "./"
    },
    {
        icon: <FaInstagram />,
        url: "./"
    },
    {
        icon: <FaFacebook />,
        url: "./"
    },
]

Upvotes: 4

Views: 13653

Answers (3)

hossain45
hossain45

Reputation: 101

simple solution for react-icons typescript using context api

<IconContext.Provider value={{ color: "blue", size: "3rem"}}>
   <div >
     <FaTimes /> 
   </div>
</IconContext.Provider>

Upvotes: 1

Yves Boutellier
Yves Boutellier

Reputation: 2024

I had difficulties to type icons myself. I found this solution to be working.

export interface IRoute {
    path: string;
    name: string;
    icon: ReactNode;
    layout: string;
}

export const routes: IRoute[] = [
    {
        path: "/dashboard",
        name: "Dashboard",
        icon: <FiHome />,
        layout: ""
    },
    {...}
]

Upvotes: 4

Brady
Brady

Reputation: 193

I figured out a solution, all I needed to do was change the file extension from .ts to .tsx, and make the type of the value a JSX.Element to input react components as values within objects without a typescript compiler error.

Upvotes: 12

Related Questions