react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
176 lines (171 loc) • 12.4 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
const UndrawBrowser = props => (
<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'>
<defs>
<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'>
<stop offset='0' stopColor='gray' stopOpacity='.25' />
<stop offset='.54' stopColor='gray' stopOpacity='.12' />
<stop offset='1' stopColor='gray' stopOpacity='.1' />
</lineargradient>
<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'>
<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'>
<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'>
<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'>
<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'
/></lineargradient>
</lineargradient>
</lineargradient>
</lineargradient>
</defs>
<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)' />
<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' />
<rect x='188.98' y='240.19' width='656.27' height='26.69' transform='rotate(-18.2 125.814 673.55)'
fill='#f5f5f5' />
<rect x='256.92' y='256.11' width='656.27' height='412.61' transform='rotate(-18.02 194.198 883.26)'
fill='#fff' />
<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' />
<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' />
<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' />
<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)' />
<rect x='233.26' y='368.24' width='208.85' height='15.25' transform='rotate(-18.07 -52.176 795.466)'
fill={props.primaryColor} />
<rect x='628.9' y='239.13' width='208.85' height='15.25' transform='rotate(-18.07 343.528 666.337)'
fill={props.primaryColor} />
<rect x='628.9' y='239.13' width='208.85' height='15.25' transform='rotate(-18.07 343.528 666.337)'
opacity='.2' />
<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' />
<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' />
<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' />
<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' />
<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' />
<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' />
<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' />
<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' />
<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' />
<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' />
<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' />
<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' />
<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' />
<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' />
<rect x='582.68' y='380.22' width='94.51' height='9.15' transform='rotate(-18.07 240.108 804.383)'
fill={props.accentColor} />
<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' />
<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)' />
<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)' />
<rect x='293.98' y='554.35' width='42.68' height='42.71' transform='rotate(-18.07 -74.544 995.34)'
fill={props.primaryColor} />
<rect x='319.93' y='634.13' width='42.68' height='42.71' transform='rotate(-18.07 -48.577 1075.135)'
fill={props.primaryColor} />
<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)'
/>
<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} />
<line x1='32.71' y1='92.94' x2='32.71' y2='92.94' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' />
<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' />
<line x1='59.14' y1='174.17' x2='59.14' y2='174.17' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' />
<line x1='61.01' y1='182.38' x2='265.35' y2='115.7' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' />
<line x1='65.52' y1='156.84' x2='237.98' y2='100.56' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' opacity='.3' />
<line x1='58.45' y1='135.08' x2='230.9' y2='78.81' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' opacity='.3' />
<line x1='51.37' y1='113.32' x2='223.82' y2='57.05' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' opacity='.3' />
<line x1='44.29' y1='91.57' x2='216.75' y2='35.29' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' opacity='.3' />
<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' />
<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' />
<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)'
/>
<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} />
<line x1='842.91' y1='225.71' x2='842.91' y2='225.71' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' />
<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' />
<line x1='793.02' y1='241.99' x2='793.02' y2='241.99' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' />
<line x1='787.97' y1='243.14' x2='828.87' y2='368.88' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' />
<line x1='803.66' y1='245.92' x2='838.18' y2='352.03' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' opacity='.3' />
<line x1='817.02' y1='241.56' x2='851.54' y2='347.67' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' opacity='.3' />
<line x1='830.39' y1='237.2' x2='864.9' y2='343.31' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' opacity='.3' />
<line x1='843.75' y1='232.84' x2='878.27' y2='338.95' fill='none' stroke='#fff'
strokeLinecap='round' strokeLinejoin='round' opacity='.3' />
<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' />
<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' />
</svg>
);
UndrawBrowser.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* Hex color
*/
accentColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawBrowser.defaultProps = {
height: '100%',
primaryColor: '#6c68fb',
accentColor:'#43d1a0',
class:''
};
export default UndrawBrowser;