TwitchClone / src / utils / icons / searchIcon / index.tsx
index.tsx
Raw
import React from "react";
import classNames from "../../helpers/className";

const SearchIcon = ({
  mobile,
  search,
  smallSearch,
}: {
  smallSearch?: boolean;
  mobile: boolean;
  search: boolean;
}) => {
  return (
    <svg
      width="100%"
      height="100%"
      version="1.1"
      viewBox="0 0 20 20"
      x="0px"
      y="0px"
      aria-hidden="true"
      focusable="false"
      data-icon="search"
      className={classNames(
        mobile == true && search == true ? "hidden" : "block",
        mobile && search == false ? "bg-transparent max-sm:w-[6.15vw]" : "",
        "h-[100%] w-[2.0rem] grow rounded-r-md border border-transparent fill-white py-[0.030rem] px-[0.30rem]   max-sm:bg-transparent  sm:w-[1.90rem] xl:w-[2.15rem]  2xl:w-[2.35rem]"
      )}
      role="img"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g>
        <path
          fill-rule="evenodd"
          d="M13.192 14.606a7 7 0 111.414-1.414l3.101 3.1-1.414 1.415-3.1-3.1zM14 9A5 5 0 114 9a5 5 0 0110 0z"
          clip-rule="evenodd"
        ></path>
      </g>
    </svg>
    // <svg
    //   aria-hidden="true"
    //   focusable="false"
    //   data-icon="search"
    //   className={classNames(
    //     mobile == true && search == true ? "hidden" : "block",
    //     mobile && search == false
    //       ? "bg-transparent max-sm:w-[6.15vw]"
    //       : "bg-[#53535f61]",
    //     " h-[100%] w-[2.0rem] grow rounded-r-md border border-transparent py-[0.35rem] px-2   max-sm:bg-transparent  sm:w-[2.15rem] xl:w-[2.15rem]  2xl:w-[2.35rem]"
    //   )}
    //   role="img"
    //   xmlns="http://www.w3.org/2000/svg"
    //   viewBox="0 0 512 512"
    // >
    //   <path
    //     fill="currentColor"
    //     d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
    //   ></path>
    // </svg>
  );
};

export default SearchIcon;