How to write repetitive styled components in a cleaner way

Question

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?

Answer 1

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}
`;