Skip to content

Commit f036729

Browse files
committed
Add Flamegraphs icons
Signed-off-by: Leonardo Rossi <[email protected]>
1 parent c3e2c05 commit f036729

File tree

4 files changed

+239
-0
lines changed

4 files changed

+239
-0
lines changed
Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import * as React from 'react'
2+
import styles from './Icons.module.css'
3+
import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4+
5+
const FlamegraphsIcon = ({
6+
color = MAIN_DARK_BLUE,
7+
size = MEDIUM,
8+
disabled = false,
9+
inactive = false
10+
}) => {
11+
let className = `${styles.svgClassName} ` + styles[`${color}`]
12+
if (disabled) {
13+
className += ` ${styles.iconDisabled}`
14+
}
15+
if (inactive) {
16+
className += ` ${styles.iconInactive}`
17+
}
18+
let icon = <></>
19+
20+
switch (size) {
21+
case SMALL:
22+
icon = (
23+
<svg
24+
width={16}
25+
height={16}
26+
viewBox='0 0 16 16'
27+
fill='none'
28+
xmlns='http://www.w3.org/2000/svg'
29+
className={className}
30+
>
31+
<rect x='2' y='11' width='12' height='3' stroke='none' strokeLinejoin='round' />
32+
<rect x='4' y='6' width='8' height='3' stroke='none' strokeLinejoin='round' />
33+
<rect x='6' y='2' width='4' height='2' stroke='none' strokeLinejoin='round' />
34+
</svg>
35+
)
36+
break
37+
case MEDIUM:
38+
icon = (
39+
<svg
40+
width={24}
41+
height={24}
42+
viewBox='0 0 24 24'
43+
fill='none'
44+
xmlns='http://www.w3.org/2000/svg'
45+
className={className}
46+
>
47+
<rect x='3' y='16.5' width='18' height='4.5' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
48+
<rect x='6' y='9' width='12' height='4.5' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
49+
<rect x='9' y='3' width='6' height='3' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
50+
</svg>
51+
)
52+
break
53+
case LARGE:
54+
icon = (
55+
<svg
56+
width={40}
57+
height={40}
58+
viewBox='0 0 40 40'
59+
fill='none'
60+
xmlns='http://www.w3.org/2000/svg'
61+
className={className}
62+
>
63+
<rect x='5' y='27.5' width='30' height='7.5' stroke='none' strokeWidth={2} strokeLinejoin='round' />
64+
<rect x='10' y='15' width='20' height='7.5' stroke='none' strokeWidth={2} strokeLinejoin='round' />
65+
<rect x='15' y='5' width='10' height='5' stroke='none' strokeWidth={2} strokeLinejoin='round' />
66+
</svg>
67+
)
68+
break
69+
70+
default:
71+
break
72+
}
73+
return icon
74+
}
75+
76+
export default FlamegraphsIcon
Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import * as React from 'react'
2+
import styles from './Icons.module.css'
3+
import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4+
5+
const GearAlertIcon = ({
6+
color = MAIN_DARK_BLUE,
7+
size = MEDIUM,
8+
disabled = false,
9+
inactive = false
10+
}) => {
11+
let className = `${styles.svgClassName} ` + styles[`${color}`]
12+
if (disabled) {
13+
className += ` ${styles.iconDisabled}`
14+
}
15+
if (inactive) {
16+
className += ` ${styles.iconInactive}`
17+
}
18+
let icon = <></>
19+
20+
switch (size) {
21+
case SMALL:
22+
icon = (
23+
<svg
24+
width={16}
25+
height={16}
26+
viewBox='0 0 16 16'
27+
fill='none'
28+
xmlns='http://www.w3.org/2000/svg'
29+
className={className}
30+
>
31+
<path d='M9.21956 2.34803V3.1061C9.21956 3.25037 9.31095 3.38072 9.44868 3.43134L10.4321 3.79709C10.5659 3.84645 10.7178 3.81228 10.8156 3.7085L11.288 3.20987C11.427 3.06307 11.6638 3.0618 11.8041 3.20861L12.9445 4.3957C13.072 4.52858 13.0733 4.73487 12.9484 4.86901L12.3409 5.52457C12.2443 5.62835 12.2212 5.77895 12.2817 5.9055L12.6936 6.77874C12.7515 6.9015 12.8776 6.98123 13.0153 6.98123H13.646C13.8417 6.98123 14 7.13689 14 7.32925V8.79477C14 8.98713 13.8417 9.1428 13.646 9.1428H12.9832C12.83 9.1428 12.6936 9.24024 12.6459 9.38325L12.3113 10.3919C12.2714 10.5109 12.2997 10.6412 12.3859 10.7336L12.9304 11.3246C13.063 11.4689 13.0501 11.6929 12.9008 11.8207L11.6458 12.9002C11.5017 13.0243 11.2828 13.0129 11.1528 12.8749L10.7152 12.4117C10.62 12.3105 10.472 12.2738 10.3394 12.3193L9.42551 12.6332C9.28263 12.6826 9.18739 12.8142 9.18739 12.9622V13.652C9.18739 13.8443 9.02907 14 8.83342 14H7.16529C6.96964 14 6.81133 13.8443 6.81133 13.652V12.9622C6.81133 12.8142 6.71608 12.6826 6.57321 12.6332L5.65934 12.3193C5.52676 12.2738 5.37874 12.3092 5.28349 12.4117L4.84587 12.8749C4.71586 13.0129 4.49705 13.0243 4.35289 12.9002L3.09793 11.8207C2.94862 11.6929 2.93575 11.4689 3.06833 11.3246L3.61279 10.7336C3.69774 10.6412 3.72605 10.5109 3.68744 10.3919L3.35278 9.38325C3.30516 9.24024 3.16872 9.1428 3.01555 9.1428H2.35396C2.15832 9.1428 2 8.98713 2 8.79477V7.32925C2 7.13689 2.15832 6.98123 2.35396 6.98123H2.98466C3.12239 6.98123 3.24853 6.90276 3.30645 6.77874L3.71833 5.9055C3.77883 5.77768 3.75437 5.62835 3.65912 5.52457L3.05159 4.86901C2.92674 4.73487 2.92803 4.52731 3.05545 4.3957L4.19586 3.20861C4.33616 3.06307 4.57299 3.06307 4.712 3.20987L5.18438 3.7085C5.28221 3.81228 5.43409 3.84645 5.56795 3.79709L6.55132 3.43134C6.68905 3.38072 6.78044 3.25037 6.78044 3.1061V2.34803C6.78044 2.15566 6.93875 2 7.1344 2H8.8656C9.06125 2 9.21956 2.15566 9.21956 2.34803Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
32+
<path d='M8 6V9' stroke='none' strokeLinecap='round' />
33+
<circle cx='8' cy='10.5' r='0.5' fill='white' />
34+
</svg>
35+
)
36+
break
37+
case MEDIUM:
38+
icon = (
39+
<svg
40+
width={24}
41+
height={24}
42+
viewBox='0 0 24 24'
43+
fill='none'
44+
xmlns='http://www.w3.org/2000/svg'
45+
className={className}
46+
>
47+
<path d='M13.8293 3.52204V4.65914C13.8293 4.87555 13.9664 5.07108 14.173 5.14702L15.6481 5.69563C15.8489 5.76967 16.0767 5.71841 16.2234 5.56275L16.932 4.81481C17.1405 4.5946 17.4958 4.5927 17.7062 4.81291L19.4168 6.59355C19.608 6.79287 19.6099 7.1023 19.4226 7.30352L18.5113 8.28686C18.3665 8.44252 18.3318 8.66842 18.4225 8.85826L19.0403 10.1681C19.1272 10.3522 19.3164 10.4718 19.523 10.4718H20.4691C20.7625 10.4718 21 10.7053 21 10.9939V13.1922C21 13.4807 20.7625 13.7142 20.4691 13.7142H19.4747C19.245 13.7142 19.0403 13.8604 18.9689 14.0749L18.4669 15.5879C18.4071 15.7663 18.4495 15.9618 18.5789 16.1004L19.3956 16.9869C19.5944 17.2033 19.5751 17.5393 19.3512 17.7311L17.4687 19.3503C17.2525 19.5364 16.9243 19.5193 16.7293 19.3124L16.0728 18.6176C15.93 18.4657 15.7079 18.4107 15.5091 18.479L14.1383 18.9498C13.924 19.0238 13.7811 19.2213 13.7811 19.4434V20.478C13.7811 20.7665 13.5436 21 13.2501 21H10.7479C10.4545 21 10.217 20.7665 10.217 20.478V19.4434C10.217 19.2213 10.0741 19.0238 9.85981 18.9498L8.48901 18.479C8.29014 18.4107 8.06811 18.4638 7.92524 18.6176L7.2688 19.3124C7.0738 19.5193 6.74558 19.5364 6.52934 19.3503L4.64689 17.7311C4.42293 17.5393 4.40363 17.2033 4.60249 16.9869L5.41918 16.1004C5.54661 15.9618 5.58908 15.7663 5.53116 15.5879L5.02918 14.0749C4.95774 13.8604 4.75308 13.7142 4.52333 13.7142H3.53094C3.23748 13.7142 3 13.4807 3 13.1922V10.9939C3 10.7053 3.23748 10.4718 3.53094 10.4718H4.47699C4.68358 10.4718 4.87279 10.3541 4.95967 10.1681L5.5775 8.85826C5.66824 8.66653 5.63156 8.44252 5.48868 8.28686L4.57739 7.30352C4.39011 7.1023 4.39204 6.79097 4.58318 6.59355L6.29379 4.81291C6.50424 4.5946 6.85949 4.5946 7.068 4.81481L7.77657 5.56275C7.92331 5.71841 8.15113 5.76967 8.35192 5.69563L9.82699 5.14702C10.0336 5.07108 10.1707 4.87555 10.1707 4.65914V3.52204C10.1707 3.2335 10.4081 3 10.7016 3H13.2984C13.5919 3 13.8293 3.2335 13.8293 3.52204Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
48+
<path d='M12 9V13.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
49+
<circle cx='12' cy='15.75' r='0.75' fill='white' />
50+
</svg>
51+
)
52+
break
53+
case LARGE:
54+
icon = (
55+
<svg
56+
width={40}
57+
height={40}
58+
viewBox='0 0 40 40'
59+
fill='none'
60+
xmlns='http://www.w3.org/2000/svg'
61+
className={className}
62+
>
63+
<path d='M23.0489 5.87007V7.76524C23.0489 8.12592 23.2774 8.4518 23.6217 8.57836L26.0801 9.49272C26.4148 9.61612 26.7945 9.53069 27.039 9.27125L28.22 8.02468C28.5675 7.65767 29.1596 7.6545 29.5104 8.02151L32.3614 10.9892C32.6799 11.3215 32.6831 11.8372 32.371 12.1725L30.8522 13.8114C30.6109 14.0709 30.5529 14.4474 30.7042 14.7638L31.7339 16.9468C31.8787 17.2537 32.194 17.4531 32.5383 17.4531H34.1151C34.6042 17.4531 35 17.8422 35 18.3231V21.9869C35 22.4678 34.6042 22.857 34.1151 22.857H32.4579C32.075 22.857 31.7339 23.1006 31.6148 23.4581L30.7782 25.9798C30.6784 26.2772 30.7492 26.603 30.9648 26.834L32.326 28.3115C32.6574 28.6722 32.6252 29.2322 32.252 29.5518L29.1146 32.2506C28.7542 32.5606 28.2071 32.5322 27.8821 32.1873L26.788 31.0293C26.5499 30.7762 26.1799 30.6845 25.8484 30.7984L23.5638 31.583C23.2066 31.7064 22.9685 32.0354 22.9685 32.4056V34.1299C22.9685 34.6108 22.5727 35 22.0836 35H17.9132C17.4241 35 17.0283 34.6108 17.0283 34.1299V32.4056C17.0283 32.0354 16.7902 31.7064 16.433 31.583L14.1483 30.7984C13.8169 30.6845 13.4469 30.773 13.2087 31.0293L12.1147 32.1873C11.7897 32.5322 11.2426 32.5606 10.8822 32.2506L7.74482 29.5518C7.37155 29.2322 7.33938 28.6722 7.67081 28.3115L9.03196 26.834C9.24434 26.603 9.31513 26.2772 9.2186 25.9798L8.38196 23.4581C8.2629 23.1006 7.92181 22.857 7.53888 22.857H5.88491C5.3958 22.857 5 22.4678 5 21.9869V18.3231C5 17.8422 5.3958 17.4531 5.88491 17.4531H7.46165C7.80596 17.4531 8.12131 17.2569 8.26612 16.9468L9.29583 14.7638C9.44707 14.4442 9.38593 14.0709 9.14781 13.8114L7.62898 12.1725C7.31685 11.8372 7.32007 11.3183 7.63864 10.9892L10.4896 8.02151C10.8404 7.65767 11.4325 7.65767 11.78 8.02468L12.961 9.27125C13.2055 9.53069 13.5852 9.61612 13.9199 9.49272L16.3783 8.57836C16.7226 8.4518 16.9511 8.12592 16.9511 7.76524V5.87007C16.9511 5.38916 17.3469 5 17.836 5H22.164C22.6531 5 23.0489 5.38916 23.0489 5.87007Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
64+
<path d='M20 15V22.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
65+
<circle cx='20' cy='26.25' r='1.25' fill='white' />
66+
</svg>
67+
)
68+
break
69+
70+
default:
71+
break
72+
}
73+
return icon
74+
}
75+
76+
export default GearAlertIcon
77+
78+
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import * as React from 'react'
2+
import styles from './Icons.module.css'
3+
import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
4+
5+
const GearUserIcon = ({
6+
color = MAIN_DARK_BLUE,
7+
size = MEDIUM,
8+
disabled = false,
9+
inactive = false
10+
}) => {
11+
let className = `${styles.svgClassName} ` + styles[`${color}`]
12+
if (disabled) {
13+
className += ` ${styles.iconDisabled}`
14+
}
15+
if (inactive) {
16+
className += ` ${styles.iconInactive}`
17+
}
18+
let icon = <></>
19+
20+
switch (size) {
21+
case SMALL:
22+
icon = (
23+
<svg
24+
width={16}
25+
height={16}
26+
viewBox='0 0 16 16'
27+
fill='none'
28+
xmlns='http://www.w3.org/2000/svg'
29+
className={className}
30+
>
31+
<path d='M8.00073 10.3287C9.25541 10.3287 10.2725 9.32868 10.2725 8.09503C10.2725 6.86139 9.25541 5.86133 8.00073 5.86133' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
32+
<path d='M10.3395 12.3193C10.472 12.2738 10.62 12.3105 10.7153 12.4117L11.1529 12.8749C11.2829 13.0129 11.5017 13.0243 11.6459 12.9002L12.9009 11.8207C13.0502 11.6929 13.063 11.4689 12.9305 11.3246L12.386 10.7336C12.2998 10.6412 12.2714 10.5109 12.3113 10.3919L12.646 9.38325C12.6936 9.24024 12.8301 9.1428 12.9832 9.1428H13.6461C13.8418 9.1428 14.0001 8.98713 14.0001 8.79477V7.32926C14.0001 7.13689 13.8418 6.98123 13.6461 6.98123H13.0154C12.8777 6.98123 12.7515 6.9015 12.6936 6.77874L12.2817 5.9055C12.2212 5.77895 12.2444 5.62835 12.341 5.52457L12.9485 4.86901C13.0733 4.73487 13.072 4.52858 12.9446 4.3957L11.8042 3.20861C11.6639 3.0618 11.4271 3.06307 11.2881 3.20987L10.8157 3.7085C10.7179 3.81228 10.566 3.84645 10.4321 3.79709L9.44875 3.43134C9.31103 3.38072 9.21964 3.25037 9.21964 3.1061V2.34803C9.21964 2.15566 9.06132 2 8.86568 2H7.13447C6.93883 2 6.78051 2.15566 6.78051 2.34803V3.1061C6.78051 3.25037 6.68912 3.38072 6.5514 3.43134L5.56803 3.79709C5.43416 3.84645 5.28228 3.81228 5.18446 3.7085L4.71208 3.20987C4.57307 3.06307 4.33623 3.06307 4.19594 3.20861L3.05553 4.3957C2.9281 4.52731 2.92682 4.73487 3.05167 4.86901' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33+
<path d='M5.5 11.3999C3.567 11.3999 2 12.6535 2 14.1999H9C9 12.6535 7.433 11.3999 5.5 11.3999Z' stroke='none' strokeLinejoin='round' />
34+
<circle cx='5.50015' cy='7.90005' r='2.1' stroke='none' />
35+
</svg>
36+
)
37+
break
38+
case MEDIUM:
39+
icon = (
40+
<svg
41+
width={24}
42+
height={24}
43+
viewBox='0 0 24 24'
44+
fill='none'
45+
xmlns='http://www.w3.org/2000/svg'
46+
className={className}
47+
>
48+
<path d='M12.001 15.4929C13.883 15.4929 15.4087 13.9928 15.4087 12.1423C15.4087 10.2918 13.883 8.79175 12.001 8.79175' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
49+
<path d='M15.5092 18.479C15.708 18.4107 15.9301 18.4657 16.0729 18.6176L16.7294 19.3124C16.9244 19.5193 17.2526 19.5364 17.4688 19.3503L19.3513 17.7311C19.5752 17.5393 19.5946 17.2033 19.3957 16.9869L18.579 16.1004C18.4496 15.9618 18.4072 15.7663 18.467 15.5879L18.969 14.0749C19.0404 13.8604 19.2451 13.7142 19.4749 13.7142H20.4692C20.7626 13.7142 21.0001 13.4807 21.0001 13.1922V10.9939C21.0001 10.7053 20.7626 10.4718 20.4692 10.4718H19.5231C19.3165 10.4718 19.1273 10.3522 19.0404 10.1681L18.4226 8.85826C18.3319 8.66842 18.3666 8.44252 18.5114 8.28686L19.4227 7.30352C19.61 7.1023 19.6081 6.79287 19.4169 6.59355L17.7063 4.81291C17.4959 4.5927 17.1406 4.5946 16.9321 4.81481L16.2235 5.56275C16.0768 5.71841 15.849 5.76967 15.6482 5.69563L14.1731 5.14702C13.9665 5.07108 13.8295 4.87555 13.8295 4.65914V3.52204C13.8295 3.23349 13.592 3 13.2985 3H10.7017C10.4082 3 10.1708 3.23349 10.1708 3.52204V4.65914C10.1708 4.87555 10.0337 5.07108 9.8271 5.14702L8.35204 5.69563C8.15124 5.76967 7.92342 5.71841 7.77669 5.56275L7.06812 4.81481C6.8596 4.5946 6.50435 4.5946 6.2939 4.81291L4.58329 6.59355C4.39215 6.79097 4.39022 7.1023 4.5775 7.30352' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
50+
<path d='M8.25 17.1001C5.35051 17.1001 3 18.9805 3 21.3001H13.5C13.5 18.9805 11.1495 17.1001 8.25 17.1001Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
51+
<circle cx='8.2501' cy='11.8502' r='3.15' stroke='none' strokeWidth={1.5} />
52+
</svg>
53+
)
54+
break
55+
case LARGE:
56+
icon = (
57+
<svg
58+
width={40}
59+
height={40}
60+
viewBox='0 0 40 40'
61+
fill='none'
62+
xmlns='http://www.w3.org/2000/svg'
63+
className={className}
64+
>
65+
<path d='M20.002 25.8216C23.1387 25.8216 25.6815 23.3214 25.6815 20.2373C25.6815 17.1532 23.1387 14.6531 20.002 14.6531' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
66+
<path d='M25.8486 30.7984C26.1801 30.6845 26.5501 30.7762 26.7882 31.0293L27.8823 32.1873C28.2073 32.5322 28.7543 32.5606 29.1147 32.2506L32.2521 29.5518C32.6254 29.2322 32.6576 28.6722 32.3262 28.3115L30.965 26.834C30.7494 26.603 30.6786 26.2772 30.7784 25.9798L31.615 23.4581C31.7341 23.1006 32.0752 22.857 32.4581 22.857H34.1153C34.6044 22.857 35.0002 22.4678 35.0002 21.9869V18.3231C35.0002 17.8422 34.6044 17.4531 34.1153 17.4531H32.5385C32.1942 17.4531 31.8789 17.2537 31.7341 16.9468L30.7044 14.7638C30.5531 14.4474 30.611 14.0709 30.8524 13.8114L32.3712 12.1725C32.6833 11.8372 32.6801 11.3215 32.3615 10.9892L29.5105 8.02151C29.1598 7.6545 28.5677 7.65767 28.2202 8.02468L27.0392 9.27125C26.7947 9.53069 26.415 9.61611 26.0803 9.49272L23.6219 8.57836C23.2776 8.4518 23.0491 8.12592 23.0491 7.76524V5.87007C23.0491 5.38916 22.6533 5 22.1642 5H17.8362C17.3471 5 16.9513 5.38916 16.9513 5.87007V7.76524C16.9513 8.12592 16.7228 8.4518 16.3785 8.57836L13.9201 9.49272C13.5854 9.61611 13.2057 9.53069 12.9611 9.27125L11.7802 8.02468C11.4327 7.65767 10.8406 7.65767 10.4898 8.02151L7.63882 10.9892C7.32026 11.3183 7.31704 11.8372 7.62917 12.1725' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
67+
<path d='M13.75 28.5C8.91751 28.5 5 31.634 5 35.5H22.5C22.5 31.634 18.5825 28.5 13.75 28.5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
68+
<circle cx='13.7505' cy='19.7505' r='5.25' stroke='none' strokeWidth={2} />
69+
</svg>
70+
)
71+
break
72+
73+
default:
74+
break
75+
}
76+
return icon
77+
}
78+
79+
export default GearUserIcon

src/components/icons/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,10 @@ import EyeOpenedIcon from './EyeOpenedIcon'
101101
import FailureRateIcon from './FailureRateIcon'
102102
import FolderIcon from './FolderIcon'
103103
import FoldersIcon from './FoldersIcon'
104+
import FlamegraphsIcon from './FlamegraphsIcon'
105+
import GearAlertIcon from './GearAlertIcon'
104106
import GearIcon from './GearIcon'
107+
import GearUserIcon from './GearUserIcon'
105108
import GenerationLoadingIcon from './GenerationLoadingIcon'
106109
import GitHubRepo2Icon from './GitHubRepo2Icon'
107110
import GitHubRepoIcon from './GitHubRepoIcon'
@@ -334,7 +337,10 @@ export default {
334337
FailureRateIcon,
335338
FolderIcon,
336339
FoldersIcon,
340+
FlamegraphsIcon,
341+
GearAlertIcon,
337342
GearIcon,
343+
GearUserIcon,
338344
GenerationLoadingIcon,
339345
GitHubRepo2Icon,
340346
GitHubRepoIcon,

0 commit comments

Comments
 (0)