import { SvgProps } from ".";
import { colors } from "../../../themes";

export const SearchIcon: React.FunctionComponent<SvgProps> = (props) => {
  return (
    <svg
      width={props.size || "28"}
      height={props.size || "28"}
      viewBox="0 0 28 28"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style={{ ...props.style }}
    >
      <path
        d="M19.76 17.8667L26.9467 25.0667C27.1634 25.3233 27.2753 25.6522 27.26 25.9878C27.2447 26.3233 27.1034 26.6407 26.8642 26.8766C26.625 27.1124 26.3056 27.2492 25.9699 27.2598C25.6341 27.2703 25.3068 27.1537 25.0533 26.9334L17.88 19.76C15.7369 21.4248 13.0399 22.2102 10.3382 21.9562C7.63638 21.7023 5.13296 20.4281 3.33764 18.3932C1.54232 16.3583 0.590099 13.7156 0.674856 11.0032C0.759613 8.29083 1.87498 5.71275 3.79385 3.79388C5.71271 1.87501 8.2908 0.759643 11.0032 0.674887C13.7155 0.59013 16.3582 1.54235 18.3932 3.33767C20.4281 5.13299 21.7022 7.63641 21.9562 10.3382C22.2101 13.04 21.4247 15.737 19.76 17.88V17.8667ZM11.3333 19.3334C13.4551 19.3334 15.4899 18.4905 16.9902 16.9902C18.4905 15.4899 19.3333 13.4551 19.3333 11.3334C19.3333 9.21162 18.4905 7.17679 16.9902 5.6765C15.4899 4.17621 13.4551 3.33335 11.3333 3.33335C9.21159 3.33335 7.17676 4.17621 5.67647 5.6765C4.17618 7.17679 3.33332 9.21162 3.33332 11.3334C3.33332 13.4551 4.17618 15.4899 5.67647 16.9902C7.17676 18.4905 9.21159 19.3334 11.3333 19.3334Z"
        fill={props.color || colors.primary.base}
      />
    </svg>
  );
};