0
233
ViewsGets 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:
Is there any other way to create my StyledIcons component
and at the same time receive the icon prop ?
·
Juan Pablo Isaza
1 answers
Answer question0
You must move your StyledIcons outside the IconComponent component and use the as prop to pass your icon component:
const StyledIcons = styled.svg`
fill: #1f6ed4;
& path {
fill: ${(props) => (props.isActive ? '#1F6ED4' : '#232323')};
}
`
const IconComponent = ({ isActive, icon }) => {
return <StyledIcons as={icon} isActive={isActive} />
};
Working example
And if you don't have control over the icon prop and want to avoid the second warning
Warning: React does not recognize the
isActiveprop on a DOM element...
you can prefix the isActive prop with a dollar sign ($), turning it into a transient prop:
const StyledIcons = styled.svg`
fill: #1f6ed4;
& path {
fill: ${(props) => (props.$isActive ? "#1F6ED4" : "#232323")};
}
`;
const IconComponent = ({ isActive, icon }) => {
return <StyledIcons as={icon} $isActive={isActive} />;
};
·
Juan Pablo Isaza
Report
Answer question