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?
CodePudding user response:
You can use mixins:
import { css } from 'styled-components';
const sharedStyles = css`
${sharedStyles}
`;
export const StyledCloseIcon = styled(CloseIcon)`
${sharedStyles}
`;
export const StyledOpenIcon = styled(OpenIcon)`
${sharedStyles}
`;
export const StyledDeleteIcon = styled(DeleteIcon)`
${sharedStyles}
`;
export const StyledCheckIcon = styled(CheckIcon)`
${sharedStyles}
`;