I currently have an array of .svg icons, each with unique properties that I need to customize:
<svg width="24" height="24" viewBox="0 0 24 24"> ... </svg>
import styled from 'styled-components';
import Github from 'assets/github.svg';
import Facebook from 'assets/facebook.svg';
import Twitter from 'assets/twitter.svg';
...
const icons = [
<Github />,
<Facebook />,
<Twitter />,
...
];
My goal is to style all icons consistently without redundant code and utilize CSS-in-JS.
Although my current solution works, there are some drawbacks:
// Effective but not using CSS-in-JS like styled-components
// Making future updates challenging
const iconStyle = {
width: 50,
height: 50
};
const SocialBar = () => (
<IconBar as={FlexBox}>
{icons.map((icon, key) => (
<div key={key}>{React.cloneElement(icon, iconStyle)}</div>
))}
</IconBar>
);
// Functional but dealing with excessive amount of icons
const SocialBar = () => (
<IconBar as={FlexBox}>
<Github style={iconStyle} />
<Facebook style={iconStyle} />
...
</IconBar>
);
Attempting to style the svg component directly may not yield the desired results:
// Does not override the existing width="24" height="24" properties
const StyledIcon = styled(Github)`
width: 50;
height: 50;
`;