react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
238 lines (228 loc) • 18.4 kB
JavaScript
;
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 UndrawExperts = function UndrawExperts(props) {
return _react2.default.createElement(
'svg',
{ className: props.class, id: '747ad91c-18bb-4936-b655-cddf352f94cc', dataName: 'Layer 1', xmlns: 'http://www.w3.org/2000/svg',
xmlnsXlink: 'http://www.w3.org/1999/xlink', width: '1081.95', height: '662.59', style: { height: props.height, width: '100%' },
viewBox: '0 0 1081.95 662.59' },
_react2.default.createElement(
'defs',
null,
_react2.default.createElement(
'lineargradient',
{ id: 'd97f7624-c4eb-4e7b-b35a-7f9180afe4f8', x1: '863.76',
y1: '427.61', x2: '863.76', gradientunits: 'userSpaceOnUse' },
_react2.default.createElement('stop', { offset: '0', stopColor: 'gray', stopOpacity: '.25' }),
_react2.default.createElement('stop', { offset: '.54', stopColor: 'gray', stopOpacity: '.12' }),
_react2.default.createElement('stop', { offset: '1', stopColor: 'gray', stopOpacity: '.1' })
),
_react2.default.createElement(
'lineargradient',
{ id: 'bc158a6b-8b54-4024-9d86-b607f354f9d2', x1: '853.83',
y1: '307.88', x2: '989.67', y2: '307.88', xlinkHref: '#d97f7624-c4eb-4e7b-b35a-7f9180afe4f8' },
_react2.default.createElement(
'lineargradient',
{ id: '67a622da-4d2c-40ec-a156-0953688d8952', x1: '218.19',
y1: '542.13', x2: '218.19', y2: '114.52', xlinkHref: '#d97f7624-c4eb-4e7b-b35a-7f9180afe4f8' },
_react2.default.createElement(
'lineargradient',
{ id: '22f5c963-4955-4fd8-94b1-7c287e1ee373', x1: '211.43',
y1: '414.37', x2: '362.74', y2: '414.37', xlinkHref: '#d97f7624-c4eb-4e7b-b35a-7f9180afe4f8' },
_react2.default.createElement(
'lineargradient',
{ id: '435772a6-cef7-4b13-8b4e-baec559ce710', x1: '543.14',
y1: '662.59', x2: '543.14', y2: '234.98', xlinkHref: '#d97f7624-c4eb-4e7b-b35a-7f9180afe4f8' },
_react2.default.createElement('lineargradient', { id: 'd5aea71b-2b89-434e-8ba8-1990ff8adea2', x1: '526.51',
y1: '527.82', x2: '701.7', y2: '527.82', xlinkHref: '#d97f7624-c4eb-4e7b-b35a-7f9180afe4f8'
})
)
)
)
)
),
_react2.default.createElement('rect', { x: '645.57', width: '436.38', height: '427.61', fill: 'url(#d97f7624-c4eb-4e7b-b35a-7f9180afe4f8)',
opacity: '.5' }),
_react2.default.createElement('rect', { x: '647.76', y: '3.29', width: '432', height: '421.03', fill: '#fff' }),
_react2.default.createElement('rect', { x: '691.62', y: '38.25', width: '344.28', height: '267.27', fill: props.primaryColor,
opacity: '.5' }),
_react2.default.createElement('path', { d: 'M988,341a40.35,40.35,0,0,0-12-28c-6.76-6.64-15.85-14.26-25.7-18.87h0l-.06,0A43.5,43.5,0,0,0,937,290.13V273.77a36.7,36.7,0,0,0,8.19-10.63h0v1.31S960.88,248.6,960.52,230c.23-11.17-5.14-23.46-23.15-34-41.82-24.4-57.84,11.08-60.89,19.29a5.5,5.5,0,0,0-.44,1.25l-.12.38,0,0a4.38,4.38,0,0,0,0,1.16h0l0,.12,0,0a4.84,4.84,0,0,0,0,.62c0,2.74,2.33,5.26,6.28,7.32A36.58,36.58,0,0,0,900.44,281V291.5l-.81-1.53s-5.59,3.35-12.8,8.49h0c-12.08,8.61-28.72,22.25-31.22,33.52-4,18,0,94.18,0,94.18l134.06,2Zm-41.37-79.35h0Zm-1.34,1.47h0Zm.1-.11.05-.05Zm.2-.21,0,0Zm-69.5-44v0Zm.18.59,0,.06Zm.25.59,0,.08Zm.32.58.06.1Zm.39.57.08.11Zm.46.56.11.12Zm.53.55.13.13Zm4.54,3,.14.07h0Zm-3.94-2.49.16.14Zm.66.53.19.14Zm.73.51.22.15Zm.79.5.26.15Zm.85.48.29.16Z',
transform: 'translate(-59.03 -118.7)', fill: 'url(#bc158a6b-8b54-4024-9d86-b607f354f9d2)',
opacity: '.5' }),
_react2.default.createElement('rect', { x: '841.99', y: '155.57', width: '35.59', height: '52.2', fill: props.skinColor
}),
_react2.default.createElement('path', { d: 'M902.2,282.57c3.72,1.32,5.32,2.37,9.49,2.37a35.42,35.42,0,0,0,23.73-9.12v-.37H902.2Z',
transform: 'translate(-59.03 -118.7)', opacity: '.05' }),
_react2.default.createElement('circle', { cx: '853.85', cy: '129.47', r: '35.59', fill: props.skinColor }),
_react2.default.createElement('circle', { cx: '821.82', cy: '118.79', fill: '#ff0' }),
_react2.default.createElement('path', { d: 'M880.84,237.49', transform: 'translate(-59.03 -118.7)', fill: '#ff0'
}),
_react2.default.createElement('ellipse', { cx: '849.93', cy: '101.34', rx: '31.81', ry: '12.09' }),
_react2.default.createElement('path', { d: 'M915.32,224.5l29.26,17.81v22s38.17-38.58-7.63-65.29-59.8,20.36-59.8,20.36S889.87,229.59,915.32,224.5Z',
transform: 'translate(-59.03 -118.7)' }),
_react2.default.createElement('ellipse', { cx: '886.9', cy: '129.47', rx: '3.56', ry: '5.93', fill: props.skinColor }),
_react2.default.createElement(
'g',
{ opacity: '.05' },
_react2.default.createElement('path', { d: 'M944.58,242.31,925.1,230.46A74.71,74.71,0,0,1,909,232.13c-17.1,0-31-5.13-31.77-11.56l0,.11,0,0a4.71,4.71,0,0,0,0,.6c0,6.68,14.24,12.09,31.81,12.09a74.71,74.71,0,0,0,16.15-1.67l19.47,11.85Z',
transform: 'translate(-59.03 -118.7)' }),
_react2.default.createElement('path', { d: 'M944.58,264.35v1.27s15.25-15.42,14.9-33.52C959.12,249.64,944.58,264.35,944.58,264.35Z',
transform: 'translate(-59.03 -118.7)' })
),
_react2.default.createElement('path', { d: 'M900.22,290.45s-38.94,23.36-42.83,40.88,0,91.64,0,91.64l130.44,1.95-1.66-84.82a39.27,39.27,0,0,0-11.7-27.25c-9.74-9.57-24.47-21.26-39.21-22.4l-17.52,33.1Z',
transform: 'translate(-59.03 -118.7)', fill: '#4d8af0' }),
_react2.default.createElement('path', { d: 'M882.24,330.1s-10.18,53.43-1.27,70', transform: 'translate(-59.03 -118.7)',
opacity: '.05' }),
_react2.default.createElement('path', { d: 'M956,330.1s10.18,53.43,1.27,70', transform: 'translate(-59.03 -118.7)',
opacity: '.05' }),
_react2.default.createElement('polygon', { points: '841.02 171.95 877.99 171.43 853.75 233.02 841.02 171.95',
fill: '#fff' }),
_react2.default.createElement('polygon', { points: '841.02 168.14 841.02 171.95 877.92 171.95 877.99 168.14 841.02 168.14',
fill: '#fff' }),
_react2.default.createElement('rect', { x: '856.29', y: '168.14', width: '5.09', height: '5.09' }),
_react2.default.createElement('polygon', { points: '841.02 171.95 833.39 179.59 849.93 207.77 841.02 171.95',
fill: '#4d8af0' }),
_react2.default.createElement('polygon', { points: '876.64 174.5 883.01 180.86 863.92 206.3 876.64 174.5',
fill: '#4d8af0' }),
_react2.default.createElement('polygon', { points: '841.02 171.95 833.39 179.59 849.93 207.77 841.02 171.95',
fill: '#fff', opacity: '.1' }),
_react2.default.createElement('polygon', { points: '876.64 174.5 883.01 180.86 863.92 206.3 876.64 174.5',
fill: '#fff', opacity: '.1' }),
_react2.default.createElement('polygon', { points: '858.83 170.68 838.48 256.48 851.2 275.56 867.74 256.48 858.83 170.68'
}),
_react2.default.createElement('rect', { x: '715.95', y: '343.06', width: '304', height: '14', fill: '#e0e0e0' }),
_react2.default.createElement('rect', { x: '764.45', y: '371.06', width: '207', height: '14', fill: '#e0e0e0' }),
_react2.default.createElement('rect', { y: '114.52', width: '436.38', height: '427.61', fill: 'url(#67a622da-4d2c-40ec-a156-0953688d8952)',
opacity: '.5' }),
_react2.default.createElement('rect', { x: '2.19', y: '117.81', width: '432', height: '421.03', fill: '#fff' }),
_react2.default.createElement('rect', { x: '46.05', y: '152.77', width: '344.28', height: '267.27', fill: props.primaryColor,
opacity: '.5' }),
_react2.default.createElement('path', { d: 'M357.18,488.85h5.56L361,471.05l-.19,0c1.06-10.88,2.65-59.09-49.18-78.3L307,389.7l-.35.31V377A37.26,37.26,0,0,0,315,366.24h0v1.33A65.48,65.48,0,0,0,326.2,351a65.4,65.4,0,0,1-9.92,13.9v-.12c6.51-7.43,33.13-41.92-9.29-66.67-47.78-27.87-56.8,18.89-56.8,18.89L254,322.1s-9.25,18.52-9.25,27.26a37.14,37.14,0,0,0,24.75,35v11.1c-3.45,1.26-51.4,19.81-51.4,75.58l-6.68,17.8,2.23,1h0v49.61h109s6.68-52.85,4.45-70.65l6.68,4.45v15.58h1.48v.39h-.43l.43,1.44v47.68h21.88V490.68l.25-1.44h-.25Zm-123.66,4.08h0l.16-4.08Z',
transform: 'translate(-59.03 -118.7)', fill: 'url(#22f5c963-4955-4fd8-94b1-7c287e1ee373)',
opacity: '.5' }),
_react2.default.createElement('rect', { x: '211.21', y: '259.53', width: '35.59', height: '52.2', fill: props.skinColor
}),
_react2.default.createElement('path', { d: 'M271.43,386.53c3.72,1.32,5.32,2.37,9.49,2.37a35.41,35.41,0,0,0,23.73-9.12v-.37H271.43Z',
transform: 'translate(-59.03 -118.7)', opacity: '.05' }),
_react2.default.createElement('circle', { cx: '223.08', cy: '233.43', r: '35.59', fill: props.skinColor }),
_react2.default.createElement('circle', { cx: '191.05', cy: '222.75', fill: '#ff0' }),
_react2.default.createElement('path', { d: 'M250.07,341.45', transform: 'translate(-59.03 -118.7)', fill: '#ff0'
}),
_react2.default.createElement('path', { d: 'M284.54,334.82l29.26,11.45v22S352,329.74,306.17,303c-41.18-24-48.64,4.91-53.82,10.47a1.34,1.34,0,0,0,.07,1.9C257.51,320.16,261.86,339.36,284.54,334.82Z',
transform: 'translate(-59.03 -118.7)', fill: '#4d4545' }),
_react2.default.createElement('rect', { x: '274.27', y: '367.13', width: '20.97', height: '52.25', fill: props.skinColor
}),
_react2.default.createElement('polygon', { points: '272.85 352.2 272.85 367.13 300.57 367.13 298.88 350.07 272.85 352.2',
fill: '#fff' }),
_react2.default.createElement('polygon', { points: '157.68 367.13 157.68 420.45 174.74 420.45 176.72 371.04 157.68 367.13',
fill: props.skinColor }),
_react2.default.createElement('path', { d: 'M282.82,411.19l-12.38-14.93S221,413.32,221,468.77l14.93,17.06-2.13,53.32h87.44s6.4-55.45,4.27-72.51l6.4,4.27h25.59s9.84-59.72-52-78.91Z',
transform: 'translate(-59.03 -118.7)', fill: '#235067' }),
_react2.default.createElement('polygon', { points: '161.94 350.07 155.55 367.13 176.49 376.73 176.87 367.13 161.94 350.07',
fill: '#fff' }),
_react2.default.createElement('polygon', { points: '202.62 283.54 211 302.29 222.97 292.45 211.41 278.83 202.62 283.54',
opacity: '.05' }),
_react2.default.createElement('polygon', { points: '202.62 282.27 211 301.01 222.97 291.18 211.41 277.56 202.62 282.27',
fill: '#fff' }),
_react2.default.createElement('polygon', { points: '247.14 273.37 254.77 278.46 233.15 298.81 225.58 292.24 247.14 273.37',
opacity: '.05' }),
_react2.default.createElement('polygon', { points: '247.14 272.1 254.77 277.18 233.15 297.54 225.58 290.97 247.14 272.1',
fill: '#fff' }),
_react2.default.createElement('path', { d: 'M237.47,481.12a76,76,0,0,1,15.27-45.8', transform: 'translate(-59.03 -118.7)',
opacity: '.05' }),
_react2.default.createElement('polygon', { points: '263.68 349.7 263.68 342.06 271.31 347.15 266.22 345.88 263.68 349.7',
opacity: '.05' }),
_react2.default.createElement('polygon', { points: '273.86 367.51 274.27 368.88 295.24 368.88 295.48 367.51 273.86 367.51',
opacity: '.05' }),
_react2.default.createElement('polygon', { points: '157.68 368.11 157.68 369.57 176.38 377.6 175.9 376.41 157.68 368.11',
opacity: '.05' }),
_react2.default.createElement('path', { d: 'M324.58,353.71a62.69,62.69,0,0,1-9.5,13.32V345l-29.26-11.45c-21.93,4.39-25.39-13.25-31.54-18.9a1.35,1.35,0,0,0-1.9.08l0,0a1.34,1.34,0,0,0,.07,1.9c5.1,4.78,9.44,24,32.13,19.44l29.26,11.45v22A62.76,62.76,0,0,0,324.58,353.71Z',
transform: 'translate(-59.03 -118.7)', opacity: '.05' }),
_react2.default.createElement('ellipse', { cx: '256.12', cy: '233.43', rx: '3.56', ry: '5.93', fill: props.skinColor }),
_react2.default.createElement('rect', { x: '58.95', y: '452.06', width: '304', height: '14', fill: '#e0e0e0' }),
_react2.default.createElement('rect', { x: '107.45', y: '480.06', width: '207', height: '14', fill: '#e0e0e0' }),
_react2.default.createElement('rect', { x: '324.95', y: '234.98', width: '436.38', height: '427.61', fill: 'url(#435772a6-cef7-4b13-8b4e-baec559ce710)',
opacity: '.5' }),
_react2.default.createElement('rect', { x: '327.14', y: '238.27', width: '432', height: '421.03', fill: '#fff' }),
_react2.default.createElement('rect', { x: '371', y: '273.24', width: '344.28', height: '267.27', fill: props.primaryColor,
opacity: '.5' }),
_react2.default.createElement('path', { d: 'M632.51,558.78l1-.75,1.43-1.06h0l66.76-49.59-22.95-91.79s0-.11,0-.3c.19-2.8,1.26-24.47-10.45-20.56-11.44,3.81-7.2,19.82-6.38,22.54l.13.4,14.6,77.19-46.4,27.06-6.44-.72a57.9,57.9,0,0,0,11.11-34.69c0-28.8-19.61-52.15-43.81-52.15s-43.81,23.35-43.81,52.15c0,21.57,11,40.09,26.69,48l-16.61,8.31v.09c-4.76-1-22.82-.7-15.5,65.58a69.92,69.92,0,0,1-10.81,45.8l-4.58,6.37,114.35.7h.35S625,635.41,632.51,558.78Z',
transform: 'translate(-59.03 -118.7)', fill: 'url(#d5aea71b-2b89-434e-8ba8-1990ff8adea2)',
opacity: '.5' }),
_react2.default.createElement('path', { d: 'M559.4,543.37s-23.6-10.19-16.72,59.84a82.67,82.67,0,0,1-12.87,53.17l-1.45,2.23H550.3l16.52-17.5Z',
transform: 'translate(-59.03 -118.7)', fill: props.accentColor }),
_react2.default.createElement('path', { d: 'M677.25,418.22s0-.1,0-.29l-16.5,1.94.12.4,14.31,75.66-49.08,28.63,2,36.81,71.57-53.17Z',
transform: 'translate(-59.03 -118.7)', fill: props.accentColor }),
_react2.default.createElement('ellipse', { cx: '532.34', cy: '369.04', rx: '42.94', ry: '51.12', fill: '#ff0' }),
_react2.default.createElement('rect', { x: '523.14', y: '386.42', width: '30.67', height: '44.99', fill: props.skinColor
}),
_react2.default.createElement('path', { d: 'M591.37,543l-8.18-12.27L558.65,543V563.3S549.74,579,557,597.08c-2,26.58-7.42,61.42-7.42,61.42l90.91.67s-16.36-26.23-8.18-103.93l-2-32.72-18.4-2Z',
transform: 'translate(-59.03 -118.7)', fill: props.accentColor }),
_react2.default.createElement('polygon', { points: '571.19 403.81 573.24 405.85 575.28 438.1 572.9 439.87 571.19 403.81',
opacity: '.05' }),
_react2.default.createElement('path', { d: 'M583.19,512.28c3.2,1.13,4.59,2,8.18,2a30.52,30.52,0,0,0,20.45-7.86v-.32H583.19Z',
transform: 'translate(-59.03 -118.7)', opacity: '.05' }),
_react2.default.createElement('circle', { cx: '533.36', cy: '363.93', r: '30.67', fill: props.skinColor }),
_react2.default.createElement('ellipse', { cx: '564.04', cy: '363.93', rx: '3.07', ry: '5.11', fill: props.skinColor }),
_react2.default.createElement('circle', { cx: '505.76', cy: '354.73', fill: '#ff0' }),
_react2.default.createElement('path', { d: 'M564.78,473.43', transform: 'translate(-59.03 -118.7)', fill: '#ff0'
}),
_react2.default.createElement('polygon', { points: '506.58 354.33 506.58 355.77 559.23 355.77 559.23 357.21 505.86 357.21 506.58 354.33',
opacity: '.05' }),
_react2.default.createElement('rect', { x: '505.76', y: '330.19', width: '53.17', height: '26.58', fill: '#ff0' }),
_react2.default.createElement('path', { d: 'M667,397.77c-11.21,3.74-7.06,19.43-6.26,22.1l16.5-1.94C677.46,415.18,678.51,393.94,667,397.77Z',
transform: 'translate(-59.03 -118.7)', fill: props.skinColor }),
_react2.default.createElement(
'g',
{ opacity: '.05' },
_react2.default.createElement('path', { d: 'M551.39,658.5s5.38-34.84,7.42-61.42c-7.21-18,1.69-33.78,1.69-33.78V543l22.89-11.45-.55-.82L558.31,543V563.3s-8.9,15.75-1.69,33.78c-2,26.58-7.42,61.42-7.42,61.42l90.91.67v0Z',
transform: 'translate(-59.03 -118.7)' }),
_react2.default.createElement('polygon', { points: '534.19 424.25 554.44 401.98 552.45 401.76 533.26 422.86 534.19 424.25'
})
),
_react2.default.createElement('polygon', { points: '516.46 416.99 532.17 453.17 560.97 403.76 553.01 402.74 533.27 422.47 524.5 412.61 516.46 416.99',
opacity: '.05' }),
_react2.default.createElement('polygon', { points: '516.46 415.89 532.17 452.08 560.97 402.67 553.01 401.64 533.27 421.38 524.5 411.51 516.46 415.89',
fill: '#fff' }),
_react2.default.createElement('rect', { x: '391.95', y: '569.06', width: '304', height: '14', fill: '#e0e0e0' }),
_react2.default.createElement('rect', { x: '440.45', y: '597.06', width: '207', height: '14', fill: '#e0e0e0' })
);
};
UndrawExperts.propTypes = {
/**
* Hex color
*/
skinColor: _propTypes2.default.string,
/**
* Hex color
*/
primaryColor: _propTypes2.default.string,
/**
* Hex color
*/
accentColor: _propTypes2.default.string,
/**
* percentage
*/
height: _propTypes2.default.string,
/**
* custom class for svg
*/
class: _propTypes2.default.string
};
UndrawExperts.defaultProps = {
skinColor: '#e2bd95',
primaryColor: '#6c68fb',
hairColor: '#222',
accentColor: '#43d1a0',
height: '100%',
class: ''
};
exports.default = UndrawExperts;