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

export const Storyblok: IconComponent = React.forwardRef<
  SVGSVGElement,
  IconProps
>(function Storyblok(
  {
    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_2282)">
        <path
          d="M21.1012 0L21.0798 0.0232053C21.6384 0.0232053 21.9801 0.46347 21.9991 1.00228L22 1.04996V19.372C22 19.9378 21.6753 20.2837 21.1522 20.3042L21.1026 20.3052H8.99672L5.68242 23.9465V20.282H3.01297C2.47641 20.282 2.02711 19.9525 2.00125 19.4202L2 19.3713V1.02683C2 0.482146 2.43492 0.0259868 2.98812 0.00103311L3.03578 0H21.1012ZM14.9348 3.73422H5.68242V16.8047H13.8305C14.4519 16.8047 15.0504 16.6879 15.6025 16.5478C16.1185 16.4394 16.5736 16.2078 16.9876 15.9502L17.0756 15.8947C17.461 15.6606 17.7848 15.335 18.0194 14.9458L18.0651 14.8671H18.0415C18.2712 14.4478 18.3868 13.9572 18.3868 13.3737C18.3868 12.4638 18.1792 11.7396 17.7648 11.1794C17.3281 10.6431 16.7525 10.2695 16.0163 10.0597C16.6008 9.80629 17.0862 9.36305 17.3966 8.79926C17.6962 8.23899 17.8575 7.65568 17.8575 7.04901C17.8676 6.22399 17.5904 5.42194 17.0749 4.7849C16.8216 4.48093 16.4992 4.22472 16.1546 4.03756C15.8105 3.84183 15.447 3.74718 15.0259 3.7355L14.9348 3.73422ZM13.6122 11.0394C13.8783 11.0394 14.078 11.1714 14.2557 11.3928C14.4201 11.6234 14.5058 11.9025 14.4996 12.1873C14.4996 12.5182 14.3884 12.7831 14.2114 12.9602C14.0259 13.1239 13.8023 13.2307 13.5583 13.2451L13.5016 13.2467H9.00031V11.0394H13.6122ZM13.2356 6.62376C13.4473 6.62583 13.6514 6.70403 13.812 6.84437C13.9674 6.99894 14.0559 7.24204 14.0559 7.57287C14.0559 7.92723 13.977 8.20323 13.8 8.34405L13.7677 8.3675C13.6038 8.49004 13.4021 8.59351 13.1981 8.60869L13.1471 8.6106H8.99961V6.62376H13.2356Z"
          fill="#0ab3af"
        />
      </g>
      <defs>
        <clipPath id="undefined-clip0_2062_2282">
          <path fill="#fff" transform="translate(2)" d="M0 0H20V24H0z" />
        </clipPath>
      </defs>
    </svg>
  );
});

Storyblok.displayName = "Storyblok";

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

export default Storyblok;