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

export const IconEmojiOutline = 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-emoji-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <g clipPath="url(#a)">
          <path
            d="M0.916687 9.99996C0.916687 4.98337 4.98343 0.916626 10 0.916626C15.0166 0.916626 19.0834 4.98337 19.0834 9.99996C19.0834 15.0165 15.0166 19.0833 10 19.0833C4.98343 19.0833 0.916687 15.0165 0.916687 9.99996ZM10 2.41663C5.81186 2.41663 2.41669 5.8118 2.41669 9.99996C2.41669 14.1881 5.81186 17.5833 10 17.5833C14.1882 17.5833 17.5834 14.1881 17.5834 9.99996C17.5834 5.8118 14.1882 2.41663 10 2.41663ZM6.13636 6.1363C6.42925 5.8434 6.90412 5.8434 7.19702 6.1363L8.44702 7.3863C8.73991 7.67919 8.73991 8.15406 8.44702 8.44696L7.19702 9.69696C6.90412 9.98985 6.42925 9.98985 6.13636 9.69696C5.84346 9.40406 5.84346 8.92919 6.13636 8.6363L6.85603 7.91663L6.13636 7.19696C5.84346 6.90406 5.84346 6.42919 6.13636 6.1363ZM13.8637 6.1363C14.1566 6.42919 14.1566 6.90406 13.8637 7.19696L13.144 7.91663L13.8637 8.6363C14.1566 8.92919 14.1566 9.40406 13.8637 9.69696C13.5708 9.98985 13.0959 9.98985 12.803 9.69696L11.553 8.44696C11.2601 8.15406 11.2601 7.67919 11.553 7.3863L12.803 6.1363C13.0959 5.8434 13.5708 5.8434 13.8637 6.1363ZM7.75387 12.5806L7.75302 12.5789L7.75147 12.5758C7.56458 12.2093 7.11665 12.0615 6.74796 12.2458C6.37747 12.431 6.2273 12.8816 6.41255 13.252L7.08337 12.9166C6.41255 13.252 6.41255 13.252 6.41255 13.252L6.41324 13.2534L6.41402 13.255L6.41583 13.2585L6.42045 13.2675L6.43376 13.2926C6.44446 13.3123 6.45886 13.3381 6.47709 13.369C6.51349 13.4308 6.56548 13.5137 6.63411 13.6106C6.77079 13.8035 6.97703 14.0571 7.26218 14.3105C7.83877 14.823 8.73877 15.3333 10 15.3333C11.2613 15.3333 12.1613 14.823 12.7379 14.3105C13.023 14.0571 13.2293 13.8035 13.366 13.6106C13.4346 13.5137 13.4866 13.4308 13.523 13.369C13.5412 13.3381 13.5556 13.3123 13.5663 13.2926L13.5796 13.2675L13.5842 13.2585L13.586 13.255L13.5868 13.2534C13.5868 13.2534 13.5875 13.252 12.9167 12.9166L13.5875 13.252C13.7728 12.8816 13.6226 12.431 13.2521 12.2458C12.8834 12.0615 12.4355 12.2093 12.2486 12.5759L12.2474 12.5781C12.2448 12.5828 12.2393 12.5928 12.2307 12.6075C12.2134 12.6368 12.184 12.6842 12.1419 12.7435C12.0572 12.8631 11.925 13.0262 11.7413 13.1894C11.3804 13.5102 10.8221 13.8333 10 13.8333C9.17796 13.8333 8.61963 13.5102 8.25872 13.1894C8.07512 13.0262 7.94282 12.8631 7.85815 12.7435C7.8161 12.6842 7.7867 12.6368 7.7694 12.6075C7.76077 12.5928 7.75554 12.5836 7.75302 12.5789L7.75147 12.5758L7.75387 12.5806Z"
            fill={color}
            fillRule="evenodd"
            clipRule="evenodd"
          />
        </g>
        <defs>
          <clipPath id="a">
            <path fill={color} d="M0 0H20V20H0z" />
          </clipPath>
        </defs>
      </svg>
    );
  }
);

IconEmojiOutline.displayName = "IconEmojiOutline";

export default IconEmojiOutline;