react-undraw-illustrations/lib/components/UndrawBrowser/UndrawBrowser.js

unDraw: MIT licensed illustrations for every project you can imagine and create...for React!

'use strict';

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 UndrawBrowser = function UndrawBrowser(props) {
    return _react2.default.createElement(
        'svg',
        { className: props.class, id: 'fd90b8a3-4437-4e53-9ed1-6a62608c98e9', dataName: 'Layer 1', xmlns: 'http://www.w3.org/2000/svg',
            xmlnsXlink: 'http://www.w3.org/1999/xlink', style: { height: props.height, width: '100%' },
            viewBox: '0 0 901.27 699.5' },
        _react2.default.createElement(
            'defs',
            null,
            _react2.default.createElement(
                'lineargradient',
                { id: '847eb8af-bbce-4f57-ba7f-3359ee06be62', x1: '551.11',
                    y1: '673.8', x2: '551.11', y2: '209.77', gradienttransform: 'rotate(-18.05 215.19 770.801)',
                    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: '2b201dea-c73f-4bea-9091-2864ae23bad1', x1: '343.1', y1: '301.6',
                    x2: '343.1', y2: '283.2', gradienttransform: 'rotate(.03 -160487.995 -9583.676)',
                    xlinkHref: '#847eb8af-bbce-4f57-ba7f-3359ee06be62' },
                _react2.default.createElement(
                    'lineargradient',
                    { id: '0aaf87fd-7158-43f3-b384-09839f3693d8', x1: '259.93',
                        y1: '498.37', x2: '259.93', y2: '451.06', gradienttransform: 'rotate(.03 -192619.7 106257.71)',
                        xlinkHref: '#847eb8af-bbce-4f57-ba7f-3359ee06be62' },
                    _react2.default.createElement(
                        'lineargradient',
                        { id: '3b303ee2-e0cd-4b1a-91b8-34e7f84aee2c', x1: '259.89',
                            y1: '582.27', x2: '259.89', y2: '534.96', gradienttransform: 'rotate(.03 -184738.065 155969.286)',
                            xlinkHref: '#847eb8af-bbce-4f57-ba7f-3359ee06be62' },
                        _react2.default.createElement(
                            'lineargradient',
                            { id: 'b94f881d-d710-4203-9d7d-b4a45cccc17d', x1: '299.41',
                                y1: '322.19', x2: '299.41', y2: '100.25', xlinkHref: '#847eb8af-bbce-4f57-ba7f-3359ee06be62' },
                            _react2.default.createElement('lineargradient', { id: '259efb3a-7d6a-4a96-8460-9c2c2a692674', x1: '981.21',
                                y1: '492.23', x2: '981.21', y2: '304.03', xlinkHref: '#847eb8af-bbce-4f57-ba7f-3359ee06be62'
                            })
                        )
                    )
                )
            )
        ),
        _react2.default.createElement('polygon', { points: '38.44 238.68 47.16 265.48 181.88 679.65 826.78 469.2 692.06 55.03 683.35 28.23 38.44 238.68',
            fill: 'url(#847eb8af-bbce-4f57-ba7f-3359ee06be62)' }),
        _react2.default.createElement('polygon', { points: '19.59 281.74 27.84 307.13 155.47 699.5 779.36 495.91 651.73 103.53 643.48 78.15 19.59 281.74',
            fill: props.primaryColor, opacity: '.7' }),
        _react2.default.createElement('rect', { x: '188.98', y: '240.19', width: '656.27', height: '26.69', transform: 'rotate(-18.2 125.814 673.55)',
            fill: '#f5f5f5' }),
        _react2.default.createElement('rect', { x: '256.92', y: '256.11', width: '656.27', height: '412.61', transform: 'rotate(-18.02 194.198 883.26)',
            fill: '#fff' }),
        _react2.default.createElement('path', { d: 'M226.79,347.88a7.62,7.62,0,1,1-9.61-4.89A7.63,7.63,0,0,1,226.79,347.88Z',
            transform: 'translate(-149.37 -100.25)', fill: '#ff5252' }),
        _react2.default.createElement('path', { d: 'M247.07,341.26a7.62,7.62,0,1,1-9.61-4.89A7.63,7.63,0,0,1,247.07,341.26Z',
            transform: 'translate(-149.37 -100.25)', fill: '#ff0' }),
        _react2.default.createElement('path', { d: 'M267.36,334.63a7.62,7.62,0,1,1-9.61-4.89A7.63,7.63,0,0,1,267.36,334.63Z',
            transform: 'translate(-149.37 -100.25)', fill: '#69f0ae' }),
        _react2.default.createElement('rect', { x: '232.73', y: '367.44', width: '210.37', height: '18.3', transform: 'rotate(-18.07 -51.935 796.181)',
            fill: 'url(#2b201dea-c73f-4bea-9091-2864ae23bad1)' }),
        _react2.default.createElement('rect', { x: '233.26', y: '368.24', width: '208.85', height: '15.25', transform: 'rotate(-18.07 -52.176 795.466)',
            fill: props.primaryColor }),
        _react2.default.createElement('rect', { x: '628.9', y: '239.13', width: '208.85', height: '15.25', transform: 'rotate(-18.07 343.528 666.337)',
            fill: props.primaryColor }),
        _react2.default.createElement('rect', { x: '628.9', y: '239.13', width: '208.85', height: '15.25', transform: 'rotate(-18.07 343.528 666.337)',
            opacity: '.2' }),
        _react2.default.createElement('rect', { x: '268.86', y: '496.55', width: '9.15', height: '9.15', transform: 'rotate(-18.07 -116.427 920.752)',
            fill: props.primaryColor, opacity: '.2' }),
        _react2.default.createElement('rect', { x: '858.69', y: '304.08', width: '9.15', height: '9.15', transform: 'rotate(-18.07 473.476 728.234)',
            fill: props.primaryColor, opacity: '.5' }),
        _react2.default.createElement('path', { d: 'M325.6,484.1a16.77,16.77,0,1,1-21.13-10.75A16.79,16.79,0,0,1,325.6,484.1Z',
            transform: 'translate(-149.37 -100.25)', fill: props.primaryColor, opacity: '.2' }),
        _react2.default.createElement('path', { d: 'M844.42,314.8A16.77,16.77,0,1,1,823.29,304,16.79,16.79,0,0,1,844.42,314.8Z',
            transform: 'translate(-149.37 -100.25)', fill: props.primaryColor, opacity: '.5' }),
        _react2.default.createElement('rect', { x: '336.31', y: '460.61', width: '94.51', height: '9.15', transform: 'rotate(-18.07 -6.283 884.78)',
            fill: props.primaryColor, opacity: '.5' }),
        _react2.default.createElement('rect', { x: '362.26', y: '540.39', width: '94.51', height: '9.15', transform: 'rotate(-18.07 19.684 964.576)',
            fill: props.primaryColor, opacity: '.8' }),
        _react2.default.createElement('rect', { x: '485.45', y: '500.19', width: '94.51', height: '9.15', transform: 'rotate(-18.07 142.877 924.393)',
            fill: props.primaryColor, opacity: '.7' }),
        _react2.default.createElement('rect', { x: '608.63', y: '460', width: '94.51', height: '9.15', transform: 'rotate(-18.07 266.075 884.178)',
            fill: props.primaryColor, opacity: '.5' }),
        _react2.default.createElement('rect', { x: '731.82', y: '419.8', width: '94.51', height: '9.15', transform: 'rotate(-18.07 389.273 843.964)',
            fill: props.primaryColor, opacity: '.2' }),
        _react2.default.createElement('rect', { x: '388.21', y: '620.17', width: '94.51', height: '9.15', transform: 'rotate(-18.07 45.65 1044.37)',
            fill: props.primaryColor, opacity: '.8' }),
        _react2.default.createElement('rect', { x: '511.4', y: '579.97', width: '94.51', height: '9.15', transform: 'rotate(-18.07 168.844 1004.188)',
            fill: props.primaryColor, opacity: '.7' }),
        _react2.default.createElement('rect', { x: '634.58', y: '539.78', width: '94.51', height: '9.15', transform: 'rotate(-18.07 292.042 963.973)',
            fill: props.primaryColor, opacity: '.5' }),
        _react2.default.createElement('rect', { x: '757.77', y: '499.58', width: '94.51', height: '9.15', transform: 'rotate(-18.07 415.24 923.759)',
            fill: props.primaryColor, opacity: '.2' }),
        _react2.default.createElement('rect', { x: '459.5', y: '420.41', width: '94.51', height: '9.15', transform: 'rotate(-18.07 116.91 844.598)',
            fill: props.primaryColor, opacity: '.2' }),
        _react2.default.createElement('rect', { x: '582.68', y: '380.22', width: '94.51', height: '9.15', transform: 'rotate(-18.07 240.108 804.383)',
            fill: props.accentColor }),
        _react2.default.createElement('rect', { x: '705.86', y: '340.02', width: '94.51', height: '9.15', transform: 'rotate(-18.07 363.338 764.174)',
            fill: props.primaryColor, opacity: '.2' }),
        _react2.default.createElement('rect', { x: '291.69', y: '552.06', width: '47.26', height: '47.29', transform: 'rotate(-18.07 -74.544 995.34)',
            fill: 'url(#0aaf87fd-7158-43f3-b384-09839f3693d8)' }),
        _react2.default.createElement('rect', { x: '317.64', y: '631.84', width: '47.26', height: '47.29', transform: 'rotate(-18.07 -48.577 1075.135)',
            fill: 'url(#3b303ee2-e0cd-4b1a-91b8-34e7f84aee2c)' }),
        _react2.default.createElement('rect', { x: '293.98', y: '554.35', width: '42.68', height: '42.71', transform: 'rotate(-18.07 -74.544 995.34)',
            fill: props.primaryColor }),
        _react2.default.createElement('rect', { x: '319.93', y: '634.13', width: '42.68', height: '42.71', transform: 'rotate(-18.07 -48.577 1075.135)',
            fill: props.primaryColor }),
        _react2.default.createElement('path', { d: 'M409.59,100.25,149.37,185.17l39.87,122.57,37.07-12.1c.14,5.4-.11,22.34-8.67,26.55,0,0,18.15.59,29.4-33.32l202.41-66.05Z',
            transform: 'translate(-149.37 -100.25)', fill: 'url(#b94f881d-d710-4203-9d7d-b4a45cccc17d)'
        }),
        _react2.default.createElement('path', { d: 'M403.91,106.36l-246.37,80.4,37.75,116,35.1-11.45c.14,5.12-.11,21.15-8.21,25.14,0,0,17.18.55,27.84-31.55L441.66,222.4Z',
            transform: 'translate(-149.37 -100.25)', fill: props.primaryColor }),
        _react2.default.createElement('line', { x1: '32.71', y1: '92.94', x2: '32.71', y2: '92.94', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round' }),
        _react2.default.createElement('line', { x1: '33.97', y1: '96.8', x2: '58.51', y2: '172.23', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round', strokeDasharray: '0 4.07' }),
        _react2.default.createElement('line', { x1: '59.14', y1: '174.17', x2: '59.14', y2: '174.17', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round' }),
        _react2.default.createElement('line', { x1: '61.01', y1: '182.38', x2: '265.35', y2: '115.7', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round' }),
        _react2.default.createElement('line', { x1: '65.52', y1: '156.84', x2: '237.98', y2: '100.56', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round', opacity: '.3' }),
        _react2.default.createElement('line', { x1: '58.45', y1: '135.08', x2: '230.9', y2: '78.81', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round', opacity: '.3' }),
        _react2.default.createElement('line', { x1: '51.37', y1: '113.32', x2: '223.82', y2: '57.05', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round', opacity: '.3' }),
        _react2.default.createElement('line', { x1: '44.29', y1: '91.57', x2: '216.75', y2: '35.29', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round', opacity: '.3' }),
        _react2.default.createElement('path', { d: 'M250.16,247.91a3.58,3.58,0,0,1-.07-1,6.15,6.15,0,0,1,5.18-5.6l.74-.15c4.84-1.21,9.81-3,13.07-6.77,5.12-6,4.53-15.11,3.65-22.49a12.85,12.85,0,0,1,.93-6.85c3.17-7,10.15-5.18,16.1-5.48a22.88,22.88,0,0,0,20.73-18.3c.74-4.2.27-8.53.87-12.75a25.23,25.23,0,0,1,8.11-15.09c4.5-4,10.33-6.28,15.93-8.23a39.6,39.6,0,0,1,13.91-2.29h.25a20.34,20.34,0,0,1,18.23,13.12c1.24,3.21,2.3,6.49,3.41,9.89,6.13,18.86,11.8,36.26,18.88,58.1-8.7,2.76-29.1,9.41-31.89,10.32l-30.43,9.93c-20.29,6.62-39.69,13.58-62.32,20.34-4.67,1.39,0,0-10.14,3.31C253.5,262.44,253.41,262.18,250.16,247.91Z',
            transform: 'translate(-149.37 -100.25)', fill: '#fff', opacity: '.2' }),
        _react2.default.createElement('rect', { x: '215.32', y: '340.78', width: '259.15', height: '6.1', transform: 'rotate(-18.2 -46.657 763.475)',
            fill: props.primaryColor, opacity: '.1' }),
        _react2.default.createElement('path', { d: 'M1050.63,467.2,997.56,304l-76.72,25,7.56,23.25c-3.38.09-14-.07-16.62-5.43,0,0-.37,11.38,20.85,18.43l41.29,126.92Z',
            transform: 'translate(-149.37 -100.25)', fill: 'url(#259efb3a-7d6a-4a96-8460-9c2c2a692674)'
        }),
        _react2.default.createElement('path', { d: 'M1045.54,462.45,996.23,310.86,925,334.12l7,21.6c-3.14.08-13-.06-15.44-5,0,0-.34,10.57,19.37,17.12l38.36,117.92Z',
            transform: 'translate(-149.37 -100.25)', fill: props.primaryColor }),
        _react2.default.createElement('line', { x1: '842.91', y1: '225.71', x2: '842.91', y2: '225.71', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round' }),
        _react2.default.createElement('line', { x1: '839.07', y1: '226.96', x2: '794.94', y2: '241.37', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round', strokeDasharray: '0 4.04' }),
        _react2.default.createElement('line', { x1: '793.02', y1: '241.99', x2: '793.02', y2: '241.99', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round' }),
        _react2.default.createElement('line', { x1: '787.97', y1: '243.14', x2: '828.87', y2: '368.88', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round' }),
        _react2.default.createElement('line', { x1: '803.66', y1: '245.92', x2: '838.18', y2: '352.03', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round', opacity: '.3' }),
        _react2.default.createElement('line', { x1: '817.02', y1: '241.56', x2: '851.54', y2: '347.67', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round', opacity: '.3' }),
        _react2.default.createElement('line', { x1: '830.39', y1: '237.2', x2: '864.9', y2: '343.31', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round', opacity: '.3' }),
        _react2.default.createElement('line', { x1: '843.75', y1: '232.84', x2: '878.27', y2: '338.95', fill: 'none', stroke: '#fff',
            strokeLinecap: 'round', strokeLinejoin: 'round', opacity: '.3' }),
        _react2.default.createElement('path', { d: 'M958.65,367.88a2.19,2.19,0,0,1,.59,0,3.78,3.78,0,0,1,3.44,3.19c0,.19.06.34.09.45.74,3,1.83,6,4.15,8,3.66,3.15,9.28,2.79,13.81,2.24a7.87,7.87,0,0,1,4.21.57c4.28,2,3.18,6.25,3.36,9.9A14.05,14.05,0,0,0,999.53,405c2.58.46,5.24.16,7.83.54a15.47,15.47,0,0,1,9.27,5c2.46,2.77,3.86,6.35,5.05,9.8a24.4,24.4,0,0,1,1.4,8.56V429a12.53,12.53,0,0,1-8.06,11.22c-2,.76-4,1.42-6.08,2.1L973.26,454c-1.69-5.36-5.77-17.91-6.33-19.62-2.13-6.54-4-12.18-6.09-18.73-4.06-12.48-8.33-24.42-12.47-38.34-.85-2.87,0,0-2-6.24C949.73,369.93,949.89,369.88,958.65,367.88Z',
            transform: 'translate(-149.37 -100.25)', fill: '#fff', opacity: '.2' }),
        _react2.default.createElement('rect', { x: '885.84', y: '349.89', width: '7.62', height: '158.64', transform: 'rotate(-18.07 499.894 848.787)',
            fill: props.primaryColor, opacity: '.1' })
    );
};

UndrawBrowser.propTypes = {
    /**
    * 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
};

UndrawBrowser.defaultProps = {
    height: '100%',
    primaryColor: '#6c68fb',
    accentColor: '#43d1a0',
    class: ''
};

exports.default = UndrawBrowser;