Utilizing Styled Components for styling in my project has resulted in numerous icons being defined. The style file contains the following code:
my-component.styles.ts
import { ReactComponent as CloseIcon } from 'svg/close.svg';
import { ReactComponent as OpenIcon } from 'svg/open.svg';
import { ReactComponent as DeleteIcon } from 'svg/delete.svg';
import { ReactComponent as CheckIcon } from 'svg/check.svg';
...
export const StyledCloseIcon = styled(CloseIcon)`
width: 20px;
fill: white;
`;
export const StyledOpenIcon = styled(OpenIcon)`
width: 20px;
fill: white;
`;
export const StyledDeleteIcon = styled(DeleteIcon)`
width: 20px;
fill: white;
`;
export const StyledCheckIcon = styled(CheckIcon)`
width: 20px;
fill: white;
`;
...
The above shows that all icons share the same styling attributes.
In another component, these icons are imported and used like this:
import {
StyledCloseIcon,
StyledOpenIcon,
StyledDeleteIcon,
StyledCheckIcon
} from './my-component.styles';
followed by using the icon components individually like <StyledCloseIcon />.
Is there a more concise way to implement this?