frontAnswerer/lib/assets/icons/ContactFormIcon/TextIcon.tsx

import { Box } from "@mui/material";

interface Props {
  color: string;
  backgroundColor: string;
}

export default function TextIcon({ color, backgroundColor }: Props) {
  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "58px",
        width: "45px",
        backgroundColor: { backgroundColor },
        borderBottomLeftRadius: "12px",
        borderTopLeftRadius: "12px",
      }}
    >
      <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M8.67188 1.60156L8.67188 13.3838" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
        <path
          d="M10.6016 4.21875H13.7768C13.8534 4.21875 13.9268 4.26814 13.9809 4.35604C14.035 4.44395 14.0655 4.56318 14.0655 4.6875V10.3125C14.0655 10.4368 14.035 10.556 13.9809 10.644C13.9268 10.7319 13.8534 10.7812 13.7768 10.7812H10.6016"
          stroke={color}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M8.67081 10.7812H1.58194C1.41103 10.7812 1.24711 10.7319 1.12625 10.644C1.0054 10.556 0.9375 10.4368 0.9375 10.3125V4.6875C0.9375 4.56318 1.0054 4.44395 1.12625 4.35604C1.24711 4.26814 1.41103 4.21875 1.58194 4.21875H8.67081"
          stroke={color}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path d="M3.98438 6.5625H5.625" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
        <path d="M7.85156 1.60156H9.49219" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
        <path d="M7.85156 13.3828H9.49219" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
        <path d="M4.80469 6.5625V8.67188" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </Box>
  );
}