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;