react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
254 lines (249 loc) • 6.53 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawDevices = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="d2ec24bc-8034-4145-bbaa-ac0081ffc938"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 814.27 615.44"
>
<defs>
<linearGradient
id="5868a8ae-9641-4bfb-a3e0-87c9707ff455"
x1={684.96}
y1={708.77}
x2={684.96}
y2={685.5}
gradientTransform="translate(0.36 -0.19)"
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="2dc439d3-206c-40ba-88b3-0b09748d0dcc"
x1={685.09}
y1={578.57}
x2={685.09}
y2={157.81}
gradientTransform="matrix(1, 0, 0, 1.04, -0.63, -19.87)"
xlinkHref="#5868a8ae-9641-4bfb-a3e0-87c9707ff455"
/>
<linearGradient
id="33b509d6-5684-4d10-a2d7-992d23792513"
x1={439.04}
y1={749.29}
x2={439.04}
y2={297.39}
gradientTransform="matrix(1, 0, 0, 1.02, 0.11, -11.28)"
xlinkHref="#5868a8ae-9641-4bfb-a3e0-87c9707ff455"
/>
<linearGradient
id="c7762558-8ab5-4e43-8750-831a04cd0054"
x1={439.56}
y1={710.94}
x2={439.56}
y2={331.91}
gradientTransform="matrix(1, 0, 0, 1.02, 0.11, -11.28)"
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopOpacity={0.09} />
<stop offset={0.55} stopOpacity={0.07} />
<stop offset={1} stopOpacity={0.02} />
</linearGradient>
<linearGradient
id="fd9cbc55-269a-4233-8dd0-3aded2a6d9e7"
x1={290.89}
y1={757.14}
x2={290.89}
y2={406.12}
gradientTransform="matrix(1, 0, 0, 1.02, 0.19, -12.23)"
xlinkHref="#5868a8ae-9641-4bfb-a3e0-87c9707ff455"
/>
</defs>
<title>Devices</title>
<path
d="M765.64,538.41S781.71,648.5,875.73,685.08l-190.34.26-190.34.26c93.92-36.83,109.71-147,109.71-147Z"
transform="translate(-192.86 -142.28)"
fill="#e0e0e0"
/>
<rect
x={493.16}
y={685.34}
width={384.26}
height={23.26}
transform="translate(-193.82 -141.33) rotate(-0.08)"
fill="url(#5868a8ae-9641-4bfb-a3e0-87c9707ff455)"
/>
<rect
x={495.07}
y={685.34}
width={380.67}
height={17.94}
transform="translate(-193.82 -141.33) rotate(-0.08)"
fill="#f5f5f5"
/>
<path
d="M994.22,142.28l-619.08.85c-6.85,0-12.4,5.83-12.39,13l.48,361.19,0,12c0,27.44,21.33,49.66,47.55,49.62l548.93-.76c26.23,0,47.46-22.31,47.42-49.75l0-12-.48-361.19C1006.64,148.07,1001.07,142.27,994.22,142.28Z"
transform="translate(-192.86 -142.28)"
fill="url(#2dc439d3-206c-40ba-88b3-0b09748d0dcc)"
/>
<path
d="M381.51,153.13H988.35a10.75,10.75,0,0,1,10.75,10.75V509.16a0,0,0,0,1,0,0H370.75a0,0,0,0,1,0,0V163.88a10.75,10.75,0,0,1,10.75-10.75Z"
transform="matrix(1, 0, 0, 1, -193.32, -141.33)"
fill="#fff"
/>
<path
d="M958.26,567.51l-546,.75A41.15,41.15,0,0,1,371,527.17l0-17.57,628.35-.87,0,17.58A41.15,41.15,0,0,1,958.26,567.51Z"
transform="translate(-192.86 -142.28)"
fill="#f5f5f5"
/>
<rect
x={401.81}
y={181.96}
width={568.62}
height={287.41}
transform="translate(-193.31 -141.33) rotate(-0.08)"
fill={props.primaryColor}
/>
<rect
x={291.13}
y={290.71}
width={296}
height={458.84}
rx={17.17}
ry={17.17}
transform="translate(-193.58 -141.67) rotate(-0.08)"
fill="url(#33b509d6-5684-4d10-a2d7-992d23792513)"
/>
<rect
x={311.85}
y={325.76}
width={255.62}
height={384.84}
transform="translate(-193.58 -141.67) rotate(-0.08)"
fill="url(#c7762558-8ab5-4e43-8750-831a04cd0054)"
/>
<rect
x={300.13}
y={297.65}
width={277.99}
height={437.71}
rx={17.17}
ry={17.17}
transform="translate(-193.57 -141.67) rotate(-0.08)"
fill="#fff"
/>
<rect
x={319.59}
y={331.09}
width={240.06}
height={367.12}
transform="matrix(1, 0, 0, 1, -193.57, -141.67)"
fill={props.primaryColor}
/>
<ellipse
cx={440.54}
cy={716.44}
rx={9.89}
ry={10.13}
transform="matrix(1, 0, 0, 1, -193.85, -141.67)"
fill="#dbdbdb"
/>
<ellipse
cx={397.81}
cy={315.27}
rx={3.3}
ry={3.38}
transform="translate(-193.3 -141.73) rotate(-0.08)"
fill="#dbdbdb"
/>
<rect
x={414.29}
y={313.19}
width={42.87}
height={3.38}
rx={1.43}
ry={1.43}
transform="translate(-193.3 -141.68) rotate(-0.08)"
fill="#dbdbdb"
/>
<rect
x={193.08}
y={400.71}
width={195.96}
height={356.89}
rx={10}
ry={10}
transform="translate(-193.66 -141.88) rotate(-0.08)"
fill="url(#fd9cbc55-269a-4233-8dd0-3aded2a6d9e7)"
/>
<rect
x={197.6}
y={406.59}
width={186.94}
height={342.74}
rx={10}
ry={10}
transform="translate(-193.66 -141.88) rotate(-0.08)"
fill="#fff"
/>
<rect
x={218.69}
y={430.82}
width={144.73}
height={278.92}
transform="translate(-193.65 -141.88) rotate(-0.08)"
fill={props.primaryColor}
/>
<ellipse
cx={291.26}
cy={729.83}
rx={11.54}
ry={11.82}
transform="matrix(1, 0, 0, 1, -193.87, -141.88)"
fill="#dbdbdb"
/>
<ellipse
cx={268.93}
cy={417.85}
rx={2.31}
ry={2.36}
transform="translate(-193.44 -141.91) rotate(-0.08)"
fill="#dbdbdb"
/>
<rect
x={279.31}
y={416.03}
width={35.77}
height={3.55}
rx={1.5}
ry={1.5}
transform="translate(-193.44 -141.87) rotate(-0.08)"
fill="#dbdbdb"
/>
</svg>
);
UndrawDevices.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawDevices.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawDevices;