Well, I'm working on a multi-repo project where I'm dealing with the following problem in the implementation of my project's component library regarding icon selection.

I prototyped my icons according to the project's desire, but the time for implementation has arrived and I don't know how to put them correctly and so I would like to remove this doubt.

Initially I implemented it like this:

import React from 'react';
import * as Icons from 'my-icons-lib';

function Icon(props: any) {
 const IconSettings = {
     Name: props.IconName,
     Color: props.IconColor,
     Height: props.IconHeight,
     Width: props.IconWidth
 }

 const IconSelected = Icons[IconSettings.Name]

return(
 <IconSelected
     {...IconSettings.Color}
     {...IconSettings.Height}
     {...IconSettings.Width}
  />
);
}

export default Icon;

Beside the final project where these components will be used, this one in this case will be used to render my icon according to the value passed by props.IconName which should search an array for the icon I want to use.

And when it gets the answer, it will be used like this in the final repo build:

If so, use phoneIcon to pass in props.IconName.

<PhoneIcon color="#3457f" />

However, when trying to do this, the search that would occur on const IconSelected = Icons[IconSettings.Name] doesn't happen because apparently it can't access the index where the value should be found in this array of my icon library.

It even returns the error of which it is:

Binding element 'IconSettings.Name' implicitly has a type 'any'.ts(7031)

So what should I do so that it can work properly? What is the good practice for this?