import { forwardRef } from "react";
import type { IconProps } from "../../types";

export const IconExclamationTriangleOutline = forwardRef<
  SVGSVGElement,
  IconProps
>(({ color = "currentColor", ...props }, forwardedRef) => {
  const { className } = props;
  props = {
    ...props,
    width: `${props.width || props.size || 20}`,
    height: `${props.height || props.size || 20}`,
    className: `${
      className ? className + " " : ""
    }customeow-shein-icon customeow-shein-icon-icon-exclamation-triangle-outline`,
  };
  return (
    <svg
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
      ref={forwardedRef}
    >
      <path
        d="M11.0825 3.12742C10.6015 2.29363 9.3981 2.29363 8.91706 3.12742L2.78846 13.7503C2.30769 14.5837 2.90912 15.625 3.87119 15.625H16.1284C17.0905 15.625 17.6919 14.5837 17.2111 13.7503L11.0825 3.12742ZM7.83433 2.50277C8.7964 0.835178 11.2032 0.835177 12.1653 2.50277L18.2939 13.1257C19.2554 14.7924 18.0525 16.875 16.1284 16.875H3.87119C1.94704 16.875 0.744187 14.7924 1.70573 13.1257L7.83433 2.50277ZM9.9998 6.87499C10.345 6.87499 10.6248 7.15481 10.6248 7.49999V10.625C10.6248 10.9702 10.345 11.25 9.9998 11.25C9.65462 11.25 9.3748 10.9702 9.3748 10.625V7.49999C9.3748 7.15481 9.65462 6.87499 9.9998 6.87499ZM9.3748 13.125C9.3748 12.7798 9.65462 12.5 9.9998 12.5H10.006C10.3512 12.5 10.631 12.7798 10.631 13.125V13.1312C10.631 13.4764 10.3512 13.7562 10.006 13.7562H9.9998C9.65462 13.7562 9.3748 13.4764 9.3748 13.1312V13.125Z"
        fill={color}
        fillRule="evenodd"
        clipRule="evenodd"
      />
    </svg>
  );
});

IconExclamationTriangleOutline.displayName = "IconExclamationTriangleOutline";

export default IconExclamationTriangleOutline;