Can't create dynamic IonIcons in ionic-react project

Question

i am using many components in my project and in all those components need different different ionIcon for each component. So i created Icon component. Icon name passed from each parent components to the Icon child component. But its not validating.

**

<Icon name="closeCircleOutline" /> \\ this is the parent component

Icon Component

import { IonIcon, IonItem } from "@ionic/react";
 import * as iconName from "ionicons/icons";
export default function Icon(props: any) { 
var propsIcon = props.name; // icon name passed from parent component
return <IonIcon icon={iconName.propsIcon}></IonIcon>; 
}

 Property 'propsIcon' does not exist on type 'typeof import("/Users/dubaitradeit/Desktop/Mobile Apps/Ionic/lastMile/node_modules/ionicons/icons/index")'  the above warning iam getting

Answer 1

I think you meant to write the below code

return <IonIcon icon={iconName.props}></IonIcon>;

Instead of referring to 'props' you referred to 'propsIcon' which is not-existent in icons library. Hope this rectifies your issue.