'Gets icon prop and passing it into styled() function

I am getting icon prop and passing it to styled function to create a stylized icon based on it

const IconComponent = ({ isActive, icon }) => {
   const StyledIcons = styled(icon)`
      fill: #1f6ed4;
      & path {
         fill: ${(props) => (props.isActive ? '#1F6ED4' : '#232323')};
      }
   `
   return <StyledIcons isActive={isActive} />
}

it works, but I am getting warnings like below:

console

Is there any other way to create my StyledIcons component and at the same time receive the icon prop ?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Gets icon prop and passing it into styled() function

Sources

Related Questions