text: import React from "react";
  import PropTypes from "prop-types";
  
  const UndrawSearch = props => (
    <svg
      style={{height:props.height, width:'100%'}}
      className={props.class}
      id="806e4c62-374e-42c3-bdb7-896b30a4289a"
      data-name="Layer 1"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 877 551.99"
    >
      <defs>
        <linearGradient
          id="79b8a473-e936-4e54-b854-cc8520c1f266"
          x1={441.05}
          y1={161.23}
          x2={441.05}
          gradientUnits="userSpaceOnUse"
        >
          <stop offset={0} stopColor="gray" stopOpacity={0.25} />
          <stop offset={0.54} stopColor="gray" stopOpacity={0.12} />
          <stop offset={1} stopColor="gray" stopOpacity={0.1} />
        </linearGradient>
        <linearGradient
          id="1e668cbb-e7c2-4a39-9f64-b81df751fdab"
          x1={898}
          y1={321.04}
          x2={898}
          y2={200.75}
          gradientUnits="userSpaceOnUse"
        >
          <stop offset={0} stopColor="#b3b3b3" stopOpacity={0.25} />
          <stop offset={0.54} stopColor="#b3b3b3" stopOpacity={0.1} />
          <stop offset={1} stopColor="#b3b3b3" stopOpacity={0.05} />
        </linearGradient>
        <linearGradient
          id="88c69e1d-c781-40a9-bf13-f8010c5ba138"
          x1={860.83}
          y1={243.65}
          x2={860.83}
          y2={237.86}
          gradientUnits="userSpaceOnUse"
        >
          <stop offset={0} stopOpacity={0.12} />
          <stop offset={0.55} stopOpacity={0.09} />
          <stop offset={1} stopOpacity={0.02} />
        </linearGradient>
        <linearGradient
          id="b4bb9b24-9fbd-4855-955e-d2374dfaf9d1"
          x1={887.42}
          y1={237}
          x2={887.42}
          y2={219.3}
          xlinkHref="#88c69e1d-c781-40a9-bf13-f8010c5ba138"
        />
        <linearGradient
          id="7808190e-10e9-4a9e-a111-7bdbd648c09d"
          x1={435.32}
          y1={551.99}
          x2={435.32}
          y2={214.38}
          xlinkHref="#79b8a473-e936-4e54-b854-cc8520c1f266"
        />
      </defs>
      <title>search</title>
      <rect
        x={5.09}
        width={871.91}
        height={161.23}
        fill="url(#79b8a473-e936-4e54-b854-cc8520c1f266)"
      />
      <rect x={10.18} y={5.28} width={860.45} height={147.38} fill="#fff" />
      <rect x={63.03} y={35.36} width={500.19} height={87.71} fill="#f5f5f5" />
      <path
        d="M918.76,215a46.32,46.32,0,1,0-7.58,70.55l33.48,34.83a2.25,2.25,0,0,0,3.19.06l8.34-8a2.25,2.25,0,0,0,.06-3.19l-33.48-34.83A46.32,46.32,0,0,0,918.76,215Zm-10.43,56a33.13,33.13,0,1,1,.92-46.85A33.13,33.13,0,0,1,908.33,270.95Z"
        transform="translate(-161.5 -174)"
        fill="url(#1e668cbb-e7c2-4a39-9f64-b81df751fdab)"
      />
      <path
        d="M860.83,237.86c-3.73,0-3.73,5.79,0,5.79S864.56,237.86,860.83,237.86Z"
        transform="translate(-161.5 -174)"
        fill="url(#88c69e1d-c781-40a9-bf13-f8010c5ba138)"
      />
      <path
        d="M886.8,219.31a27.83,27.83,0,0,0-24,12.4c-1.58,2.48,2.91,4.67,4.49,2.2,4-6.29,11.65-10.28,19.9-10.07a25.36,25.36,0,0,1,20.69,12c1.58,2.61,5.73.24,4.15-2.35C907,225.19,897.16,219.54,886.8,219.31Z"
        transform="translate(-161.5 -174)"
        fill="url(#b4bb9b24-9fbd-4855-955e-d2374dfaf9d1)"
      />
      <path
        d="M918.76,209.87a46.32,46.32,0,1,0-7.58,70.55l33.48,34.83a2.25,2.25,0,0,0,3.19.06l8.34-8a2.25,2.25,0,0,0,.06-3.19l-33.48-34.83A46.32,46.32,0,0,0,918.76,209.87Zm-10.43,56a33.13,33.13,0,1,1,.92-46.85A33.13,33.13,0,0,1,908.33,265.86Z"
        transform="translate(-161.5 -174)"
        fill={props.primaryColor}
      />
      <path
        d="M860.83,232.76c-3.73,0-3.73,5.79,0,5.79S864.56,232.76,860.83,232.76Z"
        transform="translate(-161.5 -174)"
        fill={props.primaryColor}
      />
      <path
        d="M886.8,214.22a27.83,27.83,0,0,0-24,12.4c-1.58,2.48,2.91,4.67,4.49,2.2,4-6.29,11.65-10.28,19.9-10.07a25.36,25.36,0,0,1,20.69,12c1.58,2.61,5.73.24,4.15-2.35C907,220.1,897.16,214.45,886.8,214.22Z"
        transform="translate(-161.5 -174)"
        fill={props.primaryColor}
      />
      <rect
        y={214.38}
        width={870.64}
        height={337.62}
        fill="url(#7808190e-10e9-4a9e-a111-7bdbd648c09d)"
      />
      <rect x={10.18} y={222.62} width={850.03} height={318.58} fill="#fff" />
      <circle cx={121.09} cy={381.17} r={71.46} fill={props.primaryColor} />
      <rect x={244.65} y={324.6} width={297.73} height={35.73} fill="#bdbdbd" />
      <rect x={244.65} y={397.54} width={297.73} height={35.73} fill="#e0e0e0" />
      <rect x={580.34} y={222.62} width={281.36} height={318.58} fill={props.primaryColor} />
    </svg>
  );
  
  UndrawSearch.propTypes = {
    /**
     * Hex color
     */
    primaryColor: PropTypes.string,
    /**
     * percentage
     */
    height: PropTypes.string,
    /**
     * custom class for svg
     */
    class: PropTypes.string
  };
  
  UndrawSearch.defaultProps = {
    primaryColor: "#6c68fb",
    height: "250px",
    class: ""
  };
  
  export default UndrawSearch;
  