Bueno, estoy trabajando en un proyecto de múltiples repositorios en el que estoy lidiando con el siguiente problema en la implementación de la biblioteca de componentes de mi proyecto con respecto a la selección de íconos .

Hice un prototipo de mis íconos de acuerdo con el deseo del proyecto, pero llegó el momento de la implementación y no sé cómo colocarlos correctamente, por lo que me gustaría quitarme esta duda.

Inicialmente lo implementé así:

 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;

Además del proyecto final donde se usarán estos componentes, este en este caso se usará para representar mi ícono de acuerdo con el valor pasado por props.IconName, que debería buscar en una matriz el ícono que quiero usar.

Y cuando obtenga la respuesta, se usará así en la compilación final del repositorio:

Si es así, use phoneIcon para pasar props.IconName.

 <PhoneIcon color="#3457f" />

Sin embargo, al intentar hacer esto, la búsqueda que ocurriría en const IconSelected = Icons[IconSettings.Name] no ocurre porque aparentemente no puede acceder al índice donde se debe encontrar el valor en esta matriz de mi biblioteca de iconos.

Incluso devuelve el error de que es:

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

Entonces, ¿qué debo hacer para que pueda funcionar correctamente? ¿Cuál es la buena práctica para esto?