react-undraw-illustrations/src/node_modules/components/UndrawMessages/UndrawMessages.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 UndrawMessages = props => (
  <svg
    style={{height:props.height, width:'100%'}}
    className={props.class}
    id="174006fb-eaae-4ceb-a44a-e510ad2f60cc"
    data-name="Layer 1"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 664 779.55"
  >
    <defs>
      <linearGradient
        id="d9979445-c859-4563-868f-1ee7be59ec9d"
        x1={324.23}
        y1={775.01}
        x2={630.7}
        y2={51.33}
        gradientTransform="translate(-13.63 -2.04) rotate(-0.14)"
        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="4c4610df-9cbb-435b-8695-e49ccdd3dd10"
        x1={557.77}
        y1={856.45}
        x2={863.06}
        y2={135.54}
        xlinkHref="#d9979445-c859-4563-868f-1ee7be59ec9d"
      />
      <linearGradient
        id="1e21244c-e8bd-41cb-ba71-2767c5207691"
        x1={430.18}
        y1={453.24}
        x2={430.18}
        y2={294.18}
        gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
        xlinkHref="#d9979445-c859-4563-868f-1ee7be59ec9d"
      />
    </defs>
    <title>messages1</title>
    <g opacity={0.5}>
      <path
        d="M645.11,60.78l-362.25.88A14.89,14.89,0,0,0,268,76.57l1.65,667.73a14.89,14.89,0,0,0,14.93,14.85l362.25-.88a14.89,14.89,0,0,0,14.85-14.92L660,75.62A14.89,14.89,0,0,0,645.11,60.78Z"
        transform="translate(-268 -60.22)"
        fill="url(#d9979445-c859-4563-868f-1ee7be59ec9d)"
      />
      <rect
        x={274.12}
        y={60.65}
        width={381.44}
        height={688.5}
        rx={13.64}
        ry={13.64}
        transform="translate(-268.98 -59.09) rotate(-0.14)"
        fill="#fff"
      />
      <path
        d="M645.62,251h0l-.38-159a14.49,14.49,0,0,0-14.52-14.45l-70.85.17a30.92,30.92,0,0,1-30.41,26.38l-131.75.32a30.92,30.92,0,0,1-30.54-26.23l-69.79.17a14.49,14.49,0,0,0-14.45,14.52l.39,160.34,1.13,464.66A14.49,14.49,0,0,0,299,732.3l333.34-.81A14.49,14.49,0,0,0,646.75,717Z"
        transform="translate(-268 -60.22)"
        fill="#bbb"
      />
      <rect
        x={418.12}
        y={86.18}
        width={85}
        height={5.31}
        rx={2}
        ry={2}
        transform="translate(-269.28 -53.29) rotate(-0.86)"
        fill="#dbdbdb"
      />
      <circle
        cx={521.17}
        cy={87.39}
        r={3.19}
        transform="translate(-269.25 -52.38) rotate(-0.86)"
        fill="#dbdbdb"
      />
      <rect x={166.1} y={103.52} width={177.59} height={14.16} fill="#e0e0e0" />
      <rect x={166.1} y={131.84} width={177.59} height={14.16} fill="#e0e0e0" />
      <ellipse cx={78.09} cy={118.92} rx={33.54} ry={33.7} fill="#f5f5f5" />
      <path
        d="M360.54,202.73H331.45a8.67,8.67,0,0,0-7.08,3.76,43.63,43.63,0,0,0,43,.24A8.66,8.66,0,0,0,360.54,202.73Z"
        transform="translate(-268 -60.22)"
        fill={props.primaryColor}
      />
      <path
        d="M331.69,180s-4.26,12.4-6.59,11.24c0,0,22.44,19.38,42.25,0A59.07,59.07,0,0,0,358.82,180Z"
        transform="translate(-268 -60.22)"
        fill="#333"
      />
      <circle cx={78.07} cy={118.62} r={16.67} fill="#333" />
      <path
        d="M72.21,136.73H83.84a0,0,0,0,1,0,0v4.52a5.34,5.34,0,0,1-5.34,5.34h-1a5.34,5.34,0,0,1-5.34-5.34v-4.52A0,0,0,0,1,72.21,136.73Z"
        opacity={0.1}
      />
      <path
        d="M73.44,136.45h9.18a1.23,1.23,0,0,1,1.23,1.23V141a5.34,5.34,0,0,1-5.34,5.34h-1A5.34,5.34,0,0,1,72.21,141v-3.29A1.23,1.23,0,0,1,73.44,136.45Z"
        fill="#fda57d"
      />
      <path
        d="M340.24,198.35a16.73,16.73,0,0,0,11.63,0V197H340.24Z"
        transform="translate(-268 -60.22)"
        opacity={0.1}
      />
      <circle cx={78.07} cy={122.24} r={16.67} fill="#fda57d" />
      <path
        d="M330.14,176.13h31.78s-2.71-12.83-14.73-12S330.14,176.13,330.14,176.13Z"
        transform="translate(-268 -60.22)"
        fill="#333"
      />
      <ellipse cx={61.75} cy={121.53} rx={1.55} ry={2.91} fill="#fda57d" />
      <ellipse cx={94.31} cy={121.53} rx={1.55} ry={2.91} fill="#fda57d" />
      <path
        d="M330.14,176.57h31.78s-2.71-12.83-14.73-12S330.14,176.57,330.14,176.57Z"
        transform="translate(-268 -60.22)"
        opacity={0.1}
      />
      <rect x={166.1} y={211.38} width={177.59} height={14.16} fill="#e0e0e0" />
      <rect x={166.1} y={239.7} width={177.59} height={14.16} fill="#e0e0e0" />
      <ellipse cx={78.09} cy={226.78} rx={33.54} ry={33.7} fill="#e0e0e0" />
      <rect x={166.1} y={319.24} width={177.59} height={14.16} fill="#e0e0e0" />
      <rect x={166.1} y={347.56} width={177.59} height={14.16} fill="#e0e0e0" />
      <ellipse cx={78.09} cy={334.64} rx={33.54} ry={33.7} fill="#e0e0e0" />
      <rect x={166.1} y={427.1} width={177.59} height={14.16} fill="#e0e0e0" />
      <rect x={166.1} y={455.42} width={177.59} height={14.16} fill="#e0e0e0" />
      <ellipse cx={78.09} cy={442.5} rx={33.54} ry={33.7} fill="#e0e0e0" />
      <rect x={166.1} y={534.96} width={177.59} height={14.16} fill="#e0e0e0" />
      <rect x={166.1} y={563.28} width={177.59} height={14.16} fill="#e0e0e0" />
      <ellipse cx={78.09} cy={550.36} rx={33.54} ry={33.7} fill="#e0e0e0" />
    </g>
    <path
      d="M878.26,144.67,516,145.55a14.89,14.89,0,0,0-14.85,14.92l1.65,664.46a14.89,14.89,0,0,0,14.93,14.85L880,838.9A14.89,14.89,0,0,0,894.83,824l-1.65-664.46A14.89,14.89,0,0,0,878.26,144.67Z"
      transform="translate(-268 -60.22)"
      fill="url(#4c4610df-9cbb-435b-8695-e49ccdd3dd10)"
    />
    <rect
      x={507.27}
      y={141.27}
      width={381.44}
      height={688.5}
      rx={13.64}
      ry={13.64}
      transform="translate(-269.18 -58.52) rotate(-0.14)"
      fill="#fff"
    />
    <path
      id="9f21819d-df43-48b3-835e-9020276cbed3"
      data-name="<Path>"
      d="M878.77,332.71l-.38-160.13a14.49,14.49,0,0,0-14.52-14.45L793,158.3a30.92,30.92,0,0,1-30.41,26.38L630.85,185a30.92,30.92,0,0,1-30.54-26.23l-69.79.17a14.49,14.49,0,0,0-14.45,14.52l.39,160.34"
      transform="translate(-268 -60.22)"
      fill="#fafafa"
    />
    <path
      id="c36a71a1-8927-4a8e-aa0b-340c78108d04"
      data-name="<Path>"
      d="M516.46,333.81l1.13,464.66a14.49,14.49,0,0,0,14.52,14.45l333.34-.81a14.49,14.49,0,0,0,14.45-14.52l-1.14-466"
      transform="translate(-268 -60.22)"
      fill="#fafafa"
    />
    <rect x={280.5} y={164.53} width={70.82} height={70.82} fill="#e0e0e0" />
    <g opacity={0.5}>
      <rect
        x={196.37}
        y={294.18}
        width={467.63}
        height={159.07}
        fill="url(#1e21244c-e8bd-41cb-ba71-2767c5207691)"
      />
    </g>
    <rect x={201.94} y={300.72} width={456.5} height={147.08} fill="#fff" />
    <rect x={384} y={355.19} width={177.59} height={14.16} fill={props.primaryColor} />
    <rect x={384} y={383.52} width={177.59} height={14.16} fill={props.primaryColor} />
    <rect x={384} y={512.08} width={177.59} height={14.16} fill="#e0e0e0" />
    <rect x={384} y={540.4} width={177.59} height={14.16} fill="#eee" />
    <rect x={433.03} y={221.18} width={79.53} height={25.06} fill={props.primaryColor} />
    <ellipse cx={295.99} cy={370.59} rx={33.54} ry={33.7} fill="#f5f5f5" />
    <path
      d="M578.44,454.4H549.34a8.67,8.67,0,0,0-7.08,3.76,43.63,43.63,0,0,0,43,.24A8.66,8.66,0,0,0,578.44,454.4Z"
      transform="translate(-268 -60.22)"
      fill={props.primaryColor}
    />
    <path
      d="M549.59,431.68s-4.26,12.4-6.59,11.24c0,0,22.44,19.38,42.25,0a59.07,59.07,0,0,0-8.53-11.24Z"
      transform="translate(-268 -60.22)"
      fill="#333"
    />
    <circle cx={295.97} cy={370.3} r={16.67} fill="#333" />
    <path
      d="M290.11,388.41h11.63a0,0,0,0,1,0,0v4.52a5.34,5.34,0,0,1-5.34,5.34h-1a5.34,5.34,0,0,1-5.34-5.34v-4.52A0,0,0,0,1,290.11,388.41Z"
      opacity={0.1}
    />
    <path
      d="M291.34,388.13h9.18a1.23,1.23,0,0,1,1.23,1.23v3.29A5.34,5.34,0,0,1,296.4,398h-1a5.34,5.34,0,0,1-5.34-5.34v-3.29a1.23,1.23,0,0,1,1.23-1.23Z"
      fill="#fda57d"
    />
    <path
      d="M558.13,450a16.73,16.73,0,0,0,11.63,0v-1.43H558.13Z"
      transform="translate(-268 -60.22)"
      opacity={0.1}
    />
    <circle cx={295.97} cy={373.91} r={16.67} fill="#fda57d" />
    <path
      d="M548,427.81h31.78s-2.71-12.83-14.73-12S548,427.81,548,427.81Z"
      transform="translate(-268 -60.22)"
      fill="#333"
    />
    <ellipse cx={279.65} cy={373.2} rx={1.55} ry={2.91} fill="#fda57d" />
    <ellipse cx={312.2} cy={373.2} rx={1.55} ry={2.91} fill="#fda57d" />
    <path
      d="M548,428.24h31.78s-2.71-12.83-14.73-12S548,428.24,548,428.24Z"
      transform="translate(-268 -60.22)"
      opacity={0.1}
    />
    <ellipse cx={317.78} cy={528.57} rx={33.54} ry={33.7} fill="#e0e0e0" />
    <ellipse cx={317.78} cy={658.22} rx={33.54} ry={33.7} fill="#e0e0e0" />
    <rect x={384} y={637.37} width={177.59} height={14.16} fill="#e0e0e0" />
    <rect x={384} y={665.69} width={177.59} height={14.16} fill="#eee" />
    <rect x={384} y={164.53} width={177.59} height={14.16} fill="#e0e0e0" />
    <rect x={384} y={192.86} width={177.59} height={14.16} fill="#e0e0e0" />
    <rect
      x={651.27}
      y={166.8}
      width={85}
      height={5.31}
      rx={2}
      ry={2}
      transform="translate(-270.47 -49.77) rotate(-0.86)"
      fill="#dbdbdb"
    />
    <circle
      cx={754.32}
      cy={168.02}
      r={3.19}
      transform="translate(-270.44 -48.86) rotate(-0.86)"
      fill="#dbdbdb"
    />
  </svg>
);

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

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

export default UndrawMessages;