react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
211 lines (206 loc) • 6.4 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawSpreadsheets = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="efc17a0a-3253-4ddc-ab04-f1266939853b"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 908.72 593.16"
>
<defs>
<linearGradient
id="9524657f-a5be-401f-9afa-21595579ad39"
x1={623.41}
y1={835.81}
x2={623.41}
y2={62.24}
gradientTransform="translate(1039.26 -172.82) rotate(90)"
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopOpacity={0.12} />
<stop offset={0.55} stopOpacity={0.09} />
<stop offset={1} stopOpacity={0.02} />
</linearGradient>
<linearGradient
id="48b6f8c1-7ad6-4b23-961c-36b9d10d8c20"
x1={600}
y1={746.58}
x2={600}
y2={153.42}
gradientTransform="translate(0.61 -0.81) rotate(0.08)"
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>
</defs>
<title>spreadsheets</title>
<rect
x={203.45}
y={183.42}
width={773.57}
height={534.35}
transform="translate(-146.25 -152.63) rotate(-0.08)"
fill="url(#9524657f-a5be-401f-9afa-21595579ad39)"
/>
<g opacity={0.7}>
<rect
x={146}
y={153.99}
width={908}
height={592.01}
rx={28.33}
ry={28.33}
transform="translate(-146.25 -152.61) rotate(-0.08)"
fill="url(#48b6f8c1-7ad6-4b23-961c-36b9d10d8c20)"
/>
</g>
<rect
x={154.11}
y={158.92}
width={893.37}
height={581.1}
rx={28.33}
ry={28.33}
transform="translate(-146.24 -152.61) rotate(-0.08)"
fill="#535461"
/>
<circle
cx={192.71}
cy={452.44}
r={20.68}
transform="translate(-146.25 -153.16) rotate(-0.08)"
fill="#535461"
/>
<g opacity={0.1}>
<circle
cx={192.71}
cy={452.44}
r={20.68}
transform="translate(-146.25 -153.16) rotate(-0.08)"
/>
</g>
<circle
cx={1011.51}
cy={363.1}
r={6.89}
transform="translate(-146.13 -152.06) rotate(-0.08)"
fill="#535461"
/>
<rect
x={1008.86}
y={397.57}
width={6.89}
height={89.61}
rx={1.43}
ry={1.43}
transform="translate(-146.24 -152.06) rotate(-0.08)"
fill="#535461"
/>
<g opacity={0.1}>
<rect
x={1008.86}
y={397.57}
width={6.89}
height={89.61}
rx={1.43}
ry={1.43}
transform="translate(-146.24 -152.06) rotate(-0.08)"
/>
</g>
<g opacity={0.1}>
<circle
cx={1011.51}
cy={363.1}
r={6.89}
transform="translate(-146.13 -152.06) rotate(-0.08)"
/>
</g>
<polygon
points="725 547.58 84.37 547.58 84.37 49.58 832.06 49.58 832.06 479.74 831.63 546.86 725 547.58"
fill="#fff"
/>
<g opacity={0.7}>
<rect x={84.37} y={221.97} width={747.69} height={6.86} fill="#e0e0e0" />
</g>
<g opacity={0.7}>
<rect x={84.37} y={184.97} width={747.69} height={6.86} fill="#e0e0e0" />
</g>
<g opacity={0.7}>
<rect x={84.37} y={147.97} width={747.69} height={6.86} fill="#e0e0e0" />
</g>
<g opacity={0.7}>
<rect x={84.37} y={110.97} width={747.69} height={6.86} fill="#e0e0e0" />
</g>
<g opacity={0.7}>
<rect x={84.37} y={73.97} width={747.69} height={6.86} fill="#e0e0e0" />
</g>
<g opacity={0.7}>
<rect x={84.37} y={258.98} width={747.69} height={6.86} fill="#e0e0e0" />
</g>
<g opacity={0.7}>
<rect x={84.37} y={296} width={747.69} height={6.86} fill="#e0e0e0" />
</g>
<g opacity={0.7}>
<rect x={84.37} y={333.02} width={747.69} height={6.86} fill="#e0e0e0" />
</g>
<g opacity={0.7}>
<rect x={84.37} y={370.04} width={747.69} height={6.86} fill="#e0e0e0" />
</g>
<g opacity={0.7}>
<rect x={84.37} y={407.05} width={747.69} height={6.86} fill="#e0e0e0" />
</g>
<g opacity={0.7}>
<rect x={84.37} y={444.07} width={747.69} height={6.86} fill="#e0e0e0" />
</g>
<g opacity={0.7}>
<rect x={84.36} y={481.09} width={747.57} height={6.86} fill="#e0e0e0" />
</g>
<g opacity={0.7}>
<rect x={84.37} y={518.11} width={746.99} height={6.86} fill="#e0e0e0" />
</g>
<rect x={174.16} y={80.8} width={5.18} height={466.78} fill="#e0e0e0" />
<rect x={288.56} y={80.8} width={5.18} height={466.78} fill="#e0e0e0" />
<rect x={402.96} y={80.8} width={5.18} height={466.78} fill="#e0e0e0" />
<rect x={517.36} y={80.8} width={5.18} height={466.78} fill="#e0e0e0" />
<rect x={631.76} y={80.8} width={5.18} height={466.78} fill="#e0e0e0" />
<polygon
points="751.34 547.58 746.16 547.58 746.16 80.8 751.34 80.58 751.34 547.58"
fill="#e0e0e0"
/>
<circle cx={101.09} cy={61.08} r={6.73} fill="#ff5252" />
<circle cx={120.36} cy={61.08} r={6.73} fill="#ff0" />
<circle cx={139.63} cy={61.08} r={6.73} fill="#69f0ae" />
<rect x={293.36} y={339.58} width={110} height={30} fill={props.primaryColor} />
<rect x={408.36} y={487.58} width={110} height={30} fill={props.primaryColor} />
<rect x={522.36} y={447.58} width={110} height={30} fill={props.primaryColor} />
<rect x={522.36} y={228.58} width={110} height={30} fill={props.primaryColor} />
<rect x={637.36} y={376.58} width={110} height={30} fill={props.primaryColor} />
<rect x={178.36} y={117.58} width={110} height={30} fill={props.primaryColor} />
<rect x={408.36} y={192.58} width={110} height={30} fill={props.primaryColor} />
<rect x={178.36} y={265.58} width={110} height={30} fill={props.primaryColor} />
</svg>
);
UndrawSpreadsheets.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawSpreadsheets.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawSpreadsheets;