PromucFlow_constructor/app/client/src/constants/IconConstants.tsx

import styled from "styled-components";
import { Color } from "./Colors";

export type IconProps = {
  width?: number;
  height?: number;
  color?: Color;
  background?: Color;
  onClick?: (e?: any) => void;
  className?: string;
  keepColors?: boolean;
};

export const IconWrapper = styled.div<IconProps>`
  &:focus {
    outline: none;
  }
  display: inline-block;
  width: ${(props) => props.width}px;
  height: ${(props) => props.height}px;
  && svg {
    width: ${(props) => props.width || props.theme.fontSizes[6]}px;
    height: ${(props) => props.height || props.theme.fontSizes[6]}px;

    ${(props) =>
      !props.keepColors
        ? `
    path {
      fill: ${props.color || props.theme.colors.textOnDarkBG};
    }
    circle {
      fill: ${props.background || props.theme.colors.paneBG};
    }
    rect {
      fill: ${props.background || props.theme.colors.propertyPane.jsIconBg};
    }`
        : ""}
  }
`;