react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
259 lines (254 loc) • 7.32 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawLighthouse = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="7ebc0697-1fab-4a5d-915f-811f2d1e4cf8"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 936.51 707.22"
>
<defs>
<linearGradient
id="c3b6ae59-f5c8-462f-a7a0-99e79fdd0e5d"
x1={326.5}
y1={672.4}
x2={326.5}
y2={143.43}
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>Lighthouse</title>
<polygon
points="570.22 408.02 580.26 442.79 590.3 477.56 570.22 477.56 550.14 477.56 560.18 442.79 570.22 408.02"
fill="#3ad29f"
/>
<polygon
points="589.99 403.31 600.02 438.08 610.06 472.86 589.99 472.86 569.91 472.86 579.95 438.08 589.99 403.31"
fill="#3ad29f"
/>
<polygon
points="609.75 403.31 619.79 438.08 629.83 472.86 609.75 472.86 589.67 472.86 599.71 438.08 609.75 403.31"
fill="#3ad29f"
/>
<polygon
points="762.4 424.54 772.44 459.31 782.48 494.09 762.4 494.09 742.32 494.09 752.36 459.31 762.4 424.54"
fill="#3ad29f"
/>
<polygon
points="120.25 390.33 137.44 422.18 154.63 454.03 135.02 458.29 115.4 462.56 117.82 426.44 120.25 390.33"
fill="#3ad29f"
/>
<polygon
points="0 707.09 38 528.09 66 491.09 94 443.09 146 412.09 185 390.09 201 438.09 231.74 458.67 251 487.09 281 477.09 319 446.09 348 438.09 389 412.09 427 422.09 466 408.09 492 390.09 517 420.09 531 459.09 534 473.09 570 473.09 610 473.09 635 446.09 674 438.09 712 438.09 738 446.09 784 459.09 886 707.09 0 707.09"
fill="#e0e0e0"
/>
<g opacity={0.3}>
<rect
x={145.62}
y={178.78}
width={154.36}
height={30.12}
rx={15.06}
ry={15.06}
fill="#e0e0e0"
/>
<rect
x={107.97}
y={208.9}
width={154.36}
height={30.12}
rx={15.06}
ry={15.06}
fill="#e0e0e0"
/>
<rect
x={145.62}
y={239.02}
width={154.36}
height={30.12}
rx={15.06}
ry={15.06}
fill="#e0e0e0"
/>
</g>
<g opacity={0.5}>
<polygon
points="427 672.4 226 672.4 237.77 143.43 415.23 143.43 427 672.4"
fill="url(#c3b6ae59-f5c8-462f-a7a0-99e79fdd0e5d)"
/>
</g>
<polygon
points="423.08 672.4 230.13 672.4 241.42 143.43 411.78 143.43 423.08 672.4"
fill="#fff"
/>
<g opacity={0.05}>
<polygon points="276.25 672.4 230.13 672.4 241.42 143.43 264.95 143.43 276.25 672.4" />
</g>
<path
d="M200.95,472.86H453.2a0,0,0,0,1,0,0v0a35.77,35.77,0,0,1-35.77,35.77H236.72a35.77,35.77,0,0,1-35.77-35.77v0a0,0,0,0,1,0,0Z"
fill={props.primaryColor}
/>
<path
d="M200.95,295H453.2a0,0,0,0,1,0,0v0a35.77,35.77,0,0,1-35.77,35.77H236.72A35.77,35.77,0,0,1,200.95,295v0A0,0,0,0,1,200.95,295Z"
fill={props.primaryColor}
/>
<circle cx={327.07} cy={219.2} r={46.12} fill="#ffffa5" />
<rect x={233.89} y={508.62} width={185.42} height={2.82} opacity={0.1} />
<rect x={236.72} y={330.73} width={178.83} height={1.88} opacity={0.1} />
<path
d="M510.37,768.79h-59.3V687.37a29.65,29.65,0,0,1,29.65-29.65h0a29.66,29.66,0,0,1,29.65,29.65Z"
transform="translate(-132.47 -96.39)"
fill="#e0e0e0"
/>
<path
d="M1015.8,803.61H132.93s57-131,143.4-154.18a98.17,98.17,0,0,1,38.27-2.71c20.84,2.65,39.69,13.58,53.08,29.77C396,710.73,482.73,785.34,656.26,700.08c0,0,62.12-62.12,161.89,11.29a191.58,191.58,0,0,0,19,8.2c30.61,11.57,91.84,27.69,135.37-6.32C1032.75,666.19,1015.8,803.61,1015.8,803.61Z"
transform="translate(-132.47 -96.39)"
fill="#4d8af0"
/>
<g opacity={0.3}>
<rect
x={557.62}
y={39.78}
width={154.36}
height={30.12}
rx={15.06}
ry={15.06}
fill="#e0e0e0"
/>
<rect
x={519.97}
y={69.9}
width={154.36}
height={30.12}
rx={15.06}
ry={15.06}
fill="#e0e0e0"
/>
<rect
x={557.62}
y={100.02}
width={154.36}
height={30.12}
rx={15.06}
ry={15.06}
fill="#e0e0e0"
/>
</g>
<g opacity={0.3}>
<rect
x={685.62}
y={249.78}
width={154.36}
height={30.12}
rx={15.06}
ry={15.06}
fill="#e0e0e0"
/>
<rect
x={647.97}
y={279.9}
width={154.36}
height={30.12}
rx={15.06}
ry={15.06}
fill="#e0e0e0"
/>
<rect
x={685.62}
y={310.02}
width={154.36}
height={30.12}
rx={15.06}
ry={15.06}
fill="#e0e0e0"
/>
</g>
<g opacity={0.3}>
<path
d="M767.32,355.59h32.94S787.85,377.55,767.32,355.59Z"
transform="translate(-132.47 -96.39)"
fill="#030b44"
/>
<path
d="M769.31,364.93l21.6-24.87S799.35,363.83,769.31,364.93Z"
transform="translate(-132.47 -96.39)"
fill="#030b44"
/>
</g>
<g opacity={0.3}>
<path
d="M649.67,424.3h32.94S670.2,446.26,649.67,424.3Z"
transform="translate(-132.47 -96.39)"
fill="#030b44"
/>
<path
d="M651.66,433.64l21.59-24.87S681.7,432.54,651.66,433.64Z"
transform="translate(-132.47 -96.39)"
fill="#030b44"
/>
</g>
<g opacity={0.3}>
<path
d="M607.06,166.4h35.33S629.08,190,607.06,166.4Z"
transform="translate(-132.47 -96.39)"
fill="#030b44"
/>
<path
d="M609.19,176.43l23.17-26.69S641.42,175.24,609.19,176.43Z"
transform="translate(-132.47 -96.39)"
fill="#030b44"
/>
</g>
<g opacity={0.05}>
<path
d="M364.21,604.87c1,.09,2.05.14,3.09.14h36l-.76-35.76H365Z"
transform="translate(-132.47 -96.39)"
/>
</g>
<g opacity={0.05}>
<polygon points="268.19 294.97 238.19 294.97 237.42 330.73 268.95 330.73 268.19 294.97" />
</g>
<path
d="M1067.53,556.56a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z"
transform="translate(-132.47 -96.39)"
fill="#4d8af0"
/>
<path
d="M586.14,202.6c0,35.19-56.89,63.71-127.07,63.71S332,237.79,332,202.6,388.89,96.39,459.07,96.39,586.14,167.42,586.14,202.6Z"
transform="translate(-132.47 -96.39)"
fill={props.primaryColor}
/>
<g opacity={0.05}>
<path
d="M331.26,202.6c0,35.19,56.89,63.71,127.07,63.71V96.39C388.15,96.39,331.26,167.42,331.26,202.6Z"
transform="translate(-132.47 -96.39)"
/>
</g>
</svg>
);
UndrawLighthouse.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawLighthouse.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawLighthouse;