react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
592 lines (582 loc) • 21.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var UndrawHouses = function UndrawHouses(props) {
return _react2.default.createElement(
"svg",
{
style: { height: props.height, width: '100%' },
className: props.class,
id: "b54d9f7d-7ab4-45bd-9752-a171600aa4db",
"data-name": "Layer 1",
xmlnsXlink: "http://www.w3.org/1999/xlink",
viewBox: "0 0 868.66 282.45"
},
_react2.default.createElement(
"defs",
null,
_react2.default.createElement(
"linearGradient",
{
id: "3e3b4f84-8398-4e97-bfa9-93b2936006f5",
x1: 369.42,
y1: 281.2,
x2: 369.42,
y2: 129.23,
gradientUnits: "userSpaceOnUse"
},
_react2.default.createElement("stop", { offset: 0, stopColor: "gray", stopOpacity: 0.25 }),
_react2.default.createElement("stop", { offset: 0.54, stopColor: "gray", stopOpacity: 0.12 }),
_react2.default.createElement("stop", { offset: 1, stopColor: "gray", stopOpacity: 0.1 })
),
_react2.default.createElement("linearGradient", {
id: "eba4e103-e776-48b6-9f55-897b2c643a10",
x1: 325.25,
y1: 122.25,
x2: 325.25,
y2: 79.83,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "73968a21-755d-4562-8ffb-fae58a7b600b",
x1: 260.16,
y1: 180.95,
x2: 260.16,
y2: 130.39,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "14122a6c-7f6c-4dde-aa69-0bfcca24829a",
x1: 476.5,
y1: 180.95,
x2: 476.5,
y2: 129.81,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "8f9daf16-6dc3-4ab7-ad04-022195c1fcf8",
x1: 369.54,
y1: 133.69,
x2: 369.54,
y2: 67.17,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "43b0b26d-914f-491d-a041-92999dbbe527",
x1: 367.97,
y1: 279.46,
x2: 367.97,
y2: 118.77,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "ca618a97-ecd5-4224-86a7-e65b179fc7aa",
x1: 65.41,
y1: 282.45,
x2: 65.41,
y2: 168.46,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "d4a136ba-2c16-48ed-b5ab-c1493b7a7acb",
x1: 34.3,
y1: 165.9,
x2: 34.3,
y2: 134.79,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "ef61be1e-18fe-4bcb-9275-2f988f2bf512",
x1: 65.62,
y1: 281.17,
x2: 65.62,
y2: 163.34,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "1512db09-687e-46a3-b6f1-2462e94a71e8",
x1: 66.78,
y1: 174.29,
x2: 66.78,
y2: 125.51,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "6e74d349-ece4-41ce-9852-57f84313790d",
x1: 735.26,
y1: 281.53,
x2: 735.26,
y2: 82.38,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "7cd06b92-268d-499d-ae65-d452a7b79361",
x1: 698.92,
y1: 39.35,
x2: 698.92,
y2: 4.44,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "77f52eac-aca1-4508-ae87-71aaae06d074",
x1: 645.37,
y1: 115.85,
x2: 645.37,
y2: 74.25,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "9b105c8a-2fbe-4f76-8808-d06d81c11f8b",
x1: 823.36,
y1: 116.81,
x2: 823.36,
y2: 74.73,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "fcf7c80f-694e-4f22-8819-23d4fd4e8e1d",
x1: 735.36,
y1: 54.73,
x2: 735.36,
y2: 0,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
}),
_react2.default.createElement("linearGradient", {
id: "2b4a4a05-21c6-45b7-b09c-f2c76655e0f6",
x1: 734.3,
y1: 280.1,
x2: 734.3,
y2: 46.52,
xlinkHref: "#3e3b4f84-8398-4e97-bfa9-93b2936006f5"
})
),
_react2.default.createElement(
"title",
null,
"houses3"
),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("polygon", {
points: "516.75 281.2 222.09 281.2 224.13 143.18 308.4 129.23 427.54 129.23 514.71 139.11 516.75 281.2",
fill: "url(#3e3b4f84-8398-4e97-bfa9-93b2936006f5)"
})
),
_react2.default.createElement("polygon", {
points: "512.67 279.46 226.17 279.46 228.21 144.92 308.67 130.97 428.99 130.97 510.63 140.85 512.67 279.46",
fill: "#eee"
}),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("rect", {
x: 314.5,
y: 79.83,
width: 21.5,
height: 42.43,
fill: "url(#eba4e103-e776-48b6-9f55-897b2c643a10)"
})
),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("polygon", {
points: "314.49 176.25 314.49 130.39 221.1 130.39 205.24 176.25 205.24 180.95 315.08 180.95 315.08 176.25 314.49 176.25",
fill: "url(#73968a21-755d-4562-8ffb-fae58a7b600b)"
})
),
_react2.default.createElement("polygon", {
points: "314.5 176.3 206.4 176.3 222.09 130.97 314.5 130.97 314.5 176.3",
fill: props.primaryColor
}),
_react2.default.createElement("polygon", {
points: "314.5 176.3 206.4 176.3 222.09 130.97 314.5 130.97 314.5 176.3",
opacity: 0.1
}),
_react2.default.createElement("rect", { x: 206.4, y: 176.3, width: 108.68, height: 4.65, fill: props.primaryColor }),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("polygon", {
points: "515.66 129.81 422.02 129.81 422.02 176.19 421.43 176.19 421.43 180.95 531.57 180.95 531.57 176.19 515.66 129.81",
fill: "url(#14122a6c-7f6c-4dde-aa69-0bfcca24829a)"
})
),
_react2.default.createElement("polygon", {
points: "422.01 176.3 530.11 176.3 514.42 130.97 422.01 130.97 422.01 176.3",
fill: props.primaryColor
}),
_react2.default.createElement("polygon", {
points: "422.01 176.3 530.11 176.3 514.42 130.97 422.01 130.97 422.01 176.3",
opacity: 0.1
}),
_react2.default.createElement("rect", {
x: 587.1,
y: 485.08,
width: 108.68,
height: 4.65,
transform: "translate(1117.21 666.03) rotate(-180)",
fill: props.primaryColor
}),
_react2.default.createElement("rect", {
x: 235.46,
y: 199.26,
width: 58.7,
height: 36.61,
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", { x: 231.97, y: 233.26, width: 65.67, height: 6.39, opacity: 0.1 }),
_react2.default.createElement("rect", { x: 231.97, y: 232.68, width: 65.67, height: 6.39, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.1 },
_react2.default.createElement("rect", { x: 235.46, y: 199.26, width: 58.7, height: 14.53 })
),
_react2.default.createElement("rect", {
x: 442.94,
y: 199.26,
width: 58.7,
height: 36.61,
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", { x: 439.45, y: 233.26, width: 65.67, height: 6.39, opacity: 0.1 }),
_react2.default.createElement("rect", { x: 439.45, y: 232.68, width: 65.67, height: 6.39, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.1 },
_react2.default.createElement("rect", { x: 442.94, y: 199.26, width: 58.7, height: 14.53 })
),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("polygon", {
points: "440.13 133.69 368.44 78.25 299.06 133.65 293.62 126.84 368.36 67.17 445.46 126.8 440.13 133.69",
fill: "url(#8f9daf16-6dc3-4ab7-ad04-022195c1fcf8)"
})
),
_react2.default.createElement("rect", { x: 227.61, y: 180.95, width: 77.3, height: 0.87, opacity: 0.1 }),
_react2.default.createElement("rect", { x: 433.06, y: 180.95, width: 78.17, height: 0.87, opacity: 0.1 }),
_react2.default.createElement("rect", { x: 315.08, y: 80.41, width: 20.34, height: 41.84, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("polygon", {
points: "433.06 279.46 302.88 279.46 302.88 120.22 368.53 118.77 433.06 120.22 433.06 279.46",
fill: "url(#43b0b26d-914f-491d-a041-92999dbbe527)"
})
),
_react2.default.createElement("polygon", {
points: "431.6 279.46 304.91 279.46 304.91 120.22 368.26 75.18 431.6 120.22 431.6 279.46",
fill: "#fff"
}),
_react2.default.createElement("rect", { x: 352.27, y: 225.99, width: 31.96, height: 53.47, fill: "#535461" }),
_react2.default.createElement("rect", { x: 335.42, y: 178.05, width: 65.67, height: 6.39, opacity: 0.1 }),
_react2.default.createElement("rect", {
x: 338.91,
y: 144.05,
width: 58.7,
height: 36.61,
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", { x: 335.42, y: 177.47, width: 65.67, height: 6.39, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.1 },
_react2.default.createElement("rect", { x: 338.91, y: 144.05, width: 58.7, height: 14.53 })
),
_react2.default.createElement("polygon", {
points: "440.13 134.27 368.44 78.83 299.06 134.23 293.62 127.42 368.36 67.75 445.46 127.38 440.13 134.27",
fill: props.primaryColor
}),
_react2.default.createElement("circle", { cx: 379.59, cy: 252.73, r: 2.32, fill: "#e0e0e0" }),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("rect", {
y: 168.46,
width: 130.82,
height: 113.99,
fill: "url(#ca618a97-ecd5-4224-86a7-e65b179fc7aa)"
})
),
_react2.default.createElement("rect", { x: 2.24, y: 169.73, width: 127.2, height: 111.43, fill: "#eee" }),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("rect", {
x: 26.42,
y: 134.79,
width: 15.77,
height: 31.11,
fill: "url(#d4a136ba-2c16-48ed-b5ab-c1493b7a7acb)"
})
),
_react2.default.createElement("rect", { x: 26.85, y: 135.22, width: 14.91, height: 30.68, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("polygon", {
points: "113.35 281.17 17.9 281.17 17.9 164.41 66.04 163.34 113.35 164.41 113.35 281.17",
fill: "url(#ef61be1e-18fe-4bcb-9275-2f988f2bf512)"
})
),
_react2.default.createElement("polygon", {
points: "112.29 281.17 19.39 281.17 19.39 164.41 65.84 131.38 112.29 164.41 112.29 281.17",
fill: "#fff"
}),
_react2.default.createElement("rect", { x: 54.12, y: 241.96, width: 23.44, height: 39.2, fill: "#535461" }),
_react2.default.createElement("rect", {
x: 44.32,
y: 181.88,
width: 43.04,
height: 26.85,
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", { x: 41.76, y: 206.38, width: 48.15, height: 4.69, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.1 },
_react2.default.createElement("rect", { x: 44.32, y: 181.88, width: 43.04, height: 10.65 })
),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("polygon", {
points: "118.53 174.29 65.97 133.64 15.1 174.26 11.11 169.26 65.91 125.51 122.44 169.23 118.53 174.29",
fill: "url(#1512db09-687e-46a3-b6f1-2462e94a71e8)"
})
),
_react2.default.createElement("polygon", {
points: "118.53 174.71 65.97 134.06 15.1 174.68 11.11 169.69 65.91 125.93 122.44 169.66 118.53 174.71",
fill: props.primaryColor
}),
_react2.default.createElement("circle", { cx: 74.15, cy: 261.57, r: 1.7, fill: "#e0e0e0" }),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("polygon", {
points: "856.47 281.53 614.05 281.53 615.72 100.66 685.05 82.38 783.08 82.38 854.8 95.33 856.47 281.53",
fill: "url(#6e74d349-ece4-41ce-9852-57f84313790d)"
})
),
_react2.default.createElement("polygon", {
points: "853.12 279.25 617.4 279.25 619.08 102.94 685.28 84.67 784.27 84.67 851.44 97.61 853.12 279.25",
fill: "#eee"
}),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("rect", {
x: 690.07,
y: 4.44,
width: 17.69,
height: 34.91,
fill: "url(#7cd06b92-268d-499d-ae65-d452a7b79361)"
})
),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("polygon", {
points: "690.07 111.98 690.07 74.25 613.23 74.25 600.18 111.98 600.18 115.85 690.55 115.85 690.55 111.98 690.07 111.98",
fill: "url(#77f52eac-aca1-4508-ae87-71aaae06d074)"
})
),
_react2.default.createElement("polygon", {
points: "690.07 112.03 601.14 112.03 614.05 74.73 690.07 74.73 690.07 112.03",
fill: props.primaryColor
}),
_react2.default.createElement("polygon", {
points: "690.07 112.03 601.14 112.03 614.05 74.73 690.07 74.73 690.07 112.03",
opacity: 0.1
}),
_react2.default.createElement("rect", { x: 601.14, y: 112.03, width: 89.42, height: 3.83, fill: props.primaryColor }),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("polygon", {
points: "855.58 74.73 778.54 74.73 778.54 112.89 778.05 112.89 778.05 116.81 868.66 116.81 868.66 112.89 855.58 74.73",
fill: "url(#9b105c8a-2fbe-4f76-8808-d06d81c11f8b)"
})
),
_react2.default.createElement("polygon", {
points: "778.53 112.98 867.47 112.98 854.56 75.69 778.53 75.69 778.53 112.98",
fill: props.primaryColor
}),
_react2.default.createElement("polygon", {
points: "778.53 112.98 867.47 112.98 854.56 75.69 778.53 75.69 778.53 112.98",
opacity: 0.1
}),
_react2.default.createElement("rect", {
x: 943.72,
y: 421.76,
width: 89.42,
height: 3.83,
transform: "translate(1811.19 538.57) rotate(-180)",
fill: props.primaryColor
}),
_react2.default.createElement("rect", {
x: 625.04,
y: 214.11,
width: 48.29,
height: 30.12,
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", { x: 622.18, y: 242.08, width: 54.03, height: 5.26, opacity: 0.1 }),
_react2.default.createElement("rect", { x: 622.18, y: 241.61, width: 54.03, height: 5.26, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.1 },
_react2.default.createElement("rect", { x: 625.04, y: 214.11, width: 48.29, height: 11.95 })
),
_react2.default.createElement("rect", {
x: 795.75,
y: 214.11,
width: 48.29,
height: 30.12,
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", { x: 792.88, y: 242.08, width: 54.03, height: 5.26, opacity: 0.1 }),
_react2.default.createElement("rect", { x: 792.88, y: 241.61, width: 54.03, height: 5.26, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.1 },
_react2.default.createElement("rect", { x: 795.75, y: 214.11, width: 48.29, height: 11.95 })
),
_react2.default.createElement("rect", {
x: 795.75,
y: 143.82,
width: 48.29,
height: 30.12,
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", { x: 792.88, y: 171.8, width: 54.03, height: 5.26, opacity: 0.1 }),
_react2.default.createElement("rect", { x: 792.88, y: 171.32, width: 54.03, height: 5.26, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.1 },
_react2.default.createElement("rect", { x: 795.75, y: 143.82, width: 48.29, height: 11.95 })
),
_react2.default.createElement("rect", {
x: 626.48,
y: 143.82,
width: 48.29,
height: 30.12,
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", { x: 623.61, y: 171.8, width: 54.03, height: 5.26, opacity: 0.1 }),
_react2.default.createElement("rect", { x: 623.61, y: 171.32, width: 54.03, height: 5.26, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.1 },
_react2.default.createElement("rect", { x: 626.48, y: 143.82, width: 48.29, height: 11.95 })
),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("polygon", {
points: "793.43 54.73 734.46 9.12 677.37 54.7 672.89 49.1 734.39 0 797.82 49.06 793.43 54.73",
fill: "url(#fcf7c80f-694e-4f22-8819-23d4fd4e8e1d)"
})
),
_react2.default.createElement("rect", { x: 618.59, y: 115.85, width: 63.59, height: 0.72, opacity: 0.1 }),
_react2.default.createElement("rect", { x: 787.62, y: 116.81, width: 64.31, height: 0.72, opacity: 0.1 }),
_react2.default.createElement("rect", { x: 690.55, y: 4.92, width: 16.74, height: 34.43, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.7 },
_react2.default.createElement("polygon", {
points: "787.86 280.1 680.75 280.1 680.75 48.63 734.77 46.52 787.86 48.63 787.86 280.1",
fill: "url(#2b4a4a05-21c6-45b7-b09c-f2c76655e0f6)"
})
),
_react2.default.createElement("polygon", {
points: "786.42 280.1 682.18 280.1 682.18 47.71 734.3 8.51 787.38 49.15 786.42 280.1",
fill: "#fff"
}),
_react2.default.createElement("rect", { x: 721.15, y: 236.11, width: 26.3, height: 43.99, fill: "#535461" }),
_react2.default.createElement("rect", { x: 707.29, y: 196.66, width: 54.03, height: 5.26, opacity: 0.1 }),
_react2.default.createElement("rect", {
x: 710.16,
y: 168.69,
width: 48.29,
height: 30.12,
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", { x: 707.29, y: 196.18, width: 54.03, height: 5.26, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.1 },
_react2.default.createElement("rect", { x: 710.16, y: 168.69, width: 48.29, height: 11.95 })
),
_react2.default.createElement("rect", {
x: 710.16,
y: 109.64,
width: 48.29,
height: 30.12,
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", { x: 707.29, y: 137.13, width: 54.03, height: 5.26, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.1 },
_react2.default.createElement("rect", { x: 710.16, y: 109.64, width: 48.29, height: 11.95 })
),
_react2.default.createElement("rect", {
x: 710.16,
y: 50.58,
width: 48.29,
height: 30.12,
fill: props.primaryColor,
opacity: 0.5
}),
_react2.default.createElement("rect", { x: 707.29, y: 78.08, width: 54.03, height: 5.26, fill: "#535461" }),
_react2.default.createElement(
"g",
{ opacity: 0.1 },
_react2.default.createElement("rect", { x: 710.16, y: 50.58, width: 48.29, height: 11.95 })
),
_react2.default.createElement("polygon", {
points: "793.43 56.41 734.46 10.79 677.37 56.37 672.89 50.77 734.39 1.67 797.82 50.73 793.43 56.41",
fill: props.primaryColor
}),
_react2.default.createElement("circle", { cx: 743.63, cy: 258.1, r: 1.91, fill: "#e0e0e0" })
);
};
UndrawHouses.propTypes = {
/**
* Hex color
*/
primaryColor: _propTypes2.default.string,
/**
* percentage
*/
height: _propTypes2.default.string,
/**
* custom class for svg
*/
class: _propTypes2.default.string
};
UndrawHouses.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
exports.default = UndrawHouses;