Skip to content

Commit 863e779

Browse files
leorossileorossi
committed
Add missing icons for trafficante
Signed-off-by: Leonardo Rossi <[email protected]>
1 parent 5e1f677 commit 863e779

File tree

5 files changed

+451
-0
lines changed

5 files changed

+451
-0
lines changed

‎src/components/icons/CacheRecommendationIcon.jsx

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import * as React from 'react'
2+
import PropTypes from 'prop-types'
3+
import styles from './Icons.module.css'
4+
import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5+
6+
const CacheRecommendationIcon = ({
7+
color = MAIN_DARK_BLUE,
8+
size = MEDIUM,
9+
disabled = false,
10+
inactive = false
11+
}) => {
12+
let className = `${styles.svgClassName} ` + styles[`${color}`]
13+
if (disabled) {
14+
className += ` ${styles.iconDisabled}`
15+
}
16+
if (inactive) {
17+
className += ` ${styles.iconInactive}`
18+
}
19+
let icon = <></>
20+
21+
switch (size) {
22+
case SMALL:
23+
icon = (
24+
<svg
25+
width={16}
26+
height={16}
27+
viewBox='0 0 16 16'
28+
fill='none'
29+
xmlns='http://www.w3.org/2000/svg'
30+
className={className}
31+
>
32+
<path d='M12 4.04007C12 2.91337 9.76142 2 7 2C4.23858 2 2 2.91337 2 4.04007C2 4.83891 3.12531 5.5305 4.76442 5.86536' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33+
<path d='M2 7.16504C2 7.98832 3.1955 8.69774 4.91667 9.0201' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34+
<path d='M2 4.04004V10.145C2 10.9683 3.1955 11.6777 4.91667 12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
35+
<path d='M10.1379 7.5C10.3586 8.3 11.7011 9.5 12.3447 10V13.25C12.3447 13.65 11.2413 13.9167 10.6896 14H8.2069C7.10348 14 7.01153 13.3333 7.10348 13C6.91958 12.9167 6.55177 12.7 6.55177 12.5C6.55177 12.3 6.73568 12.0833 6.82763 12C6.55177 12 6.00006 11.9 6.00006 11.5C6.00006 11.1 6.36787 10.8333 6.55177 10.75C6.36787 10.75 6.00006 10.6 6.00006 10C6.00006 9.4 6.55177 9.25 6.82763 9.25H9.03447L8.48276 7.25C8.39081 6.83333 8.37242 6 9.03447 6C9.86203 6 9.86203 6.5 10.1379 7.5Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
36+
<path d='M12.3449 9.75H14V13.75H12.3449V9.75Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
37+
</svg>
38+
)
39+
break
40+
case MEDIUM:
41+
icon = (
42+
<svg
43+
width={24}
44+
height={24}
45+
viewBox='0 0 24 24'
46+
fill='none'
47+
xmlns='http://www.w3.org/2000/svg'
48+
className={className}
49+
>
50+
<path d='M18.0002 6.0601C18.0002 4.37006 14.6424 3 10.5002 3C6.35811 3 3.00024 4.37006 3.00024 6.0601C3.00024 7.25836 4.68821 8.29576 7.14688 8.79804' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51+
<path d='M3.00024 10.7471C3.00024 11.982 4.79349 13.0461 7.37524 13.5297' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
52+
<path d='M3.00024 6.05957V15.217C3.00024 16.4519 4.79349 17.516 7.37524 17.9996' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
53+
<path d='M15.2071 11.25C15.5381 12.45 17.5518 14.25 18.5173 15V19.875C18.5173 20.475 16.8622 20.875 16.0346 21H12.3106C10.6555 21 10.5175 20 10.6555 19.5C10.3796 19.375 9.8279 19.05 9.8279 18.75C9.8279 18.45 10.1038 18.125 10.2417 18C9.8279 18 9.00034 17.85 9.00034 17.25C9.00034 16.65 9.55205 16.25 9.8279 16.125C9.55205 16.125 9.00034 15.9 9.00034 15C9.00034 14.1 9.8279 13.875 10.2417 13.875H13.5519L12.7244 10.875C12.5865 10.25 12.5589 9 13.5519 9C14.7933 9 14.7933 9.75 15.2071 11.25Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
54+
<path d='M18.5175 14.625H21.0002V20.625H18.5175V14.625Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
55+
</svg>
56+
)
57+
break
58+
case LARGE:
59+
icon = (
60+
<svg
61+
width={40}
62+
height={40}
63+
viewBox='0 0 40 40'
64+
fill='none'
65+
xmlns='http://www.w3.org/2000/svg'
66+
className={className}
67+
>
68+
<path d='M30.0002 10.1002C30.0002 7.28343 24.4038 5 17.5002 5C10.5967 5 5.00024 7.28343 5.00024 10.1002C5.00024 12.0973 7.81352 13.8263 11.9113 14.6634' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
69+
<path d='M5.00024 17.9121C5.00024 19.9703 7.98898 21.7439 12.2919 22.5498' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
70+
<path d='M5.00024 10.0996V25.3619C5.00024 27.4201 7.98898 29.1937 12.2919 29.9996' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
71+
<path d='M25.345 18.75C25.8967 20.75 29.2529 23.75 30.8621 25V33.125C30.8621 34.125 28.1035 34.7917 26.7242 35H20.5175C17.7589 35 17.5291 33.3333 17.7589 32.5C17.2992 32.2917 16.3797 31.75 16.3797 31.25C16.3797 30.75 16.8394 30.2083 17.0693 30C16.3797 30 15.0004 29.75 15.0004 28.75C15.0004 27.75 15.9199 27.0833 16.3797 26.875C15.9199 26.875 15.0004 26.5 15.0004 25C15.0004 23.5 16.3797 23.125 17.0693 23.125H22.5864L21.2071 18.125C20.9773 17.0833 20.9313 15 22.5864 15C24.6553 15 24.6553 16.25 25.345 18.75Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
72+
<path d='M30.8624 24.375H35.0002V34.375H30.8624V24.375Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
73+
</svg>
74+
)
75+
break
76+
default:
77+
break
78+
}
79+
return icon
80+
}
81+
82+
CacheRecommendationIcon.propTypes = {
83+
/**
84+
* color of text, icon and borders
85+
*/
86+
color: PropTypes.oneOf(COLORS_ICON),
87+
/**
88+
* Size
89+
*/
90+
size: PropTypes.oneOf(SIZES),
91+
/**
92+
* disabled
93+
*/
94+
disabled: PropTypes.bool,
95+
/**
96+
* inactive
97+
*/
98+
inactive: PropTypes.bool
99+
}
100+
101+
export default CacheRecommendationIcon

‎src/components/icons/RouteEditIcon.jsx

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import * as React from 'react'
2+
import PropTypes from 'prop-types'
3+
import styles from './Icons.module.css'
4+
import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5+
6+
const RouteEditIcon = ({
7+
color = MAIN_DARK_BLUE,
8+
size = MEDIUM,
9+
disabled = false,
10+
inactive = false
11+
}) => {
12+
let className = `${styles.svgClassName} ` + styles[`${color}`]
13+
if (disabled) {
14+
className += ` ${styles.iconDisabled}`
15+
}
16+
if (inactive) {
17+
className += ` ${styles.iconInactive}`
18+
}
19+
let icon = <></>
20+
21+
switch (size) {
22+
case SMALL:
23+
icon = (
24+
<svg
25+
width={16}
26+
height={16}
27+
viewBox='0 0 16 16'
28+
fill='none'
29+
xmlns='http://www.w3.org/2000/svg'
30+
className={className}
31+
>
32+
<circle cx='3' cy='5' r='1' transform='rotate(90 3 5)' stroke='none' />
33+
<circle cx='13' cy='3' r='1' transform='rotate(90 13 3)' stroke='none' />
34+
<circle cx='13' cy='13' r='1' transform='rotate(90 13 13)' stroke='none' />
35+
<path d='M12 3L10 3L7.5 3C6.94772 3 6.5 3.44772 6.5 4V4C6.5 4.55228 6.05228 5 5.5 5L4 5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
36+
<path d='M12 13L9.87502 13M4.5 5L6.25002 5C7.07844 5 7.75002 5.67157 7.75002 6.5L7.75002 7.74998C7.75002 7.88806 7.63808 8 7.5 8V8L7.00001 8C6.17159 8 5.50001 7.32843 5.50001 6.5V6.5C5.50001 5.67157 4.82843 5 4 5V5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
37+
<rect x='11.5024' y='6.49741' width='2.11765' height='7.76471' transform='rotate(45 11.5024 6.49741)' stroke='none' strokeLinejoin='round' />
38+
<path d='M7.50961 13.4853L6.01221 11.9879L5.26351 14.234L7.50961 13.4853Z' stroke='none' strokeLinejoin='round' />
39+
<path d='M12.2929 5.70711C12.6834 5.31658 13.3166 5.31658 13.7071 5.70711L13.7903 5.7903C14.1808 6.18082 14.1808 6.81399 13.7903 7.20451L13 7.99481L11.5026 6.4974L12.2929 5.70711Z' stroke='none' />
40+
</svg>
41+
)
42+
break
43+
case MEDIUM:
44+
icon = (
45+
<svg
46+
width={24}
47+
height={24}
48+
viewBox='0 0 24 24'
49+
fill='none'
50+
xmlns='http://www.w3.org/2000/svg'
51+
className={className}
52+
>
53+
<circle cx='4.5' cy='7.5' r='1.5' transform='rotate(90 4.5 7.5)' stroke='none' strokeWidth={1.5} />
54+
<circle cx='19.5' cy='4.5' r='1.5' transform='rotate(90 19.5 4.5)' stroke='none' strokeWidth={1.5} />
55+
<circle cx='19.5' cy='19.5' r='1.5' transform='rotate(90 19.5 19.5)' stroke='none' strokeWidth={1.5} />
56+
<path d='M18 4.5L15 4.5L10.75 4.5C10.1977 4.5 9.75 4.94772 9.75 5.5L9.75 6.5C9.75 7.05228 9.30228 7.5 8.75 7.5L6 7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
57+
<path d='M18 19.5L14.8125 19.5M6.75 7.5L9.62502 7.5C10.7296 7.5 11.625 8.39543 11.625 9.5L11.625 11.625C11.625 11.8321 11.4571 12 11.25 12V12L10.25 12C9.14545 12 8.25002 11.1046 8.25001 10L8.25001 9.49999C8.25001 8.39543 7.35458 7.5 6.25002 7.5L6 7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
58+
<rect x='17.2539' y='9.74609' width='3.17647' height='11.6471' transform='rotate(45 17.2539 9.74609)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
59+
<path d='M11.2642 20.2279L9.01807 17.9818L7.89501 21.351L11.2642 20.2279Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
60+
<path d='M18.7929 8.20711C19.1834 7.81658 19.8166 7.81658 20.2071 8.20711L21.039 9.039C21.4295 9.42952 21.4295 10.0627 21.039 10.4532L19.5 11.9922L17.2539 9.7461L18.7929 8.20711Z' stroke='none' strokeWidth={1.5} />
61+
</svg>
62+
)
63+
break
64+
case LARGE:
65+
icon = (
66+
<svg
67+
width={40}
68+
height={40}
69+
viewBox='0 0 40 40'
70+
fill='none'
71+
xmlns='http://www.w3.org/2000/svg'
72+
className={className}
73+
>
74+
<circle cx='7.5' cy='12.5' r='2.5' transform='rotate(90 7.5 12.5)' stroke='none' strokeWidth={2} />
75+
<circle cx='32.5' cy='7.5' r='2.5' transform='rotate(90 32.5 7.5)' stroke='none' strokeWidth={2} />
76+
<circle cx='32.5' cy='32.5' r='2.5' transform='rotate(90 32.5 32.5)' stroke='none' strokeWidth={2} />
77+
<path d='M30 7.5L25 7.5L17.25 7.5C16.6977 7.5 16.25 7.94772 16.25 8.5L16.25 11.5C16.25 12.0523 15.8023 12.5 15.25 12.5L10 12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
78+
<path d='M30 32.5L24.6875 32.5M11.25 12.5L17.375 12.5C18.4796 12.5 19.375 13.3954 19.375 14.5L19.375 19.375C19.375 19.7202 19.0952 20 18.75 20V20L15.75 20C14.6455 20 13.75 19.1046 13.75 18L13.75 14.5C13.75 13.3954 12.8546 12.5 11.75 12.5L10 12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
79+
<rect x='28.7563' y='16.2435' width='5.29412' height='19.4118' transform='rotate(45 28.7563 16.2435)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
80+
<path d='M18.7738 33.7132L15.0303 29.9697L13.1585 35.585L18.7738 33.7132Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
81+
<path d='M31.7929 13.2071C32.1834 12.8166 32.8166 12.8166 33.2071 13.2071L35.5364 15.5364C35.9269 15.9269 35.9269 16.5601 35.5364 16.9506L32.5 19.987L28.7565 16.2435L31.7929 13.2071Z' stroke='none' strokeWidth={2} />
82+
</svg>
83+
)
84+
break
85+
default:
86+
break
87+
}
88+
return icon
89+
}
90+
91+
RouteEditIcon.propTypes = {
92+
/**
93+
* color of text, icon and borders
94+
*/
95+
color: PropTypes.oneOf(COLORS_ICON),
96+
/**
97+
* Size
98+
*/
99+
size: PropTypes.oneOf(SIZES),
100+
/**
101+
* disabled
102+
*/
103+
disabled: PropTypes.bool,
104+
/**
105+
* inactive
106+
*/
107+
inactive: PropTypes.bool
108+
}
109+
110+
export default RouteEditIcon

‎src/components/icons/RouteHistoryIcon.jsx

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import * as React from 'react'
2+
import PropTypes from 'prop-types'
3+
import styles from './Icons.module.css'
4+
import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5+
6+
const RouteHistoryIcon = ({
7+
color = MAIN_DARK_BLUE,
8+
size = MEDIUM,
9+
disabled = false,
10+
inactive = false
11+
}) => {
12+
let className = `${styles.svgClassName} ` + styles[`${color}`]
13+
if (disabled) {
14+
className += ` ${styles.iconDisabled}`
15+
}
16+
if (inactive) {
17+
className += ` ${styles.iconInactive}`
18+
}
19+
let icon = <></>
20+
21+
switch (size) {
22+
case SMALL:
23+
icon = (
24+
<svg
25+
width={16}
26+
height={16}
27+
viewBox='0 0 16 16'
28+
fill='none'
29+
xmlns='http://www.w3.org/2000/svg'
30+
className={className}
31+
>
32+
<rect x='6' y='7.33334' width='8' height='6.66667' rx='1' stroke='none' />
33+
<path d='M6 9.33334H14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34+
<line x1='7.5' y1='8.16666' x2='7.5' y2='6.49999' stroke='none' strokeLinecap='round' />
35+
<line x1='12.1665' y1='8.16666' x2='12.1665' y2='6.49999' stroke='none' strokeLinecap='round' />
36+
<rect x='7.3335' y='10' width='1.33333' height='1.33333' rx='0.5' fill='none' />
37+
<rect x='7.3335' y='12' width='1.33333' height='1.33333' rx='0.5' fill='none' />
38+
<rect x='9.3335' y='10' width='1.33333' height='1.33333' rx='0.5' fill='none' />
39+
<rect x='11.3335' y='10' width='1.33333' height='1.33333' rx='0.5' fill='none' />
40+
<rect x='9.3335' y='12' width='1.33333' height='1.33333' rx='0.5' fill='none' />
41+
<rect x='11.3335' y='12' width='1.33333' height='1.33333' rx='0.5' fill='none' />
42+
<circle cx='3' cy='5' r='1' transform='rotate(90 3 5)' stroke='none' />
43+
<circle cx='13' cy='3' r='1' transform='rotate(90 13 3)' stroke='none' />
44+
<path d='M12 3L10 3L7.5 3C6.94772 3 6.5 3.44772 6.5 4V4C6.5 4.55228 6.05228 5 5.5 5L4 5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
45+
<path d='M10 6.5V6.5C10 5.67157 9.32843 5 8.5 5L4.5 5M5 8L5 6C5 5.44771 4.55229 5 4 5V5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
46+
</svg>
47+
)
48+
break
49+
case MEDIUM:
50+
icon = (
51+
<svg
52+
width={24}
53+
height={24}
54+
viewBox='0 0 24 24'
55+
fill='none'
56+
xmlns='http://www.w3.org/2000/svg'
57+
className={className}
58+
>
59+
<rect x='9' y='11' width='12' height='10' rx='1' stroke='none' strokeWidth={1.5} />
60+
<path d='M9 14H21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
61+
<line x1='11.25' y1='12.25' x2='11.25' y2='9.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
62+
<line x1='18.25' y1='12.25' x2='18.25' y2='9.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
63+
<rect x='11' y='15' width='2' height='2' rx='0.5' fill='none' />
64+
<rect x='11' y='18' width='2' height='2' rx='0.5' fill='none' />
65+
<rect x='14' y='15' width='2' height='2' rx='0.5' fill='none' />
66+
<rect x='17' y='15' width='2' height='2' rx='0.5' fill='none' />
67+
<rect x='14' y='18' width='2' height='2' rx='0.5' fill='none' />
68+
<rect x='17' y='18' width='2' height='2' rx='0.5' fill='none' />
69+
<circle cx='4.5' cy='7.5' r='1.5' transform='rotate(90 4.5 7.5)' stroke='none' strokeWidth={1.5} />
70+
<circle cx='19.5' cy='4.5' r='1.5' transform='rotate(90 19.5 4.5)' stroke='none' strokeWidth={1.5} />
71+
<path d='M18 4.5L15 4.5L10.75 4.5C10.1977 4.5 9.75 4.94772 9.75 5.5L9.75 6.5C9.75 7.05228 9.30228 7.5 8.75 7.5L6 7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
72+
<path d='M15 9.75L15 9.5C15 8.39543 14.1046 7.5 13 7.5L6.75 7.5M7.5 12L7.5 9C7.5 8.17157 6.82843 7.49999 6 7.49999V7.49999' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
73+
</svg>
74+
)
75+
break
76+
case LARGE:
77+
icon = (
78+
<svg
79+
width={40}
80+
height={40}
81+
viewBox='0 0 40 40'
82+
fill='none'
83+
xmlns='http://www.w3.org/2000/svg'
84+
className={className}
85+
>
86+
<rect x='15' y='18.3333' width='20' height='16.6667' rx='1' stroke='none' strokeWidth={2} />
87+
<path d='M15 23.3333H35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
88+
<line x1='19' y1='20.6667' x2='19' y2='16' stroke='none' strokeWidth={2} strokeLinecap='round' />
89+
<line x1='30.6665' y1='20.6667' x2='30.6665' y2='16' stroke='none' strokeWidth={2} strokeLinecap='round' />
90+
<rect x='18.3335' y='25' width='3.33333' height='3.33333' rx='0.5' fill='none' />
91+
<rect x='18.3335' y='30' width='3.33333' height='3.33333' rx='0.5' fill='none' />
92+
<rect x='23.3335' y='25' width='3.33333' height='3.33333' rx='0.5' fill='none' />
93+
<rect x='28.3335' y='25' width='3.33333' height='3.33333' rx='0.5' fill='none' />
94+
<rect x='23.3335' y='30' width='3.33333' height='3.33333' rx='0.5' fill='none' />
95+
<rect x='28.3335' y='30' width='3.33333' height='3.33333' rx='0.5' fill='none' />
96+
<circle cx='7.5' cy='12.5' r='2.5' transform='rotate(90 7.5 12.5)' stroke='none' strokeWidth={2} />
97+
<circle cx='32.5' cy='7.5' r='2.5' transform='rotate(90 32.5 7.5)' stroke='none' strokeWidth={2} />
98+
<path d='M30 7.5L25 7.5L17.25 7.5C16.6977 7.5 16.25 7.94772 16.25 8.5L16.25 11.5C16.25 12.0523 15.8023 12.5 15.25 12.5L10 12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
99+
<path d='M25 16.25L25 14.5C25 13.3954 24.1046 12.5 23 12.5L11.25 12.5M12.5 20L12.5 14.5C12.5 13.3954 11.6046 12.5 10.5 12.5L10 12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
100+
</svg>
101+
)
102+
break
103+
default:
104+
break
105+
}
106+
return icon
107+
}
108+
109+
RouteHistoryIcon.propTypes = {
110+
/**
111+
* color of text, icon and borders
112+
*/
113+
color: PropTypes.oneOf(COLORS_ICON),
114+
/**
115+
* Size
116+
*/
117+
size: PropTypes.oneOf(SIZES),
118+
/**
119+
* disabled
120+
*/
121+
disabled: PropTypes.bool,
122+
/**
123+
* inactive
124+
*/
125+
inactive: PropTypes.bool
126+
}
127+
128+
export default RouteHistoryIcon

0 commit comments

Comments
 (0)