react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
367 lines (362 loc) • 12.4 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawMail = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="daa92041-3bd8-464c-9c92-61b3fade74bd"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 798.82 755.15"
>
<defs>
<linearGradient
id="15164562-d11a-4880-a4be-123e1b3db71d"
x1={589.65}
y1={790.71}
x2={589.65}
y2={501.48}
gradientTransform="translate(0.01 -0.01)"
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="4387c4a6-2b07-43b0-875b-db8294e1d525"
x1={411.34}
y1={295.04}
x2={411.34}
y2={145.7}
xlinkHref="#15164562-d11a-4880-a4be-123e1b3db71d"
/>
<linearGradient
id="b3ecf4c1-be91-4dc4-9933-d34be9a535f7"
x1={545.52}
y1={654.39}
x2={545.52}
y2={72.43}
gradientTransform="translate(-198.33 -72.44)"
xlinkHref="#15164562-d11a-4880-a4be-123e1b3db71d"
/>
<linearGradient
id="a2779652-f4e8-430c-84f8-85803e1803c0"
x1={725.88}
y1={600.13}
x2={725.88}
y2={322.86}
xlinkHref="#15164562-d11a-4880-a4be-123e1b3db71d"
/>
<linearGradient
id="21cc8c64-f270-4c0a-a12f-47a949bb1355"
x1={637.94}
y1={827.57}
x2={637.94}
y2={758.57}
gradientTransform="translate(-198.33 -72.44)"
xlinkHref="#15164562-d11a-4880-a4be-123e1b3db71d"
/>
<linearGradient
id="1cb52d5d-ff8e-4354-9b08-01122ab0b5ee"
x1={544.65}
y1={346}
x2={544.65}
y2={205.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="081aff01-d630-4567-81f7-f799dc64c22c"
x1={544.65}
y1={339.86}
x2={544.65}
y2={212}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#15164562-d11a-4880-a4be-123e1b3db71d"
/>
<linearGradient
id="53983704-70f1-484c-b4a9-0fefea28f4ed"
x1={551.34}
y1={291.95}
x2={551.34}
y2={217.12}
gradientTransform="translate(-197.33 -73.75) rotate(0.13)"
xlinkHref="#1cb52d5d-ff8e-4354-9b08-01122ab0b5ee"
/>
<linearGradient
id="07be2ee9-c937-4187-b89e-5aac7e382593"
x1={396.05}
y1={399.86}
x2={396.05}
y2={262.83}
xlinkHref="#15164562-d11a-4880-a4be-123e1b3db71d"
/>
<linearGradient
id="41444764-58a6-4e8b-8ef1-42407163ea5e"
x1={386.87}
y1={501.4}
x2={386.87}
y2={378}
xlinkHref="#15164562-d11a-4880-a4be-123e1b3db71d"
/>
<linearGradient
id="d5f06af9-7d77-4f55-b81c-ea1018bd06e7"
x1={382.07}
y1={603.69}
x2={382.07}
y2={494.16}
xlinkHref="#15164562-d11a-4880-a4be-123e1b3db71d"
/>
<linearGradient
id="a0f95284-1d1b-41ad-8ba2-df33ef14eff8"
x1={347.18}
y1={384.57}
x2={347.18}
y2={323.57}
xlinkHref="#1cb52d5d-ff8e-4354-9b08-01122ab0b5ee"
/>
<linearGradient
id="bf099e8a-7ee0-495a-b39d-11459c4d4e21"
x1={958.8}
y1={334.16}
x2={958.8}
y2={269.01}
gradientTransform="translate(104.71 -563.96) rotate(32.36)"
xlinkHref="#15164562-d11a-4880-a4be-123e1b3db71d"
/>
</defs>
<title>mail_2</title>
<path
d="M222,521s-.68-2-1.78-5.72"
transform="translate(-198.34 -72.43)"
fill="none"
stroke="#69f0ae"
strokeMiterlimit={10}
strokeWidth={9}
/>
<path
d="M217,503.68C192.69,410.08,116.9-21.3,876.66,248"
transform="translate(-198.34 -72.43)"
fill="none"
stroke="#69f0ae"
strokeMiterlimit={10}
strokeWidth={9}
strokeDasharray="12.04 12.04"
/>
<path
d="M882.35,250l5.65,2"
transform="translate(-198.34 -72.43)"
fill="none"
stroke="#69f0ae"
strokeMiterlimit={10}
strokeWidth={9}
/>
<path
d="M794.94,582.69a81.21,81.21,0,0,0-161-15.14l-249.59-6.77,2.74,42.88s-35.59,82.12,151.46,104v83H754.79v-138A81.16,81.16,0,0,0,794.94,582.69Z"
transform="translate(-198.34 -72.43)"
fill="url(#15164562-d11a-4880-a4be-123e1b3db71d)"
/>
<path
d="M395.66,605.46s-34.08,78.64,145.05,99.62v79.52H747.8V574L393,564.39Z"
transform="translate(-198.34 -72.43)"
fill="#f6b9ad"
/>
<path
d="M499.16,277.29h0a38.18,38.18,0,0,1-52.5,11.93L335.47,215.95a38.18,38.18,0,0,1-11.93-52.5h0A38.18,38.18,0,0,1,376,151.52l111.19,73.27A38.18,38.18,0,0,1,499.16,277.29Z"
transform="translate(-198.34 -72.43)"
fill="url(#4387c4a6-2b07-43b0-875b-db8294e1d525)"
/>
<path
d="M493,273.28h0a35.49,35.49,0,0,1-48.8,11.09L340.81,216.26a35.49,35.49,0,0,1-11.09-48.8h0a35.49,35.49,0,0,1,48.8-11.09l103.37,68.12A35.49,35.49,0,0,1,493,273.28Z"
transform="translate(-198.34 -72.43)"
fill="#f6b9ad"
/>
<circle cx={510.14} cy={512.94} r={77.77} fill="#f6b9ad" />
<rect
x={185.97}
width={322.42}
height={581.96}
rx={12.25}
ry={12.25}
fill="url(#b3ecf4c1-be91-4dc4-9933-d34be9a535f7)"
/>
<rect
x={190.33}
y={7.87}
width={313.7}
height={566.24}
rx={13.64}
ry={13.64}
fill="#fff"
/>
<path
d="M624.33,94.49a25.43,25.43,0,0,1-25.07,21.63H490.92a25.43,25.43,0,0,1-25.06-21.63H408.46a11.91,11.91,0,0,0-11.92,11.91v514a11.91,11.91,0,0,0,11.91,11.92H682.59a11.91,11.91,0,0,0,11.92-11.91v-514A11.91,11.91,0,0,0,682.6,94.49Z"
transform="translate(-198.34 -72.43)"
fill={props.primaryColor}
/>
<rect
x={312.67}
y={28.84}
width={69.91}
height={4.37}
rx={2}
ry={2}
fill="#dbdbdb"
/>
<circle cx={397.43} cy={30.59} r={2.62} fill="#dbdbdb" />
<path
d="M758.76,599.08h0c-22.57,5.22-38.06-9.5-43.28-32.06L663.62,374.46a42.24,42.24,0,0,1,31.55-50.51h0a42.24,42.24,0,0,1,50.51,31.55L788,553C793.22,575.6,781.32,593.86,758.76,599.08Z"
transform="translate(-198.34 -72.43)"
fill="url(#a2779652-f4e8-430c-84f8-85803e1803c0)"
/>
<rect
x={693.86}
y={330.01}
width={70.78}
height={282.61}
rx={35.39}
ry={35.39}
transform="translate(-285.75 103.91) rotate(-13.01)"
fill="#f6b9ad"
/>
<rect
x={291.59}
y={686.15}
width={296}
height={69}
fill="url(#21cc8c64-f270-4c0a-a12f-47a949bb1355)"
/>
<rect x={299.59} y={694.15} width={280} height={54} fill="#ff8976" />
<path
d="M611.56,254.81l-22.94-17.27,10-13-16.69-13.1L571.5,224.66l-23.59-17.75a5.19,5.19,0,0,0-6.23,0l-62.53,46.55c-2.37,2-4.59,4.29-4.61,9.53h-.07l-.16,71.72h0v3.19a7.82,7.82,0,0,0,7.8,7.84h3.08l59.29.13,62.38.14a7.82,7.82,0,0,0,7.84-7.8l.17-74.78H615C615,258.18,613.93,256.81,611.56,254.81Z"
transform="translate(-198.34 -72.43)"
fill="url(#1cb52d5d-ff8e-4354-9b08-01122ab0b5ee)"
/>
<path
d="M608.84,264.52c0-4.78-1-6-3.14-7.85L547.63,213a4.74,4.74,0,0,0-5.69,0l-57.05,42.48a10.06,10.06,0,0,0-4.2,8.69h-.06l-.15,65.44h0v2.91a7.14,7.14,0,0,0,7.12,7.15h2.81l54.1.12,56.91.13a7.14,7.14,0,0,0,7.15-7.12l.15-68.23Z"
transform="translate(-198.34 -72.43)"
fill="url(#081aff01-d630-4567-81f7-f799dc64c22c)"
/>
<path
d="M481.61,264.55H607.44a0,0,0,0,1,0,0v69.23a4.18,4.18,0,0,1-4.18,4.18h-117a4.61,4.61,0,0,1-4.61-4.61V264.55a0,0,0,0,1,0,0Z"
transform="translate(-197.67 -73.64) rotate(0.13)"
fill={props.primaryColor}
/>
<path
d="M481.61,264.55H607.44a0,0,0,0,1,0,0v69.23a4.18,4.18,0,0,1-4.18,4.18h-117a4.61,4.61,0,0,1-4.61-4.61V264.55a0,0,0,0,1,0,0Z"
transform="translate(-197.67 -73.64) rotate(0.13)"
fill="#fff"
opacity={0.2}
/>
<path
d="M481.69,264.41,481.55,328a9.77,9.77,0,0,0,9.75,9.79l106.29.24"
transform="translate(-198.34 -72.43)"
fill="#f5f5f5"
/>
<path
d="M607.53,264.69l-.14,63.63a9.77,9.77,0,0,1-9.79,9.75l-106.29-.24"
transform="translate(-198.34 -72.43)"
fill="#fff"
/>
<path
d="M541.93,214.66l-56,41.3a9.75,9.75,0,0,0-4.13,8.45l125.89.4c0-4.65-1-5.87-3.08-7.63l-57.05-42.5A4.69,4.69,0,0,0,541.93,214.66Z"
transform="translate(-198.34 -72.43)"
fill={props.primaryColor}
/>
<path
d="M541.93,214.66l-56,41.3a9.75,9.75,0,0,0-4.13,8.45l125.89.4c0-4.65-1-5.87-3.08-7.63l-57.05-42.5A4.69,4.69,0,0,0,541.93,214.66Z"
transform="translate(-198.34 -72.43)"
opacity={0.2}
/>
<polygon
points="395.56 156.6 380.33 144.66 343.52 191.28 323.74 175.94 311.35 191.69 340.14 213.68 340.14 213.68 347.28 219.41 395.56 156.6"
fill="url(#53983704-70f1-484c-b4a9-0fefea28f4ed)"
/>
<polygon
points="394.44 156.31 380.64 145.73 344.07 193.42 323.76 177.85 313.17 191.65 340.38 212.49 340.38 212.49 347.36 217.72 394.44 156.31"
fill="#fff"
/>
<path
d="M475.28,382.24h0a37.9,37.9,0,0,1-52.11,11.84l-94.5-61.53a37.9,37.9,0,0,1-11.84-52.11h0a37.9,37.9,0,0,1,52.11-11.84l94.5,61.53A37.9,37.9,0,0,1,475.28,382.24Z"
transform="translate(-198.34 -72.43)"
fill="url(#07be2ee9-c937-4187-b89e-5aac7e382593)"
/>
<path
d="M470.26,379h0a35.49,35.49,0,0,1-48.8,11.09l-88.51-57.63a35.49,35.49,0,0,1-11.09-48.8h0a35.49,35.49,0,0,1,48.8-11.09l88.51,57.63A35.49,35.49,0,0,1,470.26,379Z"
transform="translate(-198.34 -72.43)"
fill="#f6b9ad"
/>
<path
d="M456,483.86h0a37.72,37.72,0,0,1-51.87,11.79L329.55,447.4a37.72,37.72,0,0,1-11.79-51.87h0a37.72,37.72,0,0,1,51.87-11.79L444.2,432A37.72,37.72,0,0,1,456,483.86Z"
transform="translate(-198.34 -72.43)"
fill="url(#41444764-58a6-4e8b-8ef1-42407163ea5e)"
/>
<path
d="M437.28,586h0a38.06,38.06,0,0,1-52.34,11.9L338.75,564.2a38.06,38.06,0,0,1-11.9-52.34h0A38.06,38.06,0,0,1,379.19,500l46.19,33.69A38.06,38.06,0,0,1,437.28,586Z"
transform="translate(-198.34 -72.43)"
fill="url(#d5f06af9-7d77-4f55-b81c-ea1018bd06e7)"
/>
<path
d="M433.55,583.49h0a35.49,35.49,0,0,1-48.8,11.09l-43.07-31.42a35.49,35.49,0,0,1-11.09-48.8h0a35.49,35.49,0,0,1,48.8-11.09l43.07,31.42A35.49,35.49,0,0,1,433.55,583.49Z"
transform="translate(-198.34 -72.43)"
fill="#f6b9ad"
/>
<rect
x={245.18}
y={323.57}
width={204}
height={61}
fill="url(#a0f95284-1d1b-41ad-8ba2-df33ef14eff8)"
/>
<rect x={252.18} y={329.57} width={190} height={44} fill="#69f0ae" />
<polygon
points="795.23 214.52 798.82 215.08 798.26 214.55 798.56 214.55 798.09 214.39 733 152.66 717.2 177.59 704.06 200.33 710.15 201.28 707.45 213.6 795.23 214.52"
fill="url(#bf099e8a-7ee0-495a-b39d-11459c4d4e21)"
/>
<polygon
points="719.93 178.89 707.93 199.7 795.93 214.03 739.25 174.56 719.93 178.89"
fill={props.primaryColor}
/>
<polygon
points="719.93 178.89 707.93 199.7 795.93 214.03 739.25 174.56 719.93 178.89"
opacity={0.2}
/>
<polygon
points="734.38 156.09 795.93 214.03 719.93 178.89 734.38 156.09"
fill={props.primaryColor}
/>
<polygon
points="711.17 211.93 795.69 213.54 716.79 185.52 711.17 211.93"
fill={props.primaryColor}
/>
<path
d="M451.9,481.25h0a35.49,35.49,0,0,1-48.8,11.09l-70.16-45.4a35.49,35.49,0,0,1-11.09-48.8h0A35.49,35.49,0,0,1,370.65,387l70.16,45.4A35.49,35.49,0,0,1,451.9,481.25Z"
transform="translate(-198.34 -72.43)"
fill="#f6b9ad"
/>
</svg>
);
UndrawMail.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawMail.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawMail;