react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
249 lines (244 loc) • 7.56 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawImages = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="467947fa-27d7-490e-b249-4c178978e5af"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 922.73 636.56"
>
<defs>
<linearGradient
id="45afbd54-b407-40ea-92b0-12882817bda7"
x1={704.04}
y1={628.14}
x2={704.04}
y2={138.69}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.01} 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="e8e8f626-00af-4efc-8879-fbc77fe37cf8"
x1={560.05}
y1={462.46}
x2={560.05}
y2={29.48}
xlinkHref="#45afbd54-b407-40ea-92b0-12882817bda7"
/>
<clipPath
id="bcd5146f-3d92-4c9f-afb7-626509c6e3b6"
transform="translate(-144.57 -138.69)"
>
<rect
x={395.46}
y={178.13}
width={617.65}
height={410.82}
rx={8.85}
ry={8.85}
fill="#fff"
/>
</clipPath>
<linearGradient
id="9ff4afcc-8271-4218-bae1-bdde23a0dee0"
x1={600}
y1={694.72}
x2={600}
y2={205.28}
xlinkHref="#45afbd54-b407-40ea-92b0-12882817bda7"
/>
<linearGradient
id="63303a72-ce25-48a0-9eb5-28046144d7fd"
x1={456.01}
y1={529.04}
x2={456.01}
y2={96.07}
xlinkHref="#45afbd54-b407-40ea-92b0-12882817bda7"
/>
<clipPath
id="9b7b7c1a-1bcc-416c-8281-7abc384c6518"
transform="translate(-144.57 -138.69)"
>
<rect
x={291.42}
y={244.72}
width={617.65}
height={410.82}
rx={8.85}
ry={8.85}
fill="#fff"
/>
</clipPath>
<linearGradient
id="adada4c0-4d5b-49fe-b408-38a4e0647e19"
x1={495.96}
y1={761.31}
x2={495.96}
y2={271.86}
xlinkHref="#45afbd54-b407-40ea-92b0-12882817bda7"
/>
<linearGradient
id="4eac682f-71a7-4b56-b98a-4885330464ac"
x1={351.97}
y1={595.63}
x2={351.97}
y2={162.65}
xlinkHref="#45afbd54-b407-40ea-92b0-12882817bda7"
/>
<clipPath
id="8bd20c1f-fb8b-47cf-b3aa-3f21002888f7"
transform="translate(-144.57 -138.69)"
>
<rect
x={187.38}
y={311.3}
width={617.65}
height={410.82}
rx={8.85}
ry={8.85}
fill="#fff"
/>
</clipPath>
</defs>
<title>images</title>
<path
d="M1055,612.72a15.34,15.34,0,0,1-15.26,15.42H368.34a15.34,15.34,0,0,1-15.26-15.42V154.11a15.34,15.34,0,0,1,15.26-15.42h671.4A15.34,15.34,0,0,1,1055,154.11"
transform="translate(-144.57 -138.69)"
fill="url(#45afbd54-b407-40ea-92b0-12882817bda7)"
/>
<path
d="M1047.11,605.21a14.91,14.91,0,0,1-14.91,14.91H376.37a14.91,14.91,0,0,1-14.91-14.91V161.88A14.91,14.91,0,0,1,376.37,147H1032.2a14.91,14.91,0,0,1,14.91,14.91"
transform="translate(-144.57 -138.69)"
fill="#f5f5f5"
/>
<rect
id="85922ada-b73f-4063-9eb0-e9bdf79b2cd7"
data-name="<Rectangle>"
x={243.09}
y={29.48}
width={633.92}
height={432.98}
rx={8.85}
ry={8.85}
fill="url(#e8e8f626-00af-4efc-8879-fbc77fe37cf8)"
/>
<rect
x={250.89}
y={39.44}
width={617.65}
height={410.82}
rx={8.85}
ry={8.85}
fill="#fff"
/>
<g clipPath="url(#bcd5146f-3d92-4c9f-afb7-626509c6e3b6)">
<path
d="M361.11,585.18,533.55,387.59a34.33,34.33,0,0,1,48.57-3.17L630.41,427a34.33,34.33,0,0,0,44.8.54L822.79,303.51a34.33,34.33,0,0,1,47.49,3.19L1051.39,506a34.33,34.33,0,0,1,8.78,20l7,78.63A34.33,34.33,0,0,1,1033,642.08H387a34.33,34.33,0,0,1-34.31-33.29h0A34.33,34.33,0,0,1,361.11,585.18Z"
transform="translate(-144.57 -138.69)"
fill={props.primaryColor}
/>
</g>
<circle cx={325.27} cy={105.32} r={38.25} fill="#ff5252" />
<path
d="M951,679.3a15.34,15.34,0,0,1-15.26,15.42H264.3A15.34,15.34,0,0,1,249,679.3V220.7a15.34,15.34,0,0,1,15.26-15.42H935.7A15.34,15.34,0,0,1,951,220.7"
transform="translate(-144.57 -138.69)"
fill="url(#9ff4afcc-8271-4218-bae1-bdde23a0dee0)"
/>
<path
d="M943.07,671.8a14.91,14.91,0,0,1-14.91,14.91H272.33a14.91,14.91,0,0,1-14.91-14.91V228.46a14.91,14.91,0,0,1,14.91-14.91H928.16a14.91,14.91,0,0,1,14.91,14.91"
transform="translate(-144.57 -138.69)"
fill="#f5f5f5"
/>
<rect
id="926a8b08-dcad-48fb-92d9-382001b338ce"
data-name="<Rectangle>"
x={139.05}
y={96.07}
width={633.92}
height={432.98}
rx={8.85}
ry={8.85}
fill="url(#63303a72-ce25-48a0-9eb5-28046144d7fd)"
/>
<rect
x={146.85}
y={106.03}
width={617.65}
height={410.82}
rx={8.85}
ry={8.85}
fill="#fff"
/>
<g clipPath="url(#9b7b7c1a-1bcc-416c-8281-7abc384c6518)">
<path
d="M257.07,651.77,429.51,454.17A34.33,34.33,0,0,1,478.09,451l48.28,42.6a34.33,34.33,0,0,0,44.8.54L718.75,370.09a34.33,34.33,0,0,1,47.49,3.19l181.1,199.34a34.33,34.33,0,0,1,8.78,20l7,78.63a34.33,34.33,0,0,1-34.19,37.36h-646a34.33,34.33,0,0,1-34.31-33.29h0A34.33,34.33,0,0,1,257.07,651.77Z"
transform="translate(-144.57 -138.69)"
fill={props.primaryColor}
/>
</g>
<circle cx={221.23} cy={171.9} r={38.25} fill="#ff5252" />
<path
d="M846.92,745.89a15.34,15.34,0,0,1-15.26,15.42H160.26A15.34,15.34,0,0,1,145,745.89V287.28a15.34,15.34,0,0,1,15.26-15.42h671.4a15.34,15.34,0,0,1,15.26,15.42"
transform="translate(-144.57 -138.69)"
fill="url(#adada4c0-4d5b-49fe-b408-38a4e0647e19)"
/>
<path
d="M839,738.38a14.91,14.91,0,0,1-14.91,14.91H168.29a14.91,14.91,0,0,1-14.91-14.91V295a14.91,14.91,0,0,1,14.91-14.91H824.12A14.91,14.91,0,0,1,839,295"
transform="translate(-144.57 -138.69)"
fill="#fff"
/>
<rect
id="c6fe725a-3b03-4a96-90af-cfbd2676500a"
data-name="<Rectangle>"
x={35.01}
y={162.65}
width={633.92}
height={432.98}
rx={8.85}
ry={8.85}
fill="url(#4eac682f-71a7-4b56-b98a-4885330464ac)"
/>
<rect
x={42.81}
y={172.61}
width={617.65}
height={410.82}
rx={8.85}
ry={8.85}
fill="#fff"
/>
<g clipPath="url(#8bd20c1f-fb8b-47cf-b3aa-3f21002888f7)">
<path
d="M153,718.35,325.48,520.76A34.33,34.33,0,0,1,374,517.59l48.28,42.6a34.33,34.33,0,0,0,44.8.54L614.71,436.68a34.33,34.33,0,0,1,47.49,3.19l181.1,199.34a34.33,34.33,0,0,1,8.78,20l7,78.63a34.33,34.33,0,0,1-34.19,37.36h-646A34.33,34.33,0,0,1,144.58,742h0A34.33,34.33,0,0,1,153,718.35Z"
transform="translate(-144.57 -138.69)"
fill={props.primaryColor}
/>
</g>
<circle cx={117.19} cy={238.49} r={38.25} fill="#ff5252" />
</svg>
);
UndrawImages.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawImages.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawImages;