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-icon customeow-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 10.0001C0.916687 4.98349 4.98343 0.916748 10 0.916748C15.0166 0.916748 19.0834 4.98349 19.0834 10.0001C19.0834 15.0167 15.0166 19.0834 10 19.0834C4.98343 19.0834 0.916687 15.0167 0.916687 10.0001ZM10 2.41675C5.81186 2.41675 2.41669 5.81192 2.41669 10.0001C2.41669 14.1882 5.81186 17.5834 10 17.5834C14.1882 17.5834 17.5834 14.1882 17.5834 10.0001C17.5834 5.81192 14.1882 2.41675 10 2.41675ZM6.13636 6.13642C6.42925 5.84352 6.90412 5.84352 7.19702 6.13642L8.44702 7.38642C8.73991 7.67931 8.73991 8.15418 8.44702 8.44708L7.19702 9.69708C6.90412 9.98997 6.42925 9.98997 6.13636 9.69708C5.84346 9.40418 5.84346 8.92931 6.13636 8.63642L6.85603 7.91675L6.13636 7.19708C5.84346 6.90418 5.84346 6.42931 6.13636 6.13642ZM13.8637 6.13642C14.1566 6.42931 14.1566 6.90418 13.8637 7.19708L13.144 7.91675L13.8637 8.63642C14.1566 8.92931 14.1566 9.40418 13.8637 9.69708C13.5708 9.98997 13.0959 9.98997 12.803 9.69708L11.553 8.44708C11.2601 8.15418 11.2601 7.67931 11.553 7.38642L12.803 6.13642C13.0959 5.84352 13.5708 5.84352 13.8637 6.13642ZM7.75387 12.5807L7.75302 12.579L7.75147 12.576C7.56458 12.2094 7.11665 12.0616 6.74796 12.2459C6.37747 12.4312 6.2273 12.8817 6.41255 13.2522L7.08337 12.9167C6.41255 13.2522 6.41255 13.2522 6.41255 13.2522L6.41324 13.2535L6.41402 13.2551L6.41583 13.2587L6.42045 13.2676L6.43376 13.2927C6.44446 13.3124 6.45886 13.3382 6.47709 13.3691C6.51349 13.4309 6.56548 13.5138 6.63411 13.6107C6.77079 13.8036 6.97703 14.0572 7.26218 14.3106C7.83877 14.8232 8.73877 15.3334 10 15.3334C11.2613 15.3334 12.1613 14.8232 12.7379 14.3106C13.023 14.0572 13.2293 13.8036 13.366 13.6107C13.4346 13.5138 13.4866 13.4309 13.523 13.3691C13.5412 13.3382 13.5556 13.3124 13.5663 13.2927L13.5796 13.2676L13.5842 13.2587L13.586 13.2551L13.5868 13.2535C13.5868 13.2535 13.5875 13.2522 12.9167 12.9167L13.5875 13.2522C13.7728 12.8817 13.6226 12.4312 13.2521 12.2459C12.8834 12.0616 12.4355 12.2094 12.2486 12.576L12.2474 12.5783C12.2448 12.5829 12.2393 12.593 12.2307 12.6076C12.2134 12.637 12.184 12.6843 12.1419 12.7437C12.0572 12.8632 11.925 13.0263 11.7413 13.1895C11.3804 13.5103 10.8221 13.8334 10 13.8334C9.17796 13.8334 8.61963 13.5103 8.25872 13.1895C8.07512 13.0263 7.94282 12.8632 7.85815 12.7437C7.8161 12.6843 7.7867 12.637 7.7694 12.6076C7.76077 12.593 7.75554 12.5837 7.75302 12.579L7.75147 12.576L7.75387 12.5807Z"
            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;