react-undraw-illustrations/src/node_modules/components/UndrawSearch/UndrawSearch.js

unDraw: MIT licensed illustrations for every project you can imagine and create...for React!

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;