react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
229 lines (224 loc) • 10.2 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawSocialMedia = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="4f34ac5b-06a5-4e9f-a3b4-7a11c2245422"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 946 662.82"
>
<defs>
<linearGradient
id="09c8cc8f-92ba-40ad-9bcf-c69e30bb22d4"
x1={234.56}
y1={283.2}
x2={234.56}
y2={231.17}
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="13e816b5-137e-47f5-8196-4188f4bc4a94"
x1={421}
y1={184.6}
x2={421}
y2={143.59}
xlinkHref="#09c8cc8f-92ba-40ad-9bcf-c69e30bb22d4"
/>
<linearGradient
id="ec7235bc-edb0-48ad-aaf1-13d11d759c47"
x1={779.75}
y1={193.65}
x2={779.75}
y2={135.98}
xlinkHref="#09c8cc8f-92ba-40ad-9bcf-c69e30bb22d4"
/>
<linearGradient
id="b0ec783d-9ec9-45fa-bc88-04f8a3147d7b"
x1={955.09}
y1={258.09}
x2={955.09}
y2={208.09}
xlinkHref="#09c8cc8f-92ba-40ad-9bcf-c69e30bb22d4"
/>
<linearGradient
id="77144f36-2005-45f3-b937-41812ed6196c"
x1={566}
y1={144.09}
x2={614}
y2={144.09}
xlinkHref="#09c8cc8f-92ba-40ad-9bcf-c69e30bb22d4"
/>
<linearGradient
id="477b5c35-3b7e-4710-890f-e40b31bf2889"
x1={473}
y1={662.82}
x2={473}
y2={623.18}
xlinkHref="#09c8cc8f-92ba-40ad-9bcf-c69e30bb22d4"
/>
<linearGradient
id="4c2aa4c9-d632-4e30-84ea-04e589bc704b"
x1={480.94}
y1={627}
x2={480.94}
y2={607.6}
xlinkHref="#09c8cc8f-92ba-40ad-9bcf-c69e30bb22d4"
/>
<linearGradient
id="934c816f-ebb3-45fb-afb6-385622a7be5e"
x1={608.04}
y1={637.16}
x2={608.04}
y2={273.59}
xlinkHref="#09c8cc8f-92ba-40ad-9bcf-c69e30bb22d4"
/>
<linearGradient
id="a38b18cf-ed62-41da-ac6d-7049300a403a"
x1={275.92}
y1={743.91}
x2={275.92}
y2={646.42}
xlinkHref="#09c8cc8f-92ba-40ad-9bcf-c69e30bb22d4"
/>
<linearGradient
id="6867ecda-da70-4397-b0e4-b6132189e523"
x1={235.47}
y1={719.27}
x2={235.47}
y2={656.06}
xlinkHref="#09c8cc8f-92ba-40ad-9bcf-c69e30bb22d4"
/>
</defs>
<title>pcsocial</title>
<path
d="M229.44,244.77l2.81,4.13,6.62-4.5,4.23,8-5.79,3.94L251.36,277l-9.1,6.18-14.06-20.67-4.13,2.81L219,257.9l4.13-2.81L220.34,251s-6.09-7.35.43-13.59l9.1-6.18,4.5,6.62-4.13,2.81A3,3,0,0,0,229.44,244.77Z"
transform="translate(-127 -118.59)"
fill="url(#09c8cc8f-92ba-40ad-9bcf-c69e30bb22d4)"
/>
<path
d="M231.44,241.77l2.81,4.13,6.62-4.5,4.23,8-5.79,3.94L253.36,274l-9.1,6.18-14.06-20.67-4.13,2.81L221,254.9l4.13-2.81L222.34,248s-6.09-7.35.43-13.59l9.1-6.18,4.5,6.62-4.13,2.81A3,3,0,0,0,231.44,241.77Z"
transform="translate(-127 -118.59)"
fill="#3b5998"
/>
<path
d="M441,150.59l5-1s-4.2,4.7-5,5h0a20.12,20.12,0,0,0,0,3c-9.6,41.2-45,23-45,23,12.9.3,14-5,14-5-7.5-1.1-9-6-9-6a3.09,3.09,0,0,0,4-1c-8.1-2.1-7-10-7-10a10.4,10.4,0,0,0,4.9,1.9c-.9-1.1-8.5-10.2-3.9-14.9,0,0,5.6,10,20.3,10.9l1-.2a7.85,7.85,0,0,1-.2-2.2,10.5,10.5,0,0,1,10.5-10.5c7,0,8.5,4,8.5,4l5-3C444,144.59,443.5,149.59,441,150.59Z"
transform="translate(-127 -118.59)"
fill="url(#13e816b5-137e-47f5-8196-4188f4bc4a94)"
/>
<path
d="M443,147.59l5-1s-4.2,4.7-5,5h0a20.12,20.12,0,0,0,0,3c-9.6,41.2-45,23-45,23,12.9.3,14-5,14-5-7.5-1.1-9-6-9-6a3.09,3.09,0,0,0,4-1c-8.1-2.1-7-10-7-10a10.4,10.4,0,0,0,4.9,1.9c-.9-1.1-8.5-10.2-3.9-14.9,0,0,5.6,10,20.3,10.9l1-.2a7.85,7.85,0,0,1-.2-2.2,10.5,10.5,0,0,1,10.5-10.5c7,0,8.5,4,8.5,4l5-3C446,141.59,445.5,146.59,443,147.59Z"
transform="translate(-127 -118.59)"
fill="#00aced"
/>
<path
d="M790.83,190.85,796.31,172s.09-4.24-3.71-5.14-5.22-.69-7.53.83l-5.76,19.78-9.6-2.8,8.67-29.76,9.6,2.8-1.29,4.42s5-5.22,11.25-2.87c5.84,2.12,9.19,7.05,7.89,15.11l.19.06-5.6,19.2ZM768,147.74a6,6,0,1,1,7.44-4.08A6,6,0,0,1,768,147.74Zm-5,35-9.6-2.8,8.67-29.76,9.6,2.8Z"
transform="translate(-127 -118.59)"
fill="url(#ec7235bc-edb0-48ad-aaf1-13d11d759c47)"
/>
<path
d="M792.83,187.85,798.31,169s.09-4.24-3.71-5.14-5.22-.69-7.53.83l-5.76,19.78-9.6-2.8,8.67-29.76,9.6,2.8-1.29,4.42s5-5.22,11.25-2.87c5.84,2.12,9.19,7.05,7.89,15.11l.19.06-5.6,19.2ZM770,144.74a6,6,0,1,1,7.44-4.08A6,6,0,0,1,770,144.74Zm-5,35-9.6-2.8,8.67-29.76,9.6,2.8Z"
transform="translate(-127 -118.59)"
fill="#0077b5"
/>
<path
d="M974,228.09c-1.1,5.3-1.9,12.5-13,15,0,0-6.5,1.7-8.6-3-1.3,5.1-2.6,9.8-3.4,11a62.41,62.41,0,0,1-5,7s.9-9,1-11c.1-3.1,3-17,3-17s-2.7-9.8,4-11c0,0,5.5-1.3,4,6,0,0-1.1,4.8-2.5,10.3l.5.7a5.62,5.62,0,0,0,4,3c2.7.3,9.8-4.5,10-13s-1.6-10.9-9-13-13.7,1.5-16,8c-2.6,7.4-.5,9.2,1,11l-1,5s-7.2-2.4-7-10,4.5-19,20-19S975.1,222.69,974,228.09Z"
transform="translate(-127 -118.59)"
fill="url(#b0ec783d-9ec9-45fa-bc88-04f8a3147d7b)"
/>
<path
d="M976,225.09c-1.1,5.3-1.9,12.5-13,15,0,0-6.5,1.7-8.6-3-1.3,5.1-2.6,9.8-3.4,11a62.41,62.41,0,0,1-5,7s.9-9,1-11c.1-3.1,3-17,3-17s-2.7-9.8,4-11c0,0,5.5-1.3,4,6,0,0-1.1,4.8-2.5,10.3l.5.7a5.62,5.62,0,0,0,4,3c2.7.3,9.8-4.5,10-13s-1.6-10.9-9-13-13.7,1.5-16,8c-2.6,7.4-.5,9.2,1,11l-1,5s-7.2-2.4-7-10,4.5-19,20-19S977.1,219.69,976,225.09Z"
transform="translate(-127 -118.59)"
fill="#bd081c"
/>
<path
d="M612.5,144.59H606v6.5a1.54,1.54,0,0,1-1.5,1.5h-1a1.54,1.54,0,0,1-1.5-1.5v-6.5h-6.5a1.54,1.54,0,0,1-1.5-1.5v-1a1.54,1.54,0,0,1,1.5-1.5H602v-6.5a1.54,1.54,0,0,1,1.5-1.5h1a1.54,1.54,0,0,1,1.5,1.5v6.5h6.5a1.54,1.54,0,0,1,1.5,1.5v1A1.54,1.54,0,0,1,612.5,144.59ZM589.9,127a10,10,0,0,1,2.1,6.1,10.57,10.57,0,0,1-6.8,9.6c.3,1,1.3,2.1,3.8,3.9,4.8,3.5,5,10,5,10h0v.5c0,5.2-6.3,9.5-14,9.5s-14-4.3-14-9.5c0-5,5.7-9.1,13-9.5v-4.1c-5.6-.7-10-5.1-10-10.4,0-5.8,5.1-10.5,11.5-10.5h.5s11.5-.9,13-1,1,2,1,2ZM573,156.59c0,3.3,3.4,6,7.5,6s7.5-2.7,7.5-6-3.4-6-7.5-6S573,153.29,573,156.59Zm12.2-24.5c-.8-3.8-3.6-6.5-6.2-6s-4,4.1-3.2,7.9,3.6,6.5,6.2,6S586,136,585.2,132.09Z"
transform="translate(-127 -118.59)"
fill="url(#77144f36-2005-45f3-b937-41812ed6196c)"
/>
<path
d="M614.5,141.59H608v6.5a1.54,1.54,0,0,1-1.5,1.5h-1a1.54,1.54,0,0,1-1.5-1.5v-6.5h-6.5a1.54,1.54,0,0,1-1.5-1.5v-1a1.54,1.54,0,0,1,1.5-1.5H604v-6.5a1.54,1.54,0,0,1,1.5-1.5h1a1.54,1.54,0,0,1,1.5,1.5v6.5h6.5a1.54,1.54,0,0,1,1.5,1.5v1A1.54,1.54,0,0,1,614.5,141.59ZM591.9,124a10,10,0,0,1,2.1,6.1,10.57,10.57,0,0,1-6.8,9.6c.3,1,1.3,2.1,3.8,3.9,4.8,3.5,5,10,5,10h0v.5c0,5.2-6.3,9.5-14,9.5s-14-4.3-14-9.5c0-5,5.7-9.1,13-9.5v-4.1c-5.6-.7-10-5.1-10-10.4,0-5.8,5.1-10.5,11.5-10.5h.5s11.5-.9,13-1,1,2,1,2ZM575,153.59c0,3.3,3.4,6,7.5,6s7.5-2.7,7.5-6-3.4-6-7.5-6S575,150.29,575,153.59Zm12.2-24.5c-.8-3.8-3.6-6.5-6.2-6s-4,4.1-3.2,7.9,3.6,6.5,6.2,6S588,133,587.2,129.09Z"
transform="translate(-127 -118.59)"
fill="#d34836"
/>
<rect
y={623.18}
width={946}
height={39.64}
fill="url(#477b5c35-3b7e-4710-890f-e40b31bf2889)"
/>
<rect x={3.21} y={623.18} width={938.5} height={33.21} fill="#f5f5f5" />
<path
d="M676.74,603.74s13.61,91.83,93.88,122.45H445.45c80.27-30.61,93.88-122.45,93.88-122.45Z"
transform="translate(-127 -118.59)"
fill="#e0e0e0"
/>
<rect
x={316.82}
y={607.6}
width={328.23}
height={19.4}
fill="url(#4c2aa4c9-d632-4e30-84ea-04e589bc704b)"
/>
<rect x={318.45} y={607.6} width={325.16} height={14.97} fill="#f5f5f5" />
<path
d="M872.44,273.59H343.63A10.72,10.72,0,0,0,333,284.42v311.3c0,22.89,18.16,41.44,40.56,41.44H842.48c22.4,0,40.56-18.55,40.56-41.44V284.42A10.72,10.72,0,0,0,872.44,273.59Z"
transform="translate(-127 -118.59)"
fill="url(#934c816f-ebb3-45fb-afb6-385622a7be5e)"
/>
<path
d="M223.43,163.73H738.64a10.75,10.75,0,0,1,10.75,10.75V460.66a0,0,0,0,1,0,0H212.67a0,0,0,0,1,0,0V174.48A10.75,10.75,0,0,1,223.43,163.73Z"
fill="#fff"
/>
<path
d="M835.25,628.23H380.82a41.15,41.15,0,0,1-41.15-41.15v-7.83H876.4v7.83A41.15,41.15,0,0,1,835.25,628.23Z"
transform="translate(-127 -118.59)"
fill="#f5f5f5"
/>
<rect x={239.2} y={187.78} width={485.7} height={239.7} fill={props.primaryColor} />
<path
d="M313.2,743.91H238.63a4.5,4.5,0,0,1-4.5-4.5v-93H317.7v93A4.5,4.5,0,0,1,313.2,743.91Z"
transform="translate(-127 -118.59)"
fill="url(#a38b18cf-ed62-41da-ac6d-7049300a403a)"
/>
<path
d="M235.47,719.27c-13.73,0-24.91-14.18-24.91-31.6s11.17-31.6,24.91-31.6,24.91,14.18,24.91,31.6S249.21,719.27,235.47,719.27Zm0-57.46c-10.68,0-19.37,11.6-19.37,25.86s8.69,25.86,19.37,25.86,19.37-11.6,19.37-25.86S246.16,661.81,235.47,661.81Z"
transform="translate(-127 -118.59)"
fill="url(#6867ecda-da70-4397-b0e4-b6132189e523)"
/>
<path
d="M236.28,716.59c-13.29,0-24.11-13.22-24.11-29.46s10.81-29.46,24.11-29.46,24.11,13.22,24.11,29.46S249.57,716.59,236.28,716.59Zm0-53.57c-10.34,0-18.75,10.81-18.75,24.11s8.41,24.11,18.75,24.11S255,700.42,255,687.13,246.62,663,236.28,663Z"
transform="translate(-127 -118.59)"
fill={props.primaryColor}
/>
<path
d="M109,528.9h79.85a0,0,0,0,1,0,0v88.71a4.5,4.5,0,0,1-4.5,4.5H113.49a4.5,4.5,0,0,1-4.5-4.5V528.9A0,0,0,0,1,109,528.9Z"
fill={props.primaryColor}
/>
</svg>
);
UndrawSocialMedia.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawSocialMedia.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawSocialMedia;