react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
309 lines (304 loc) • 7.69 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawBuilding = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="68fdd05a-d782-4105-aca1-bda402beaabb"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 870 724.95"
>
<defs>
<linearGradient
id="56cbcb84-3bc0-4914-a95b-774d22831666"
x1={251}
y1={204.95}
x2={251}
y2={101.95}
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="e379aacb-d978-4b26-b6a3-50696be8e652"
x1={402}
y1={292.48}
x2={402}
y2={189.48}
gradientTransform="matrix(-1, 0, 0, 1, 1020, -87.52)"
xlinkHref="#56cbcb84-3bc0-4914-a95b-774d22831666"
/>
<linearGradient
id="f15650fa-0d49-4c1b-b489-142025d26956"
x1={798}
y1={709.95}
x2={798}
y2={262.95}
xlinkHref="#56cbcb84-3bc0-4914-a95b-774d22831666"
/>
<linearGradient
id="84352290-18fb-412c-994b-f360002bca3b"
x1={70}
y1={709.95}
x2={70}
y2={326.95}
xlinkHref="#56cbcb84-3bc0-4914-a95b-774d22831666"
/>
<linearGradient
id="8d0d6924-da2f-4d5c-b20d-8b78d173dd10"
x1={213}
y1={709.95}
x2={213}
y2={185.95}
xlinkHref="#56cbcb84-3bc0-4914-a95b-774d22831666"
/>
<linearGradient
id="5c646475-b98d-4809-afbb-cfdad2f2d853"
x1={364.5}
y1={797.48}
x2={364.5}
y2={273.48}
gradientTransform="matrix(-1, 0, 0, 1, 1020, -87.52)"
xlinkHref="#56cbcb84-3bc0-4914-a95b-774d22831666"
/>
<linearGradient
id="df1b48e6-fc4c-4eb9-a636-7647bc3b1c14"
x1={435}
y1={724.95}
x2={435}
y2={58.95}
xlinkHref="#56cbcb84-3bc0-4914-a95b-774d22831666"
/>
</defs>
<title>Building</title>
<circle cx={605.89} cy={78.11} r={78.11} fill="#ff5252" />
<rect
x={210}
y={101.95}
width={82}
height={103}
fill="url(#56cbcb84-3bc0-4914-a95b-774d22831666)"
/>
<rect
x={577}
y={101.95}
width={82}
height={103}
fill="url(#e379aacb-d978-4b26-b6a3-50696be8e652)"
/>
<rect x={216} y={106.95} width={76} height={98} fill={props.primaryColor} />
<rect x={578} y={106.95} width={76} height={98} fill={props.primaryColor} />
<rect
x={726}
y={262.95}
width={144}
height={447}
fill="url(#f15650fa-0d49-4c1b-b489-142025d26956)"
/>
<rect x={720} y={265.95} width={145} height={432} fill="#fff" />
<rect
y={326.95}
width={140}
height={383}
fill="url(#84352290-18fb-412c-994b-f360002bca3b)"
/>
<rect x={6} y={331.95} width={140} height={366} fill="#fff" />
<rect
x={140}
y={185.95}
width={146}
height={524}
fill="url(#8d0d6924-da2f-4d5c-b20d-8b78d173dd10)"
/>
<rect
x={585}
y={185.95}
width={141}
height={524}
fill="url(#5c646475-b98d-4809-afbb-cfdad2f2d853)"
/>
<rect x={146} y={189.95} width={146} height={508} fill="#fff" />
<rect x={578} y={189.95} width={142} height={508} fill="#fff" />
<g opacity={0.2}>
<rect x={624} y={223.95} width={50} height={142} fill={props.primaryColor} />
<rect x={624} y={445.95} width={50} height={142} fill={props.primaryColor} />
</g>
<g opacity={0.2}>
<rect x={624} y={447.95} width={50} height={108} fill="#64ffda" />
</g>
<g opacity={0.2}>
<rect x={624} y={223.95} width={50} height={108} fill="#64ffda" />
</g>
<rect x={39} y={368.95} width={90} height={64} fill="#e0e0e0" />
<rect x={748} y={299.95} width={90} height={64} fill="#e0e0e0" />
<rect x={748} y={400.95} width={90} height={64} fill="#e0e0e0" />
<rect x={292} y={67.95} width={286} height={648} fill={props.primaryColor} />
<rect x={748} y={501.95} width={90} height={64} fill="#e0e0e0" />
<rect x={39} y={469.95} width={90} height={64} fill="#e0e0e0" />
<rect x={39} y={570.95} width={90} height={64} fill="#e0e0e0" />
<rect
x={39}
y={368.95}
width={90}
height={46}
fill={props.primaryColor}
opacity={0.5}
/>
<rect
x={39}
y={469.95}
width={90}
height={46}
fill={props.primaryColor}
opacity={0.5}
/>
<rect
x={39}
y={570.95}
width={90}
height={46}
fill={props.primaryColor}
opacity={0.5}
/>
<rect
x={748}
y={299.95}
width={90}
height={39}
fill={props.primaryColor}
opacity={0.5}
/>
<rect
x={748}
y={400.95}
width={90}
height={39}
fill={props.primaryColor}
opacity={0.5}
/>
<rect
x={748}
y={501.95}
width={90}
height={39}
fill={props.primaryColor}
opacity={0.5}
/>
<rect
x={285}
y={58.95}
width={300}
height={666}
fill="url(#df1b48e6-fc4c-4eb9-a636-7647bc3b1c14)"
/>
<rect x={325} y={92.95} width={78} height={138} fill="#fff" />
<rect x={325} y={277.95} width={78} height={138} fill="#fff" />
<rect x={325} y={462.95} width={78} height={138} fill="#fff" />
<rect
x={632}
y={180.48}
width={78}
height={138}
transform="translate(1177 411.43) rotate(-180)"
fill="#fff"
/>
<rect
x={632}
y={365.48}
width={78}
height={138}
transform="translate(1177 781.43) rotate(-180)"
fill="#fff"
/>
<rect
x={632}
y={550.48}
width={78}
height={138}
transform="translate(1177 1151.43) rotate(-180)"
fill="#fff"
/>
<rect
x={325}
y={92.95}
width={78}
height={108}
fill={props.primaryColor}
opacity={0.2}
/>
<rect
x={467}
y={92.95}
width={78}
height={108}
fill={props.primaryColor}
opacity={0.2}
/>
<rect
x={325}
y={277.95}
width={78}
height={108}
fill={props.primaryColor}
opacity={0.2}
/>
<rect
x={467}
y={277.95}
width={78}
height={108}
fill={props.primaryColor}
opacity={0.2}
/>
<rect
x={325}
y={462.95}
width={78}
height={108}
fill={props.primaryColor}
opacity={0.2}
/>
<rect
x={467}
y={462.95}
width={78}
height={108}
fill={props.primaryColor}
opacity={0.2}
/>
<g opacity={0.2}>
<rect x={202} y={223.95} width={50} height={142} fill={props.primaryColor} />
<rect x={202} y={445.95} width={50} height={142} fill={props.primaryColor} />
</g>
<g opacity={0.2}>
<rect x={202} y={223.95} width={50} height={108} fill="#64ffda" />
</g>
<g opacity={0.2}>
<rect x={202} y={447.95} width={50} height={108} fill="#64ffda" />
</g>
<rect x={403} y={617.95} width={64} height={98} fill="#fff" />
</svg>
);
UndrawBuilding.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawBuilding.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawBuilding;