react-undraw-illustrations/src/node_modules/components/UndrawChat/UndrawChat.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 UndrawChat = props => (
  <svg
    style={{height:props.height, width:'100%'}}
    className={props.class}
    id="41468acd-cd3b-42a6-b6d6-962a1482835f"
    data-name="Layer 1"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 869 634.74"
  >
    <defs>
      <linearGradient
        id="1bb150a8-47e8-48a0-8586-3a0b005e9061"
        x1={762.35}
        y1={767.37}
        x2={762.35}
        y2={290.82}
        gradientUnits="userSpaceOnUse"
      >
        <stop offset={0.01} 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="81ddbcf2-2292-4b47-939f-09c11d0fad8e"
        x1={436.09}
        y1={608.57}
        x2={436.09}
        y2={132.63}
        xlinkHref="#1bb150a8-47e8-48a0-8586-3a0b005e9061"
      />
    </defs>
    <title>chat</title>
    <path
      d="M998.41,290.82H566.95c-42.38,0-76.74,34.69-76.74,77.48V636.48a36.26,36.26,0,0,0,36.09,36.44h274c9.12,31.56,32,75.06,89.64,94.45l-16.27-94.45H998.41a36.26,36.26,0,0,0,36.09-36.44V327.26A36.26,36.26,0,0,0,998.41,290.82Z"
      transform="translate(-165.5 -132.63)"
      fill="url(#1bb150a8-47e8-48a0-8586-3a0b005e9061)"
    />
    <path
      d="M991.15,299.86H572.35a74.49,74.49,0,0,0-74.49,74.49V632.17a35,35,0,0,0,35,35H798.83c8.85,30.34,31.09,72.16,87,90.8L870,667.2h121.1a35,35,0,0,0,35-35V334.89A35,35,0,0,0,991.15,299.86Z"
      transform="translate(-165.5 -132.63)"
      fill="#fafafa"
    />
    <rect x={500.77} y={234.16} width={216.47} height={27.06} fill="#e0e0e0" />
    <rect x={634.84} y={284.12} width={81.18} height={27.06} fill="#e0e0e0" />
    <rect x={554.7} y={334.07} width={160.08} height={27.06} fill="#e0e0e0" />
    <rect x={517.24} y={384.03} width={196.32} height={27.06} fill="#e0e0e0" />
    <rect x={608.82} y={433.98} width={103.51} height={27.06} fill="#e0e0e0" />
    <path
      d="M201.38,132.63H670.79c19.82,0,35.88,16.29,35.88,36.39V477.85c0,20.1-16.06,36.39-35.88,36.39H398.38c-9.07,31.52-31.85,75-89.13,94.33l16.18-94.33h-124c-19.82,0-35.88-16.29-35.88-36.39V169C165.5,148.92,181.56,132.63,201.38,132.63Z"
      transform="translate(-165.5 -132.63)"
      fill="url(#81ddbcf2-2292-4b47-939f-09c11d0fad8e)"
    />
    <path
      d="M206.77,142.1H665a35,35,0,0,1,35,35V474.41a35,35,0,0,1-35,35H399.09c-8.85,30.34-31.09,72.16-87,90.8l15.79-90.8H206.77a35,35,0,0,1-35-35V177.13A35,35,0,0,1,206.77,142.1Z"
      transform="translate(-165.5 -132.63)"
      fill="#fff"
    />
    <rect x={162.16} y={66.61} width={216.47} height={27.06} fill={props.primaryColor} />
    <rect x={163.39} y={116.56} width={81.18} height={27.06} fill={props.primaryColor} />
    <rect x={164.62} y={166.51} width={160.08} height={27.06} fill={props.primaryColor} />
    <rect x={165.85} y={216.47} width={196.32} height={27.06} fill={props.primaryColor} />
    <rect x={167.08} y={266.42} width={103.51} height={27.06} fill={props.primaryColor} />
  </svg>
);

UndrawChat.propTypes = {
  /**
   * Hex color
   */
  primaryColor: PropTypes.string,
  /**
   * percentage
   */
  height: PropTypes.string,
  /**
   * custom class for svg
   */
  class: PropTypes.string
};

UndrawChat.defaultProps = {
  primaryColor: "#6c68fb",
  height: "250px",
  class: ""
};

export default UndrawChat;