react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
269 lines (264 loc) • 9.46 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawChecklist = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="2dd263b0-17c3-4832-94a1-efd01e704293"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 564.9 858"
>
<defs>
<linearGradient
id="48cbd5f8-dd6a-4902-855a-ac0ebdca0ab8"
x1={335}
y1={661.45}
x2={335}
y2={421.53}
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="635ef7de-69ea-413a-a634-0ed37a80d0a0"
x1={400.46}
y1={395.09}
x2={400.46}
y2={209.89}
xlinkHref="#48cbd5f8-dd6a-4902-855a-ac0ebdca0ab8"
/>
<linearGradient
id="1972a281-8496-4e87-8315-a7d595070924"
x1={232.62}
y1={532.26}
x2={498.42}
y2={532.26}
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopColor="#dadada" />
<stop offset={1} stopColor="#fff" />
</linearGradient>
<linearGradient
id="4fc3e5a2-91e5-47ea-98de-dc6f1c116699"
x1={232.62}
y1={574.59}
x2={498.42}
y2={574.59}
xlinkHref="#1972a281-8496-4e87-8315-a7d595070924"
/>
<linearGradient
id="900a01a2-0e45-436b-99d8-acc317faf847"
x1={397.92}
y1={858}
x2={397.92}
y2={732.95}
xlinkHref="#48cbd5f8-dd6a-4902-855a-ac0ebdca0ab8"
/>
<linearGradient
id="1de1d84a-3e03-483f-be7f-56a9502687c2"
x1={401.35}
y1={222.24}
x2={401.35}
y2={0}
xlinkHref="#48cbd5f8-dd6a-4902-855a-ac0ebdca0ab8"
/>
<linearGradient
id="ea3c10e5-040b-4a6e-b93f-0f3b5d2f843b"
x1={392.58}
y1={860.42}
x2={392.58}
y2={498.06}
xlinkHref="#48cbd5f8-dd6a-4902-855a-ac0ebdca0ab8"
/>
</defs>
<title>checklist</title>
<polygon
points="564.9 421.53 105.09 497.87 105.09 661.45 564.9 653.96 564.9 421.53"
fill="url(#48cbd5f8-dd6a-4902-855a-ac0ebdca0ab8)"
/>
<polygon
points="110.38 499.16 554.86 425.08 554.86 643.79 110.38 657.9 110.38 499.16"
fill={props.primaryColor}
/>
<polygon
points="560.02 209.89 240.91 300.73 240.91 395.09 560.02 326.66 560.02 209.89"
fill="url(#635ef7de-69ea-413a-a634-0ed37a80d0a0)"
/>
<polygon
points="551.33 213.42 247.96 301.61 247.96 389.8 551.33 319.25 551.33 213.42"
fill="#fff"
/>
<path
d="M614.89,354.2c0,13.11-6.35,25.29-14.11,27.19s-13.84-7-13.84-19.89,6.16-25,13.84-27.12S614.89,341.09,614.89,354.2Z"
transform="translate(-317.55 -21)"
fill="none"
stroke="#dbdbdb"
strokeMiterlimit={10}
strokeWidth={2}
/>
<polygon
points="516.06 273.39 323.36 324.08 323.36 313.26 516.06 261.14 516.06 273.39"
fill="#dbdbdb"
/>
<polygon
points="516.06 298.08 323.36 348.77 323.36 337.95 516.06 285.84 516.06 298.08"
fill="#dbdbdb"
/>
<path
d="M516.12,591.68c0-24.85-11.17-43.47-24.69-41.62-13.25,1.82-23.8,22.68-23.8,46.63s10.55,42.63,23.8,41.71C505,637.46,516.12,616.54,516.12,591.68Z"
transform="translate(-317.55 -21)"
fill="#fff"
/>
<polygon
points="498.42 527.38 232.62 556.85 232.62 540.34 498.42 507.68 498.42 527.38"
fill="url(#1972a281-8496-4e87-8315-a7d595070924)"
/>
<polygon
points="498.42 569.71 232.62 599.18 232.62 582.67 498.42 550.01 498.42 569.71"
fill="url(#4fc3e5a2-91e5-47ea-98de-dc6f1c116699)"
/>
<polygon
points="553.16 736.64 239.14 732.95 239.14 828.63 556.69 858 553.16 736.64"
fill="url(#900a01a2-0e45-436b-99d8-acc317faf847)"
/>
<polygon
points="551.33 742.56 247.96 739.03 247.96 823.7 551.33 848.39 551.33 742.56"
fill="#fff"
/>
<path
d="M618.42,806.64c0,13.08-6.35,23.24-14.11,22.7S590.48,818,590.48,805.16s6.16-23,13.84-22.71S618.42,793.56,618.42,806.64Z"
transform="translate(-317.55 -21)"
fill="none"
stroke="#dbdbdb"
strokeMiterlimit={10}
strokeWidth={2}
/>
<polygon
points="516.06 788.42 329.63 779.49 329.63 768.45 516.06 775.98 516.06 788.42"
fill="#dbdbdb"
/>
<polygon
points="516.06 813.11 329.63 804.18 329.63 793.14 516.06 800.67 516.06 813.11"
fill="#dbdbdb"
/>
<polygon
points="560.02 0 242.67 127.17 242.67 222.24 560.02 116.41 560.02 0"
fill="url(#1de1d84a-3e03-483f-be7f-56a9502687c2)"
/>
<polygon
points="554.86 5.29 247.96 132.28 247.96 213.42 554.86 111.12 554.86 5.29"
fill="#fff"
/>
<path
d="M629,169c0,13-6.35,25.86-14.11,28.73s-13.84-5.2-13.84-17.93,6.16-25.53,13.84-28.63S629,156,629,169Z"
transform="translate(-317.55 -21)"
fill="none"
stroke="#dbdbdb"
strokeMiterlimit={10}
strokeWidth={2}
/>
<polygon
points="523.11 61.73 336.64 134.31 336.64 121.67 523.11 47.5 523.11 61.73"
fill="#dbdbdb"
/>
<polygon
points="523.11 93.48 336.64 166.05 336.64 153.42 523.11 79.25 523.11 93.48"
fill="#dbdbdb"
/>
<path
d="M439.5,843.65l-9.45-6.44-15.14-57.35,3.06-3.31s0-18.5-4.31-30.71C416.33,744.15,418,743,418,743c-9.22-8.39-9.22-39.14-9.22-39.14s-3.91-23.68-11.72-45.61l14.79,3.67,21.52-47.53V603.19l9.22-5.59s-12.3-16.78-24.6,0c0,0,3.07,11.18,0,16.78s-12.3,25.16-12.3,25.16h-7.83l1.68-8.39H383.47c-.78-1-1.57-1.93-2.38-2.8l12.3-25.16-5.76-3.93,21.14-24,3.07-50.33c12.22-3.7,15-14.77,15.48-21.82.22-3.22-3.12-5.67-6.56-4.87-26.54,6.19-21.21,18.3-21.21,18.3L390.31,564,377.6,582.21c-1.54-8.33-7.56-15.25-15.75-18.67l6.94-7.89s-15.69-3.81-30.6,1.35c-27.55,9.52-27.49,46,0,55.57a30.11,30.11,0,0,0,12.14,1.8v-2.8c.39,0,.77,0,1.15-.05-.47,2.6-.91,5.54-1.14,8.44h0c-6.15,0-6.15,30.76,3.07,36.35l-3.07,30.76v16.78c6.15,14,18.45,14,18.45,14L378,757c2.92,1.33,6.72,1.23,10.8.31l1.49,10.87s-27.67,19.57-27.67,47.53l-1,1.83-2.07-1.83-18.45,14,24.6,28h24.6c6.15-14-18.45-16.78-18.45-16.78l-.12-14.37,24.93-26.92c4.23,11.25,11.77,29.95,18,38l-2.81.51v22.37H464.1C479.47,840.85,439.5,843.65,439.5,843.65Z"
transform="translate(-317.55 -21)"
fill="url(#ea3c10e5-040b-4a6e-b93f-0f3b5d2f843b)"
/>
<path
d="M357.81,605.43s-6.1,25.62,0,29.28l18.3-11-12.2-23.18Z"
transform="translate(-317.55 -21)"
fill="#f6b9ad"
/>
<path
d="M425.29,831.56l-16.16-67.34L393,785.76s13.47,43.1,21.55,48.48Z"
transform="translate(-317.55 -21)"
fill="#b98b82"
/>
<path
d="M436.07,599.91s-10.77-16.16-21.55,0c0,0,2.69,10.77,0,16.16s-10.77,24.24-10.77,24.24H379.5v13.47l29.63,8.08L428,616.07V605.29Z"
transform="translate(-317.55 -21)"
fill="#f6b9ad"
/>
<polygon
points="80.81 611.23 75.42 640.86 53.87 635.47 53.87 611.23 80.81 611.23"
fill="#5989a1"
/>
<circle cx={37.71} cy={568.13} r={24.24} fill="#f6b9ad" />
<path
d="M349.87,586.44l21.55-26.94s-13.75-3.67-26.81,1.3c-24.13,9.17-24.09,44.27,0,53.53a24.15,24.15,0,0,0,10.63,1.74V599.91h-8.08Z"
transform="translate(-317.55 -21)"
fill="#3d213c"
/>
<path
d="M409.13,529.87l-2.69,48.48-21.55,26.94-13.47-8.08,18.86-29.63,8.08-45.79s-4.67-11.67,18.59-17.63a4.59,4.59,0,0,1,5.75,4.69C422.27,515.64,419.84,526.3,409.13,529.87Z"
transform="translate(-317.55 -21)"
fill="#f6b9ad"
/>
<path
d="M387.58,742.67l2.69,21.55S366,783.07,366,810l-2.69,5.39,8.08,8.08,43.1-51.18s0-29.63-8.08-37.71Z"
transform="translate(-317.55 -21)"
fill="#f6b9ad"
/>
<path
d="M374,820.41l.11,13.84s21.55,2.69,16.16,16.16H368.73l-21.55-26.94L363.34,810Z"
transform="translate(-317.55 -21)"
fill={props.primaryColor}
/>
<path
d="M422.6,828.86l10.77,8.08s35-2.69,21.55,16.16H409.13V831.56Z"
transform="translate(-317.55 -21)"
fill={props.primaryColor}
/>
<path
d="M414.52,740s-24.24,18.86-35,13.47l-8.08-37.71s-10.77,0-16.16-13.47V686.1l51.18,16.16S406.44,731.89,414.52,740Z"
transform="translate(-317.55 -21)"
fill={props.primaryColor}
/>
<path
d="M393,605.29l-21.55-16.16s-10.77,32.32-16.16,32.32-5.39,29.63,2.69,35l-2.69,29.63,51.18,16.16s-8.08-53.87-24.24-72.73Z"
transform="translate(-317.55 -21)"
fill="#76b6d7"
/>
<polygon
points="284.45 149.84 290.61 148.9 296.77 155.05 303.87 141.79 311.45 141.79 296.77 160.26 284.45 149.84"
fill="#47e6b1"
/>
<polygon
points="152.45 572.35 162.26 570.84 172.07 580.65 183.38 559.53 195.45 559.53 172.07 588.95 152.45 572.35"
fill={props.primaryColor}
/>
<polygon
points="152.45 572.35 162.26 570.84 172.07 580.65 183.38 559.53 195.45 559.53 172.07 588.95 152.45 572.35"
opacity={0.2}
/>
</svg>
);
UndrawChecklist.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawChecklist.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawChecklist;