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

export const Penpot: IconComponent = React.forwardRef<SVGSVGElement, IconProps>(
  function Penpot(
    {
      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_3152)">
          <path
            d="M7.69503 0L5.1951 3.55457V5.56389L3.0196 6.60846L3 6.59911V19.7079L11.4816 23.753L12 24L12.5182 23.753L21 19.7079V6.59911L20.984 6.6067L18.8079 5.56186V3.55457L18.7317 3.44644L16.3078 0L13.8077 3.55457V3.55809L11.9886 0.971671L10.1835 3.53817L10.119 3.44644L7.69503 0ZM8.1373 2.06475L9.10425 3.43953H6.28581L7.24148 2.08087L8.1373 2.06475ZM16.7501 2.06475L17.717 3.43953H14.8986L15.8541 2.08087L16.7501 2.06475ZM12.4309 3.03655L13.3978 4.4112H10.5795L11.535 3.05254L12.4309 3.03655ZM6.01857 4.13234H7.35531V8.67619L6.01857 8.03866V4.13234ZM8.04159 4.13234H9.37162L9.37148 9.6377L8.04146 9.00342L8.04159 4.13234ZM14.6312 4.13234H15.9681L15.9679 8.99881L14.6313 9.63621L14.6312 4.13234ZM16.6542 4.13234H17.9843V8.03717L16.6542 8.67145V4.13234ZM10.3121 5.10401H11.6489V10.7237L10.3121 10.0862V5.10401ZM12.3352 5.10401H13.6652L13.665 10.097L12.335 10.7315L12.3352 5.10401ZM18.8077 6.59735L19.9846 7.08312L18.8077 7.64436V6.59735ZM5.1951 6.59911V7.64598L4.01836 7.08474L5.1951 6.59911ZM4.03648 8.25086L11.4816 11.8014V22.5955L4.03648 19.045V8.25086ZM19.9634 8.25086V19.045L12.5182 22.5955V11.8014L19.9634 8.25086Z"
            fill="currentColor"
          />
        </g>
        <defs>
          <clipPath id="undefined-clip0_2062_3152">
            <path fill="#fff" transform="translate(3)" d="M0 0H18V24H0z" />
          </clipPath>
        </defs>
      </svg>
    );
  },
);

Penpot.displayName = "Penpot";

Penpot.metadata = {
  name: "Penpot",
  category: "icon/design",
  tags: ["penpot", "icon"],
  description: "Penpot icon from icon/design category",
  type: ["stroke", "icon"],
} as IconMetadata;

export default Penpot;