const React = require("react");
const TopHatIcon = ({ title, titleId, ...props }) => (
  <svg
    width="1em"
    height="1em"
    viewBox="0 0 32 32"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    aria-labelledby={titleId}
    {...props}
  >
    {title ? <title id={titleId}>{title}</title> : null}
    <g filter="url(#filter0_ii_18_17508)">
      <path
        d="M2.21875 23.0312C2.21875 19.7175 5.18629 17.0312 8.5 17.0312H23.4844C26.7981 17.0312 29.7812 19.7175 29.7812 23.0312V23.9688C29.7812 27.2825 27.1094 29.9688 23.3438 29.9688H8.79688C4.98438 29.9688 2.21875 27.2825 2.21875 23.9688V23.0312Z"
        fill="url(#paint0_linear_18_17508)"
      />
    </g>
    <g filter="url(#filter1_f_18_17508)">
      <path
        d="M7.24023 17.4688L7.56775 23.0204C7.66129 24.6059 8.8593 25.8438 11.0468 25.8438H21.0781C23.1562 25.8438 24.3073 24.6059 24.4009 23.0204L24.7284 17.4688H7.24023Z"
        fill="#3A1333"
      />
    </g>
    <g filter="url(#filter2_i_18_17508)">
      <path
        d="M11.0469 25.5937C8.85944 25.5937 7.66142 24.3559 7.56789 22.7704L6.78132 9.4375C6.72662 8.33593 6.77195 6.15938 7.85945 5.04688C8.94391 3.93748 9.89319 3.93749 10.681 3.9375H21.2879C22.0757 3.93749 23.025 3.93748 24.1094 5.04688C25.1969 6.15938 25.2423 8.33593 25.1876 9.4375L24.401 22.7704C24.3075 24.3559 23.1563 25.5937 21.0782 25.5937H11.0469Z"
        fill="url(#paint1_linear_18_17508)"
      />
      <path
        d="M11.0469 25.5937C8.85944 25.5937 7.66142 24.3559 7.56789 22.7704L6.78132 9.4375C6.72662 8.33593 6.77195 6.15938 7.85945 5.04688C8.94391 3.93748 9.89319 3.93749 10.681 3.9375H21.2879C22.0757 3.93749 23.025 3.93748 24.1094 5.04688C25.1969 6.15938 25.2423 8.33593 25.1876 9.4375L24.401 22.7704C24.3075 24.3559 23.1563 25.5937 21.0782 25.5937H11.0469Z"
        fill="url(#paint2_radial_18_17508)"
      />
    </g>
    <g filter="url(#filter3_i_18_17508)">
      <path
        d="M7.36426 19.321C7.87285 20.5799 9.2011 21.7187 11.0468 21.7187H21.078C22.8721 21.7187 24.135 20.6112 24.6023 19.3564L24.4009 22.7704C24.3073 24.3558 23.1562 25.5937 21.078 25.5937H11.0468C8.8593 25.5937 7.66128 24.3558 7.56775 22.7704L7.36426 19.321Z"
        fill="url(#paint3_linear_18_17508)"
      />
      <path
        d="M7.36426 19.321C7.87285 20.5799 9.2011 21.7187 11.0468 21.7187H21.078C22.8721 21.7187 24.135 20.6112 24.6023 19.3564L24.4009 22.7704C24.3073 24.3558 23.1562 25.5937 21.078 25.5937H11.0468C8.8593 25.5937 7.66128 24.3558 7.56775 22.7704L7.36426 19.321Z"
        fill="url(#paint4_radial_18_17508)"
      />
      <path
        d="M7.36426 19.321C7.87285 20.5799 9.2011 21.7187 11.0468 21.7187H21.078C22.8721 21.7187 24.135 20.6112 24.6023 19.3564L24.4009 22.7704C24.3073 24.3558 23.1562 25.5937 21.078 25.5937H11.0468C8.8593 25.5937 7.66128 24.3558 7.56775 22.7704L7.36426 19.321Z"
        fill="url(#paint5_radial_18_17508)"
      />
      <path
        d="M7.36426 19.321C7.87285 20.5799 9.2011 21.7187 11.0468 21.7187H21.078C22.8721 21.7187 24.135 20.6112 24.6023 19.3564L24.4009 22.7704C24.3073 24.3558 23.1562 25.5937 21.078 25.5937H11.0468C8.8593 25.5937 7.66128 24.3558 7.56775 22.7704L7.36426 19.321Z"
        fill="url(#paint6_linear_18_17508)"
      />
    </g>
    <g filter="url(#filter4_f_18_17508)">
      <rect
        x={8.71143}
        y={7.875}
        width={14.5772}
        height={1.8125}
        fill="#574965"
      />
    </g>
    <g filter="url(#filter5_f_18_17508)">
      <path
        d="M21.4375 20.75L22 5.15625C24.05 5.15625 24.3542 7.19792 24.25 8.21875L23.8125 19.0625C23.3625 20.1625 22.0417 20.6458 21.4375 20.75Z"
        fill="url(#paint7_linear_18_17508)"
      />
    </g>
    <defs>
      <filter
        id="filter0_ii_18_17508"
        x={1.71875}
        y={16.5312}
        width={28.0625}
        height={13.4375}
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="BackgroundImageFix"
          result="shape"
        />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dx={-0.5} dy={-0.5} />
        <feGaussianBlur stdDeviation={0.25} />
        <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0.443137 0 0 0 0 0.396078 0 0 0 0 0.490196 0 0 0 1 0"
        />
        <feBlend
          mode="normal"
          in2="shape"
          result="effect1_innerShadow_18_17508"
        />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dx={-0.25} dy={-0.25} />
        <feGaussianBlur stdDeviation={0.25} />
        <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0.27451 0 0 0 0 0.160784 0 0 0 0 0.380392 0 0 0 1 0"
        />
        <feBlend
          mode="normal"
          in2="effect1_innerShadow_18_17508"
          result="effect2_innerShadow_18_17508"
        />
      </filter>
      <filter
        id="filter1_f_18_17508"
        x={6.24023}
        y={16.4688}
        width={19.488}
        height={10.375}
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="BackgroundImageFix"
          result="shape"
        />
        <feGaussianBlur
          stdDeviation={0.5}
          result="effect1_foregroundBlur_18_17508"
        />
      </filter>
      <filter
        id="filter2_i_18_17508"
        x={6.7666}
        y={3.9375}
        width={20.4358}
        height={21.6562}
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="BackgroundImageFix"
          result="shape"
        />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dx={2} />
        <feGaussianBlur stdDeviation={1.5} />
        <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0.270588 0 0 0 0 0.247059 0 0 0 0 0.301961 0 0 0 1 0"
        />
        <feBlend
          mode="normal"
          in2="shape"
          result="effect1_innerShadow_18_17508"
        />
      </filter>
      <filter
        id="filter3_i_18_17508"
        x={7.36426}
        y={19.321}
        width={17.238}
        height={6.47271}
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="BackgroundImageFix"
          result="shape"
        />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dy={0.2} />
        <feGaussianBlur stdDeviation={0.1} />
        <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0.858824 0 0 0 0 0.12549 0 0 0 0 0.317647 0 0 0 1 0"
        />
        <feBlend
          mode="normal"
          in2="shape"
          result="effect1_innerShadow_18_17508"
        />
      </filter>
      <filter
        id="filter4_f_18_17508"
        x={7.21143}
        y={6.375}
        width={17.5771}
        height={4.8125}
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="BackgroundImageFix"
          result="shape"
        />
        <feGaussianBlur
          stdDeviation={0.75}
          result="effect1_foregroundBlur_18_17508"
        />
      </filter>
      <filter
        id="filter5_f_18_17508"
        x={19.9375}
        y={3.65625}
        width={5.83032}
        height={18.5938}
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="BackgroundImageFix"
          result="shape"
        />
        <feGaussianBlur
          stdDeviation={0.75}
          result="effect1_foregroundBlur_18_17508"
        />
      </filter>
      <linearGradient
        id="paint0_linear_18_17508"
        x1={16}
        y1={17.0312}
        x2={16}
        y2={27.5625}
        gradientUnits="userSpaceOnUse"
      >
        <stop offset={0.210682} stopColor="#333135" />
        <stop offset={1} stopColor="#523B5E" />
      </linearGradient>
      <linearGradient
        id="paint1_linear_18_17508"
        x1={15.9844}
        y1={3.9375}
        x2={15.9844}
        y2={25.5937}
        gradientUnits="userSpaceOnUse"
      >
        <stop offset={0.421356} stopColor="#534262" />
        <stop offset={1} stopColor="#43354B" />
      </linearGradient>
      <radialGradient
        id="paint2_radial_18_17508"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(24.8751 20.9375) rotate(-86.0321) scale(10.8385 4.69356)"
      >
        <stop stopColor="#4C4653" />
        <stop offset={1} stopColor="#4C4653" stopOpacity={0} />
      </radialGradient>
      <linearGradient
        id="paint3_linear_18_17508"
        x1={10.3749}
        y1={21.1874}
        x2={22.7499}
        y2={24.9999}
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="#EB3469" />
        <stop offset={1} stopColor="#E12E84" />
      </linearGradient>
      <radialGradient
        id="paint4_radial_18_17508"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(20.4687 21.0937) rotate(90) scale(2.75 11.4063)"
      >
        <stop stopColor="#FE4F93" />
        <stop offset={1} stopColor="#FE4F93" stopOpacity={0} />
      </radialGradient>
      <radialGradient
        id="paint5_radial_18_17508"
        cx={0}
        cy={0}
        r={1}
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(22.4374 20.3124) rotate(90) scale(4.71875 7.16957)"
      >
        <stop stopColor="#FF4C99" />
        <stop offset={1} stopColor="#FF4C99" stopOpacity={0} />
      </radialGradient>
      <linearGradient
        id="paint6_linear_18_17508"
        x1={7.36426}
        y1={23.4062}
        x2={11.3749}
        y2={23.4062}
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="#BA2D43" />
        <stop offset={1} stopColor="#BA2D43" stopOpacity={0} />
      </linearGradient>
      <linearGradient
        id="paint7_linear_18_17508"
        x1={23.5938}
        y1={5.15625}
        x2={22.8526}
        y2={20.75}
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="#70657C" />
        <stop offset={1} stopColor="#4D4455" />
      </linearGradient>
    </defs>
  </svg>
);
module.exports = TopHatIcon;