Stack Exchange
How to write repetitive styled components in a cleaner way
I'm using Styled Components for styling and there are many icons defined in the project so in the style file we have this 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;
`;
...

As it can be seen above, all icons are using the same styling.
And in another component they are used:
import {
  StyledCloseIcon,
  StyledOpenIcon,
  StyledDeleteIcon,
  StyledCheckIcon
} from './my-component.styles';

and then: <StyledCloseIcon />
Is there a way to write it in a shorter way?

That's nice and clean to be honest, you could wrap them in another styled component that targets the SVG as a child with sass/scss within another styled component but I think not many people would take issue with your approach. Don't over think things :)

You can use mixins:
import { css } from 'styled-components';

const sharedStyles = css`
  width: 20px;
  fill: white;
`;

export const StyledCloseIcon = styled(CloseIcon)`
  ${sharedStyles}
`;

export const StyledOpenIcon = styled(OpenIcon)`
  ${sharedStyles}
`;

export const StyledDeleteIcon = styled(DeleteIcon)`
  ${sharedStyles}
`;

export const StyledCheckIcon = styled(CheckIcon)`
  ${sharedStyles}
`;

