react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
257 lines (252 loc) • 7.1 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawAlert = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="5936c596-051a-40af-b9e7-1fcdf2961302"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 983.63 745.7"
>
<defs>
<linearGradient
id="ba9aee23-baa1-4411-9fe4-0580915617e3"
x1={420.85}
y1={723.28}
x2={420.85}
y2={693.5}
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="8739f0f8-02d9-4432-8f87-3cf82dfe0a34"
x1={530.19}
y1={631.15}
x2={530.19}
y2={77.15}
xlinkHref="#ba9aee23-baa1-4411-9fe4-0580915617e3"
/>
<linearGradient
id="aa9b5458-2d2d-464a-836e-4d64dcd27f19"
x1={414}
y1={352.05}
x2={414}
y2={107.83}
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopOpacity={0.12} />
<stop offset={0.55} stopOpacity={0.09} />
<stop offset={1} stopOpacity={0.02} />
</linearGradient>
<linearGradient
id="a3b91e71-d117-4cef-9b60-5fdfa21b479e"
x1={414}
y1={334.64}
x2={414}
y2={305.64}
xlinkHref="#ba9aee23-baa1-4411-9fe4-0580915617e3"
/>
<linearGradient
id="705825ec-b1bb-472c-aa75-ef9fc966de2f"
x1={414}
y1={296.64}
x2={414}
y2={210.64}
xlinkHref="#ba9aee23-baa1-4411-9fe4-0580915617e3"
/>
<linearGradient
id="5f176dc8-07aa-4396-8169-181014e82da3"
x1={966.26}
y1={815.71}
x2={966.26}
y2={378.25}
gradientTransform="translate(0.2 -14.4) scale(1 1.03)"
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="49755de2-ac10-4a71-89d3-2e7bf6e3c26c"
x1={858.27}
y1={519.31}
x2={858.27}
y2={400.85}
xlinkHref="#aa9b5458-2d2d-464a-836e-4d64dcd27f19"
/>
<linearGradient
id="0ffccb3b-4648-4426-a970-7d9f3a6cb9fe"
x1={858.27}
y1={510.86}
x2={858.27}
y2={496.8}
xlinkHref="#ba9aee23-baa1-4411-9fe4-0580915617e3"
/>
<linearGradient
id="7d2fdb97-c98e-4205-8a7c-ebf7b6e6fe48"
x1={858.27}
y1={492.43}
x2={858.27}
y2={450.72}
xlinkHref="#ba9aee23-baa1-4411-9fe4-0580915617e3"
/>
</defs>
<title>alert</title>
<path
d="M634.66,582.68s20.89,141,144.11,188H279.61c123.22-47,144.11-188,144.11-188Z"
transform="translate(-108.19 -77.15)"
fill="#e0e0e0"
/>
<rect
x={168.91}
y={693.5}
width={503.87}
height={29.78}
fill="url(#ba9aee23-baa1-4411-9fe4-0580915617e3)"
/>
<rect x={171.42} y={693.5} width={499.16} height={22.97} fill="#f5f5f5" />
<path
d="M941.17,77.15h-822a11.12,11.12,0,0,0-11,11.22V610.24a20.72,20.72,0,0,0,20.53,20.91H931.65a20.72,20.72,0,0,0,20.53-20.91V88.37A11.12,11.12,0,0,0,941.17,77.15Z"
transform="translate(-108.19 -77.15)"
fill="url(#8739f0f8-02d9-4432-8f87-3cf82dfe0a34)"
/>
<path
d="M941.15,545.09H117.22V100A10.75,10.75,0,0,1,128,89.27H930.39A10.75,10.75,0,0,1,941.15,100Z"
transform="translate(-108.19 -77.15)"
fill="#f5f5f5"
/>
<path
d="M921.1,620.28H137.27a20,20,0,0,1-20-20V545.09H941.15v55.14A20,20,0,0,1,921.1,620.28Z"
transform="translate(-108.19 -77.15)"
fill="#fff"
/>
<rect x={50.76} y={68.72} width={745.6} height={348.29} fill={props.primaryColor} />
<rect x={49.76} y={49.04} width={746.6} height={30.68} fill="#e0e0e0" />
<circle cx={66} cy={64.72} r={9} fill="#ff5252" />
<circle cx={87} cy={64.72} r={9} fill="#ff0" />
<circle cx={108} cy={64.72} r={9} fill="#69f0ae" />
<polygon
points="414 107.83 279 352.05 549 352.05 414 107.83"
fill="url(#aa9b5458-2d2d-464a-836e-4d64dcd27f19)"
/>
<polygon
points="414 126.64 295.29 342.64 532.71 342.64 414 126.64"
fill="#fff"
/>
<circle
cx={414}
cy={320.14}
r={14.5}
fill="url(#a3b91e71-d117-4cef-9b60-5fdfa21b479e)"
/>
<circle cx={414} cy={320.14} r={12} fill={props.primaryColor} />
<rect
x={410}
y={210.64}
width={8}
height={86}
fill="url(#705825ec-b1bb-472c-aa75-ef9fc966de2f)"
/>
<rect x={411.5} y={211.14} width={5} height={84} fill={props.primaryColor} />
<rect
x={841.39}
y={373.76}
width={250.13}
height={448.93}
rx={10}
ry={10}
transform="translate(-108.99 -75.85) rotate(-0.08)"
fill="url(#5f176dc8-07aa-4396-8169-181014e82da3)"
/>
<rect
x={847.14}
y={378.4}
width={238.61}
height={427.15}
rx={10}
ry={10}
transform="translate(-108.98 -75.85) rotate(-0.08)"
fill="#fff"
/>
<rect
x={874.07}
y={408.6}
width={184.73}
height={347.61}
transform="translate(-108.97 -75.85) rotate(-0.08)"
fill={props.primaryColor}
/>
<circle
cx={966.71}
cy={781.25}
r={14.73}
transform="translate(-109.24 -75.85) rotate(-0.08)"
fill="#dbdbdb"
/>
<circle
cx={938.2}
cy={392.43}
r={2.95}
transform="matrix(1, 0, 0, 1, -108.71, -75.89)"
fill="#dbdbdb"
/>
<rect
x={951.45}
y={390.17}
width={45.66}
height={4.42}
rx={1.5}
ry={1.5}
transform="translate(-108.71 -75.84) rotate(-0.08)"
fill="#dbdbdb"
/>
<polygon
points="858.27 400.85 792.79 519.31 923.75 519.31 858.27 400.85"
fill="url(#49755de2-ac10-4a71-89d3-2e7bf6e3c26c)"
/>
<polygon
points="858.27 409.97 800.69 514.74 915.85 514.74 858.27 409.97"
fill="#fff"
/>
<circle
cx={858.27}
cy={503.83}
r={7.03}
fill="url(#0ffccb3b-4648-4426-a970-7d9f3a6cb9fe)"
/>
<circle cx={858.27} cy={503.83} r={5.82} fill={props.primaryColor} />
<rect
x={856.33}
y={450.72}
width={3.88}
height={41.71}
fill="url(#7d2fdb97-c98e-4205-8a7c-ebf7b6e6fe48)"
/>
<rect x={857.06} y={450.96} width={2.43} height={40.74} fill={props.primaryColor} />
</svg>
);
UndrawAlert.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawAlert.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawAlert;