import SvgIcon from "@material-ui/core/SvgIcon";
import * as React from "react";

import { useIconStyles } from "../styles";
import { IconProps } from "../types";
export const BagIcon = React.forwardRef(
  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
    const classes = useIconStyles();
    return (
      <SvgIcon
        width={24}
        height={24}
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        classes={{
          root: classes.root,
        }}
        {...props}
        ref={ref}
      >
        <path
          d="M4 7v-.75a.75.75 0 0 0-.748.697L4 7ZM3 21l-.748-.053A.75.75 0 0 0 3 21.75V21Zm18 0v.75a.75.75 0 0 0 .748-.803L21 21ZM20 7l.748-.053A.75.75 0 0 0 20 6.25V7ZM8.75 11a.75.75 0 0 0-1.5 0h1.5Zm8 0a.75.75 0 0 0-1.5 0h1.5ZM3.252 6.947l-1 14 1.496.106 1-14-1.496-.106ZM3 21.75h18v-1.5H3v1.5Zm18.748-.803-1-14-1.496.106 1 14 1.497-.106ZM8 6.25H4v1.5h4v-1.5ZM8 7h.75v.003a.613.613 0 0 0 0-.023l.006-.098c.007-.09.02-.223.047-.384.054-.326.161-.749.368-1.163a2.77 2.77 0 0 1 .933-1.086c.426-.284 1.028-.499 1.896-.499v-1.5c-1.13 0-2.03.285-2.728.751A4.26 4.26 0 0 0 7.83 4.665a5.665 5.665 0 0 0-.507 1.587 5.655 5.655 0 0 0-.073.744V7H8Zm12-.75h-4v1.5h4v-1.5Zm-4 0H8v1.5h8v-1.5Zm-4-2.5c.87 0 1.47.215 1.897.499.43.287.727.675.932 1.086.207.414.315.837.369 1.163a4.15 4.15 0 0 1 .052.482v.023V7h1.5v-.024l-.001-.046a5.625 5.625 0 0 0-.071-.678 5.663 5.663 0 0 0-.507-1.587A4.259 4.259 0 0 0 14.73 3c-.7-.466-1.597-.751-2.729-.751v1.5ZM8 11l-.75.001v.009a1.558 1.558 0 0 0 .002.057c.002.034.004.079.01.133a3.817 3.817 0 0 0 .615 1.716C8.531 13.9 9.781 14.75 12 14.75v-1.5c-1.781 0-2.532-.65-2.876-1.166A2.317 2.317 0 0 1 8.751 11v-.008V11H8Zm4 3.75c2.219 0 3.468-.85 4.124-1.834a3.815 3.815 0 0 0 .615-1.716 2.62 2.62 0 0 0 .011-.175V11h-1.5v-.008V11a2.055 2.055 0 0 1-.044.306 2.314 2.314 0 0 1-.33.778c-.344.516-1.094 1.166-2.876 1.166v1.5Z"
          fill="currentColor"
        />
      </SvgIcon>
    );
  }
);