react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
187 lines (182 loc) • 5.41 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawAddress = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="2490755a-457e-4afb-a65a-0ea5e4d54fde"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 945.48 723.06"
>
<defs>
<linearGradient
id="8cd9664d-1da2-4d12-b141-6acf96f68a9c"
x1={740.07}
y1={472.54}
x2={740.07}
y2={118.79}
gradientTransform="matrix(0, 1.01, -1, 0, 1038.56, -429.84)"
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>
<clipPath
id="cdabdff6-c4be-4715-8138-a67c0a106d83"
transform="translate(-130 -89.47)"
>
<rect
id="7312e2fe-1465-434b-8399-0e3c35e3f2aa"
data-name="<Rectangle>"
x={448.64}
y={159.18}
width={586.78}
height={313.91}
transform="translate(50.43 -98.88) rotate(7.89)"
fill={props.primaryColor}
/>
</clipPath>
<linearGradient
id="2e0ace27-f24d-4475-8753-15718c01a844"
x1={627.79}
y1={238.31}
x2={627.79}
y2={82.56}
gradientTransform="translate(47.68 -77.98) rotate(7.89)"
xlinkHref="#8cd9664d-1da2-4d12-b141-6acf96f68a9c"
/>
<linearGradient
id="4557fcba-ba8e-4ca6-a47b-16bad646016f"
x1={367.4}
y1={723.06}
x2={367.4}
y2={213.51}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#8cd9664d-1da2-4d12-b141-6acf96f68a9c"
/>
<linearGradient
id="4f826130-72fb-45c0-ad33-c53e19fef0b1"
x1={367.14}
y1={582.74}
x2={367.14}
y2={556.61}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#8cd9664d-1da2-4d12-b141-6acf96f68a9c"
/>
</defs>
<title>address</title>
<rect
x={566.02}
y={5.62}
width={353.76}
height={622.49}
transform="translate(197.04 919.76) rotate(-82.11)"
fill="url(#8cd9664d-1da2-4d12-b141-6acf96f68a9c)"
/>
<rect
x={435.28}
y={144.67}
width={613.09}
height={344.1}
transform="translate(-79.49 -188.31) rotate(7.89)"
fill="#fff"
/>
<g opacity={0.3}>
<rect
id="f33a93cd-dff1-45ca-976d-3ca4de540e86"
data-name="<Rectangle>"
x={448.64}
y={159.18}
width={586.78}
height={313.91}
transform="translate(-79.57 -188.35) rotate(7.89)"
fill={props.primaryColor}
/>
<g clipPath="url(#cdabdff6-c4be-4715-8138-a67c0a106d83)">
<polyline
points="305.89 25.78 541.8 416.84 685.31 436.73 935.87 291.06 738.08 29.61 387.52 395.45 187.09 320.14 545.2 5.32 837.19 457.78"
fill={props.primaryColor}
stroke="#fff"
strokeMiterlimit={10}
strokeWidth={5}
/>
</g>
</g>
<path
d="M704.85,151.82c-4.16,30-65.87,92.74-65.87,92.74s-46.66-77.76-42.5-107.76a54.71,54.71,0,1,1,108.38,15Z"
transform="translate(-130 -89.47)"
fill="url(#2e0ace27-f24d-4475-8753-15718c01a844)"
/>
<path
d="M701.29,152.77c-3.9,28.14-61.79,87-61.79,87s-43.77-72.94-39.87-101.08a51.31,51.31,0,1,1,101.65,14.09Z"
transform="translate(-130 -89.47)"
fill={props.primaryColor}
/>
<ellipse
cx={651.03}
cy={141.65}
rx={25.72}
ry={25.66}
transform="translate(291.34 677.6) rotate(-82.11)"
fill="#fff"
/>
<polygon
points="0 213.51 0 239.22 0 723.06 734.81 723.06 734.81 239.22 734.81 213.51 0 213.51"
fill="url(#4557fcba-ba8e-4ca6-a47b-16bad646016f)"
/>
<rect x={10.9} y={245.21} width={716.12} height={468.79} fill="#fff" />
<rect x={10.9} y={222.91} width={716.12} height={34.49} fill="#f5f5f5" />
<circle cx={38.15} cy={239.64} r={8.36} fill="#ff5252" />
<circle cx={61.15} cy={239.64} r={8.36} fill="#ff0" />
<circle cx={84.14} cy={239.64} r={8.36} fill="#69f0ae" />
<rect
x={301.81}
y={370.55}
width={131.7}
height={14.11}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={206.7} y={431.18} width={144.24} height={14.11} fill="#e0e0e0" />
<rect
x={514.39}
y={520.65}
width={144.24}
height={14.11}
transform="translate(1043.02 965.94) rotate(-180)"
fill="#e0e0e0"
/>
<rect x={206.17} y={461.49} width={321.93} height={14.11} fill="#e0e0e0" />
<rect x={206.17} y={491.8} width={321.93} height={14.11} fill="#e0e0e0" />
<rect
x={300.25}
y={556.61}
width={133.79}
height={26.13}
fill="url(#4f826130-72fb-45c0-ad33-c53e19fef0b1)"
/>
<rect x={301.29} y={558.98} width={131.7} height={21.38} fill={props.primaryColor} />
</svg>
);
UndrawAddress.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawAddress.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawAddress;