import * as React from "react";
import type { IconProps, IconMetadata, IconComponent } from "../../types";

export const Shopify: IconComponent = React.forwardRef<
  SVGSVGElement,
  IconProps
>(function Shopify(
  {
    color = "currentColor",
    fill,
    size = 24,
    strokeWidth,
    strokeLinecap,
    strokeLinejoin,
    strokeDasharray,
    opacity,
    className,
    ...props
  },
  forwardedRef,
) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      strokeWidth={strokeWidth}
      strokeLinecap={strokeLinecap}
      strokeLinejoin={strokeLinejoin}
      strokeDasharray={strokeDasharray}
      opacity={opacity}
      {...props}
      ref={forwardedRef}
    >
      <g clipPath="url(#undefined-clip0_2062_2284)">
        <path
          d="M19.3565 4.71294C19.34 4.59294 19.2351 4.52653 19.1483 4.51921C19.0618 4.51198 17.2302 4.37595 17.2302 4.37595C17.2302 4.37595 15.9581 3.11061 15.8185 2.97055C15.6788 2.83058 15.406 2.87316 15.3001 2.90439C15.2845 2.90899 15.0222 2.99011 14.5882 3.12466C14.1633 1.89951 13.4134 0.773649 12.0941 0.773649C12.0576 0.773649 12.0202 0.775128 11.9827 0.777265C11.6075 0.280087 11.1427 0.0640869 10.7412 0.0640869C7.66791 0.0640869 6.19963 3.91354 5.73927 5.8697C4.54506 6.24047 3.69669 6.50406 3.58833 6.53817C2.92174 6.74768 2.90066 6.76872 2.81313 7.39806C2.74726 7.87453 1.00311 21.3892 1.00311 21.3892L14.5939 23.9406L21.9578 22.3445C21.9578 22.3445 19.3727 4.83294 19.3565 4.71294ZM13.8371 3.35743L12.6871 3.71406C12.6875 3.63285 12.6879 3.55296 12.6879 3.46559C12.6879 2.70417 12.5824 2.0911 12.4132 1.6051C13.093 1.69058 13.5457 2.46557 13.8371 3.35743ZM11.5699 1.75609C11.7589 2.23058 11.8818 2.91154 11.8818 3.83044C11.8818 3.87746 11.8814 3.92044 11.8809 3.96392C11.1331 4.19603 10.3204 4.44803 9.5059 4.70085C9.96322 2.93242 10.8205 2.07828 11.5699 1.75609ZM10.6568 0.890032C10.7894 0.890032 10.9231 0.935155 11.051 1.02335C10.066 1.48773 9.01027 2.65732 8.56443 4.99296L6.68706 5.57554C7.20927 3.79403 8.44934 0.890032 10.6568 0.890032Z"
          fill="#95bf46"
        />
        <path
          d="M19.1483 4.51911C19.0618 4.51188 17.2302 4.37585 17.2302 4.37585C17.2302 4.37585 15.9581 3.11051 15.8185 2.97046C15.7663 2.91835 15.6958 2.89163 15.6221 2.88013L14.5945 23.9404L21.9578 22.3444C21.9578 22.3444 19.3727 4.83284 19.3565 4.71284C19.34 4.59284 19.2351 4.52643 19.1483 4.51911Z"
          fill="#5e8e3e"
        />
        <path
          d="M12.0941 8.59605L11.1861 11.3023C11.1861 11.3023 10.3905 10.8769 9.41534 10.8769C7.9857 10.8769 7.91376 11.7758 7.91376 12.0023C7.91376 13.2383 11.1294 13.7119 11.1294 16.607C11.1294 18.8848 9.68752 20.3515 7.74338 20.3515C5.41041 20.3515 4.21735 18.8967 4.21735 18.8967L4.84201 16.8288C4.84201 16.8288 6.06838 17.8837 7.10321 17.8837C7.77939 17.8837 8.05444 17.3503 8.05444 16.9605C8.05444 15.3483 5.41632 15.2764 5.41632 12.6271C5.41632 10.3973 7.01363 8.2395 10.2379 8.2395C11.4803 8.2395 12.0941 8.59605 12.0941 8.59605Z"
          fill="#fff"
        />
      </g>
      <defs>
        <clipPath id="undefined-clip0_2062_2284">
          <path fill="#fff" transform="translate(1)" d="M0 0H21V24H0z" />
        </clipPath>
      </defs>
    </svg>
  );
});

Shopify.displayName = "Shopify";

Shopify.metadata = {
  name: "Shopify",
  category: "icon/cms",
  tags: ["shopify", "icon"],
  description: "Shopify icon from icon/cms category",
  type: ["stroke", "icon"],
} as IconMetadata;

export default Shopify;