react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
216 lines (206 loc) • 17.3 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 UndrawChatting = function UndrawChatting(props) {
return _react2.default.createElement(
'svg',
{ className: props.class, id: '2c32a5d1-9ebb-4e5f-946d-03caca411964', dataName: 'Layer 1', xmlns: 'http://www.w3.org/2000/svg',
xmlnsXlink: 'http://www.w3.org/1999/xlink', width: '789.99', height: '731', style: { height: props.height, width: '100%' }, viewBox: '0 0 789.99 731' },
_react2.default.createElement(
'defs',
null,
_react2.default.createElement(
'lineargradient',
{ id: 'e8bc579c-b689-4b79-8d3e-12ed6a496947', x1: '461.46',
y1: '792.95', x2: '746', y2: '121.07', gradienttransform: 'rotate(-.14 -841.696 5577.13)',
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: 'cfdf7721-0c02-41fc-8db3-2f80d97037f4', x1: '533.21',
y1: '688.58', x2: '533.21', y2: '490.28', xlinkHref: '#e8bc579c-b689-4b79-8d3e-12ed6a496947' },
_react2.default.createElement(
'lineargradient',
{ id: 'c1b02b18-c4d9-4578-b739-51fef2fdc4ab', x1: '-602.79',
y1: '427.8', x2: '-602.79', y2: '229.5', gradienttransform: 'matrix(-1 0 0 1 48 0)',
xlinkHref: '#e8bc579c-b689-4b79-8d3e-12ed6a496947' },
_react2.default.createElement(
'lineargradient',
{ id: '0b093351-16bd-4346-89bf-f32fc0d63148', x1: '376.5', y1: '427.5',
x2: '376.5', y2: '242.61', xlinkHref: '#e8bc579c-b689-4b79-8d3e-12ed6a496947' },
_react2.default.createElement('lineargradient', { id: '81bfca67-d9d1-4d9e-a40d-a000f0d65a64', x1: '3313.5',
y1: '702.5', x2: '3313.5', y2: '517.61', gradienttransform: 'matrix(-1 0 0 1 4122 0)',
xlinkHref: '#e8bc579c-b689-4b79-8d3e-12ed6a496947' })
)
)
)
),
_react2.default.createElement('path', { d: 'M756.67,128.49l-332.5.81A13.66,13.66,0,0,0,410.54,143l1.51,621.89a13.66,13.66,0,0,0,13.7,13.63l332.5-.81A13.66,13.66,0,0,0,771.88,764l-1.51-621.89A13.66,13.66,0,0,0,756.67,128.49Z',
transform: 'translate(-205 -84.5)', fill: 'url(#e8bc579c-b689-4b79-8d3e-12ed6a496947)',
opacity: '.5' }),
_react2.default.createElement('rect', { x: '416.16', y: '137.38', width: '350.11', height: '631.95', rx: '13.64',
ry: '13.64', transform: 'rotate(-.14 -34095.806 84310.093)', fill: '#fff' }),
_react2.default.createElement('path', { id: '869b38ff-715e-463a-98e7-ca2bce61d391', dataName: '<Path>',
d: 'M678.43,153a28.38,28.38,0,0,1-27.91,24.21l-120.93.29a28.38,28.38,0,0,1-28-24.07l-64.05.16a13.3,13.3,0,0,0-13.27,13.33l1.39,573.67A13.3,13.3,0,0,0,439,753.86l306-.74a13.3,13.3,0,0,0,13.27-13.33l-1.39-573.67a13.3,13.3,0,0,0-13.33-13.27Z',
transform: 'translate(-205 -84.5)', fill: props.primaryColor, opacity: '.4' }),
_react2.default.createElement('rect', { x: '548.33', y: '160.81', width: '78.02', height: '4.88', rx: '2', ry: '2',
transform: 'rotate(-.86 -5143.63 13778.86)', fill: '#dbdbdb' }),
_react2.default.createElement('circle', { cx: '642.91', cy: '161.92', r: '2.93', transform: 'rotate(-.86 -5088.324 13777.942)',
fill: '#dbdbdb' }),
_react2.default.createElement('path', { d: 'M632.07,589.13a98.85,98.85,0,1,0-154,82l.06.44a33.84,33.84,0,0,0,11.21,7.13l.13-.44c4.63,4,24.12,10.33,46.51,10.27h.49c14.18,0,29.58-2.5,43.12-9.83,0,0,.12-.26.3-.75a35.21,35.21,0,0,0,9.32-6.38q.08-.57.16-1.12A98.74,98.74,0,0,0,632.07,589.13Z',
transform: 'translate(-205 -84.5)', fill: 'url(#cfdf7721-0c02-41fc-8db3-2f80d97037f4)',
opacity: '.5' }),
_react2.default.createElement('circle', { cx: '328.21', cy: '504.64', r: '95.89', fill: '#f5f5f5' }),
_react2.default.createElement('path', { d: 'M496.58,628.57s-22.85,1.87-16.8,43.49A32.82,32.82,0,0,0,490.65,679l12.85-43.49Z',
transform: 'translate(-205 -84.5)', fill: props.skinColor }),
_react2.default.createElement('path', { d: 'M570.72,628.57s22.85,1.87,16.8,43.49A32.82,32.82,0,0,1,576.65,679L563.8,635.49Z',
transform: 'translate(-205 -84.5)', fill: props.skinColor }),
_react2.default.createElement('path', { d: 'M497.57,560.36S486.7,592,480.77,589c0,0,57.22,49.43,107.75,0,0,0-8.9-15.82-21.75-28.67Z',
transform: 'translate(-205 -84.5)', fill: '#333' }),
_react2.default.createElement('circle', { cx: '329.25', cy: '472.89', r: '42.51', fill: '#333' }),
_react2.default.createElement('path', { d: 'M570.28,628.57H496.15l-6.92,29.66s-4.06,13.73,1,19.77,52.28,19.77,87,1a38.68,38.68,0,0,0,1-24.71c-4-13.84-1-1-1-1Z',
transform: 'translate(-205 -84.5)', opacity: '.1' }),
_react2.default.createElement('path', { d: 'M571.27,628.57H497.13l-6.92,29.66s-4.06,13.73,1,19.77,52.28,19.77,87,1a38.68,38.68,0,0,0,1-24.71c-4-13.84-1-1-1-1Z',
transform: 'translate(-205 -84.5)', opacity: '.1' }),
_react2.default.createElement('path', { d: 'M570.72,628.57H496.58l-6.92,29.66s-4.06,13.73,1,19.77,52.28,19.77,87,1a38.68,38.68,0,0,0,1-24.71c-4-13.84-1-1-1-1Z',
transform: 'translate(-205 -84.5)', fill: props.primaryColor }),
_react2.default.createElement('path', { d: 'M314.32,519.46H344a0,0,0,0,1,0,0v28.7a9.85,9.85,0,0,1-9.85,9.85h-10a9.85,9.85,0,0,1-9.85-9.85v-28.7A0,0,0,0,1,314.32,519.46Z',
opacity: '.1' }),
_react2.default.createElement('path', { d: 'M314.32,518.37H344a0,0,0,0,1,0,0v28.7a9.85,9.85,0,0,1-9.85,9.85h-10a9.85,9.85,0,0,1-9.85-9.85v-28.7A0,0,0,0,1,314.32,518.37Z',
fill: props.skinColor }),
_react2.default.createElement('path', { d: 'M519.38,607.14a42.68,42.68,0,0,0,29.66.08v-3.64H519.38Z', transform: 'translate(-205 -84.5)',
opacity: '.1' }),
_react2.default.createElement('circle', { cx: '329.25', cy: '482.12', r: '42.51', fill: props.skinColor }),
_react2.default.createElement('path', { d: 'M493.62,550.47h81.06s-6.92-32.73-37.56-30.64S493.62,550.47,493.62,550.47Z',
transform: 'translate(-205 -84.5)', fill: '#333' }),
_react2.default.createElement('ellipse', { cx: '287.63', cy: '480.31', rx: '3.95', ry: '7.41', fill: props.skinColor }),
_react2.default.createElement('ellipse', { cx: '370.66', cy: '480.31', rx: '3.95', ry: '7.41', fill: props.skinColor }),
_react2.default.createElement('path', { d: 'M493.62,551.57h81.06s-6.92-32.73-37.56-30.64S493.62,551.57,493.62,551.57Z',
transform: 'translate(-205 -84.5)', opacity: '.1' }),
_react2.default.createElement('path', { d: 'M551.94,328.35a98.85,98.85,0,1,1,154,82l-.06.44A33.84,33.84,0,0,1,694.67,418l-.13-.44c-4.63,4-24.12,10.33-46.51,10.27h-.49c-14.18,0-29.58-2.5-43.12-9.83,0,0-.12-.26-.3-.75a35.21,35.21,0,0,1-9.32-6.38q-.08-.57-.16-1.12A98.74,98.74,0,0,1,551.94,328.35Z',
transform: 'translate(-205 -84.5)', fill: 'url(#c1b02b18-c4d9-4578-b739-51fef2fdc4ab)',
opacity: '.5' }),
_react2.default.createElement('circle', { cx: '445.79', cy: '243.86', r: '95.89', fill: '#f5f5f5' }),
_react2.default.createElement('path', { d: 'M613.2,364.88s-22.85,1.87-16.8,43.49a32.82,32.82,0,0,0,10.87,6.92l12.85-43.49Z',
transform: 'translate(-205 -84.5)', fill: '#be7c5e' }),
_react2.default.createElement('path', { d: 'M687.33,364.88s22.85,1.87,16.8,43.49a32.82,32.82,0,0,1-10.87,6.92L680.41,371.8Z',
transform: 'translate(-205 -84.5)', fill: '#be7c5e' }),
_react2.default.createElement('path', { d: 'M614.18,296.67s-1.76,5.12-4.25,11c-5.44,13,.77,62.71,13.78,68,14.6,6,33.8,9.76,53.75,2.49,17.33-6.32,22.68-63,10.42-76.75-1.44-1.62-2.94-3.23-4.51-4.79Z',
transform: 'translate(-205 -84.5)', fill: '#333' }),
_react2.default.createElement('circle', { cx: '445.86', cy: '209.21', r: '42.51', fill: '#333' }),
_react2.default.createElement('path', { d: 'M686.9,364.88H612.76l-6.92,29.66s-4.06,13.73,1,19.77,52.28,19.77,87,1a38.68,38.68,0,0,0,1-24.71c-4-13.84-1-1-1-1Z',
transform: 'translate(-205 -84.5)', opacity: '.1' }),
_react2.default.createElement('path', { d: 'M687.88,364.88H613.74l-6.92,29.66s-4.06,13.73,1,19.77,52.28,19.77,87,1a38.68,38.68,0,0,0,1-24.71c-4-13.84-1-1-1-1Z',
transform: 'translate(-205 -84.5)', opacity: '.1' }),
_react2.default.createElement('path', { d: 'M687.33,364.88H613.2l-6.92,29.66s-4.06,13.73,1,19.77,52.28,19.77,87,1a38.68,38.68,0,0,0,1-24.71c-4-13.84-1-1-1-1Z',
transform: 'translate(-205 -84.5)', fill: props.secondaryColor }),
_react2.default.createElement('path', { d: 'M430.93,255.78h29.66a0,0,0,0,1,0,0v28.7a9.85,9.85,0,0,1-9.85,9.85h-10a9.85,9.85,0,0,1-9.85-9.85v-28.7a0,0,0,0,1,0,0Z',
opacity: '.1' }),
_react2.default.createElement('path', { d: 'M430.93,254.68h29.66a0,0,0,0,1,0,0v28.7a9.85,9.85,0,0,1-9.85,9.85h-10a9.85,9.85,0,0,1-9.85-9.85v-28.7A0,0,0,0,1,430.93,254.68Z',
fill: '#be7c5e' }),
_react2.default.createElement('path', { d: 'M636,343.45a42.68,42.68,0,0,0,29.66.08v-3.64H636Z', transform: 'translate(-205 -84.5)',
opacity: '.1' }),
_react2.default.createElement('circle', { cx: '445.86', cy: '218.43', r: '42.51', fill: '#be7c5e' }),
_react2.default.createElement('path', { d: 'M610.23,286.79h81.06s-6.92-32.73-37.56-30.64S610.23,286.79,610.23,286.79Z',
transform: 'translate(-205 -84.5)', fill: '#333' }),
_react2.default.createElement('ellipse', { cx: '404.24', cy: '216.62', rx: '3.95', ry: '7.41', fill: '#be7c5e' }),
_react2.default.createElement('ellipse', { cx: '487.27', cy: '216.62', rx: '3.95', ry: '7.41', fill: '#be7c5e' }),
_react2.default.createElement('path', { d: 'M610.23,287.89h81.06s-6.92-32.73-37.56-30.64S610.23,287.89,610.23,287.89Z',
transform: 'translate(-205 -84.5)', opacity: '.1' }),
_react2.default.createElement('path', { d: 'M210,242.61V385.33H434.86S451.46,418,480,427.5c0,0-9.11-23.14.4-42.17H543V242.61Z',
transform: 'translate(-205 -84.5)', fill: 'url(#0b093351-16bd-4346-89bf-f32fc0d63148)',
opacity: '.5' }),
_react2.default.createElement('path', { d: 'M219,247.5v135H444s0,27,27,36c0,0-9-18,0-36h63v-135Z', transform: 'translate(-205 -84.5)',
fill: '#fff' }),
_react2.default.createElement('rect', { x: '41', y: '190', width: '180', height: '18', fill: props.primaryColor }),
_react2.default.createElement('rect', { x: '41', y: '217', width: '243', height: '18', fill: props.primaryColor }),
_react2.default.createElement('rect', { x: '41', y: '244', width: '216', height: '18', fill: props.primaryColor }),
_react2.default.createElement('path', { d: 'M975,517.61V660.33H750.15S733.55,693,705,702.5c0,0,9.11-23.14-.4-42.17H642V517.61Z',
transform: 'translate(-205 -84.5)', fill: 'url(#81bfca67-d9d1-4d9e-a40d-a000f0d65a64)',
opacity: '.5' }),
_react2.default.createElement('path', { d: 'M966,522.5v135H741s0,27-27,36c0,0,9-18,0-36H651v-135Z', transform: 'translate(-205 -84.5)',
fill: '#fff' }),
_react2.default.createElement('rect', { x: '483', y: '465', width: '180', height: '18', fill: props.primaryColor }),
_react2.default.createElement('rect', { x: '483', y: '492', width: '243', height: '18', fill: props.primaryColor }),
_react2.default.createElement('rect', { x: '483', y: '519', width: '216', height: '18', fill: props.primaryColor }),
_react2.default.createElement(
'g',
{ opacity: '.5', fill: '#47e6b1' },
_react2.default.createElement('rect', { x: '84', y: '714', width: '3', height: '17' }),
_react2.default.createElement('rect', { x: '289', y: '798.5', width: '3', height: '17', transform: 'rotate(90 230.25 662.25)'
})
),
_react2.default.createElement(
'g',
{ opacity: '.5', fill: '#47e6b1' },
_react2.default.createElement('rect', { x: '633', y: '192', width: '3', height: '17' }),
_react2.default.createElement('rect', { x: '838', y: '276.5', width: '3', height: '17', transform: 'rotate(90 779.25 140.25)'
})
),
_react2.default.createElement(
'g',
{ opacity: '.5', fill: '#47e6b1' },
_react2.default.createElement('rect', { x: '697', y: '612', width: '3', height: '17' }),
_react2.default.createElement('rect', { x: '902', y: '696.5', width: '3', height: '17', transform: 'rotate(90 843.25 560.25)'
})
),
_react2.default.createElement(
'g',
{ opacity: '.5', fill: '#47e6b1' },
_react2.default.createElement('rect', { x: '508', width: '3', height: '17' }),
_react2.default.createElement('rect', { x: '713', y: '84.5', width: '3', height: '17', transform: 'rotate(90 654.25 -51.75)'
})
),
_react2.default.createElement('path', { d: 'M463.7,796.81a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,463.7,796.81Z',
transform: 'translate(-205 -84.5)', fill: '#4d8af0', opacity: '.5' }),
_react2.default.createElement('path', { d: 'M262.9,479.46a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,257,485.3h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,262.9,479.46Z',
transform: 'translate(-205 -84.5)', fill: '#4d8af0', opacity: '.5' }),
_react2.default.createElement('path', { d: 'M371.9,566.46a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,366,572.3h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,371.9,566.46Z',
transform: 'translate(-205 -84.5)', fill: '#4d8af0', opacity: '.5' }),
_react2.default.createElement('path', { d: 'M993.9,802.46a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,988,808.3h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,993.9,802.46Z',
transform: 'translate(-205 -84.5)', fill: '#4d8af0', opacity: '.5' }),
_react2.default.createElement('circle', { cx: '6', cy: '659', r: '6', fill: props.secondaryColor, opacity: '.5' }),
_react2.default.createElement('circle', { cx: '683', cy: '64', r: '6', fill: '#4d8af0', opacity: '.5' }),
_react2.default.createElement('circle', { cx: '104', cy: '76', r: '6', fill: '#47e6b1', opacity: '.5' }),
_react2.default.createElement('circle', { cx: '689', cy: '346', r: '6', fill: props.secondaryColor, opacity: '.5' })
);
};
UndrawChatting.propTypes = {
/**
* Hex color
*/
secondaryColor: _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
};
UndrawChatting.defaultProps = {
primaryColor: '#6c68fb',
secondaryColor: '#f55f44',
skinColor: '#fda57d',
height: '100%',
class: ''
};
exports.default = UndrawChatting;