Estoy diseñando mi componente de reacción con componentes con estilo. Quiero un componente de ícono que se pueda usar en diferentes lugares simplemente cambiando el tamaño, los accesorios de color, etc. También quiero pasar los nombres de los íconos como accesorios para diferentes lugares. Logré cambiar el tamaño y el color, pero no sé cómo pasar el nombre del ícono según el requisito.

Aquí está mi componente de icono genérico:

 import React from "react"; import { ReactSVG } from "react-svg"; import styled, { css } from "styled-components"; import { FaUserTie } from 'react-icons/fa'; const StyledSVGIcon = styled(FaUserTie)` svg { fill: black; ${({ size }) => size && css` width: ${size}; height: ${size}; `} ${({ transform }) => transform && css` transform: ${transform}; `} path { ${({ color }) => color && css` fill: ${color}; `} } } `; const GenIcon = props => { return ( <StyledSVGIcon src={`/icons/${props.name}.svg`} color={props.color} size={props.size} transform={props.transform} /> ); }; export default GenIcon;

Y quiero usarlo así:

 <GenIcon name="FaUserNurse" color="red" size="16px" />

Pero el componente GenIcon no funciona. por favor ayúdame donde estoy haciendo mal. el ícono puede ser de cualquier tipo, como svg o cualquier otra biblioteca de íconos de reacción.