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

export const WebComponents: IconComponent = React.forwardRef<
  SVGSVGElement,
  IconProps
>(function WebComponents(
  {
    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}
    >
      <path
        d="M5.8125 2.25L5.625 2.4375L0.375 11.8125L5.8125 21.375H18.375L21.1875 16.5V16.125L23.8125 11.8125L21 7.3125V6.9375L18.375 2.25H5.8125ZM9.75 7.875H13.6875L16.125 11.8125L13.6875 15.75H9.75L7.5 11.8125L9.75 7.875Z"
        fill="currentColor"
      />
      <path
        d="M22.875 11.8125L20.625 15.75L17.25 11.8125L20.625 7.875L22.875 11.8125Z"
        fill="#166da5"
      />
      <path
        d="M20.25 16.5L16.6875 12.1875L14.625 15.75L17.8125 20.625L20.25 16.5Z"
        fill="#8fdb69"
      />
      <path
        d="M20.25 7.125L16.6875 11.4375L14.625 7.875L17.8125 3L20.25 7.125Z"
        fill="#166da5"
      />
      <path
        d="M11.8125 20.625L6.5625 11.8125L11.8125 3H6.1875L1.125 11.8125L6.1875 20.625H11.8125Z"
        fill="currentColor"
      />
      <path
        d="M9.375 7.125L11.8125 3H17.8125L20.25 7.125H9.375ZM14.625 7.875H20.625L22.6875 11.4375H16.6875L14.625 7.875Z"
        fill="#287bbe"
      />
      <path
        d="M9.375 16.5L11.8125 20.625H17.8125L20.25 16.5H9.375ZM14.625 15.75H20.625L22.6875 12.1875H16.6875L14.625 15.75Z"
        fill="#ddf021"
      />
    </svg>
  );
});

WebComponents.displayName = "WebComponents";

WebComponents.metadata = {
  name: "WebComponents",
  category: "icon/library",
  tags: ["web", "components", "icon"],
  description: "WebComponents icon from icon/library category",
  type: ["stroke", "icon"],
} as IconMetadata;

export default WebComponents;