Skip to content

Commit 5f129ad

Browse files
leorossileorossi
authored
Merge pull request #409 from platformatic/add-app-optimized-icon
2 parents 94786aa + 6b06be3 commit 5f129ad

14 files changed

+178
-72
lines changed

‎src/components/icons/AppOptimizedIcon.jsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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 AppOptimizedIcon = ({
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='M2 4.87462V10.5015L4 11.5' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
33+
<path d='M12.5403 4.73772L7.27017 2L2 4.73772L7 7.5M12.5403 4.73772V7.74927M12.5403 4.73772L10.7542 5.66556' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
34+
<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='white' strokeLinecap='round' strokeLinejoin='round' />
35+
<path d='M12.3449 9.75011H14V13.7501H12.3449V9.75011Z' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
36+
</svg>
37+
)
38+
break
39+
case MEDIUM:
40+
icon = (
41+
<svg
42+
width={24}
43+
height={24}
44+
viewBox='0 0 24 24'
45+
fill='none'
46+
xmlns='http://www.w3.org/2000/svg'
47+
className={className}
48+
>
49+
<path d='M3 7.31193V15.7522L6 17.25' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
50+
<path d='M18.8105 7.10658L10.9053 3L3 7.10658L10.5 11.25M18.8105 7.10658V11.6239M18.8105 7.10658L16.1313 8.49834' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51+
<path d='M15.2068 11.25C15.5379 12.45 17.5516 14.25 18.5171 15V19.875C18.5171 20.475 16.862 20.875 16.0344 21H12.3104C10.6552 21 10.5173 20 10.6552 19.5C10.3794 19.375 9.82766 19.05 9.82766 18.75C9.82766 18.45 10.1035 18.125 10.2414 18C9.82766 18 9.00009 17.85 9.00009 17.25C9.00009 16.65 9.5518 16.25 9.82766 16.125C9.5518 16.125 9.00009 15.9 9.00009 15C9.00009 14.1 9.82766 13.875 10.2414 13.875H13.5517L12.7241 10.875C12.5862 10.25 12.5586 9 13.5517 9C14.793 9 14.793 9.75 15.2068 11.25Z' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
52+
<path d='M18.5173 14.6252H21V20.6252H18.5173V14.6252Z' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
53+
54+
</svg>
55+
)
56+
break
57+
case LARGE:
58+
icon = (
59+
<svg
60+
width={40}
61+
height={40}
62+
viewBox='0 0 40 40'
63+
fill='none'
64+
xmlns='http://www.w3.org/2000/svg'
65+
className={className}
66+
>
67+
<path d='M5 12.1866V26.2537L10 28.75' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
68+
<path d='M31.3508 11.8443L18.1754 5L5 11.8443L17.5 18.75M31.3508 11.8443V19.3732M31.3508 11.8443L26.8856 14.1639' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
69+
<path d='M25.3447 18.75C25.8964 20.75 29.2527 23.75 30.8618 25V33.125C30.8618 34.125 28.1033 34.7917 26.724 35H20.5173C17.7587 35 17.5288 33.3333 17.7587 32.5C17.2989 32.2917 16.3794 31.75 16.3794 31.25C16.3794 30.75 16.8392 30.2083 17.0691 30C16.3794 30 15.0002 29.75 15.0002 28.75C15.0002 27.75 15.9197 27.0833 16.3794 26.875C15.9197 26.875 15.0002 26.5 15.0002 25C15.0002 23.5 16.3794 23.125 17.0691 23.125H22.5862L21.2069 18.125C20.977 17.0833 20.931 15 22.5862 15C24.6551 15 24.6551 16.25 25.3447 18.75Z' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
70+
<path d='M30.8622 24.3753H35V34.3753H30.8622V24.3753Z' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
71+
</svg>
72+
)
73+
break
74+
75+
default:
76+
break
77+
}
78+
return icon
79+
}
80+
81+
AppOptimizedIcon.propTypes = {
82+
/**
83+
* color of text, icon and borders
84+
*/
85+
color: PropTypes.oneOf(COLORS_ICON),
86+
/**
87+
* Size
88+
*/
89+
size: PropTypes.oneOf(SIZES),
90+
/**
91+
* disabled
92+
*/
93+
disabled: PropTypes.bool,
94+
/**
95+
* inactive
96+
*/
97+
inactive: PropTypes.bool
98+
}
99+
100+
export default AppOptimizedIcon

‎src/components/icons/CircleCheckMarkButtonIcon.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ const CircleCheckMarkButtonIcon = ({
2929
xmlns='http://www.w3.org/2000/svg'
3030
className={className}
3131
>
32-
<circle cx='13' cy='13' r='12' stroke='none' strokeWidth='1.5' />
33-
<path d='M7 13L12 17L19 9' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
32+
<circle cx='13' cy='13' r='12' stroke='none' strokeWidth={1.5} />
33+
<path d='M7 13L12 17L19 9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
3434
</svg>
3535
)
3636
break

‎src/components/icons/CircleCopyPasteIcon.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@ const CircleCopyPasteIcon = ({
4747
xmlns='http://www.w3.org/2000/svg'
4848
className={className}
4949
>
50-
<circle cx='13' cy='13' r='12' stroke='none' strokeWidth='1.5' />
51-
<path d='M10.499 19.7504V9.30664C10.499 8.89243 10.8348 8.55664 11.249 8.55664H16.122C16.3063 8.55664 16.4841 8.62449 16.6215 8.74724L20.2486 11.9864C20.4079 12.1287 20.499 12.3322 20.499 12.5458V19.7504C20.499 20.1646 20.1632 20.5004 19.749 20.5004H11.249C10.8348 20.5004 10.499 20.1646 10.499 19.7504Z' stroke='none' strokeWidth='1.5' strokeLinecap='round' />
52-
<path d='M16.124 12.737V8.55664L20.499 12.737H16.124Z' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
53-
<path d='M14.875 7.95903L12.2454 5.68293C12.1091 5.56495 11.9349 5.50001 11.7546 5.50001H8.76704H6.25C5.83579 5.50001 5.5 5.83579 5.5 6.25001L5.50001 16.1669C5.50001 16.5811 5.83579 16.9169 6.25001 16.9169H9.87501' stroke='none' strokeWidth='1.5' strokeLinecap='round' />
50+
<circle cx='13' cy='13' r='12' stroke='none' strokeWidth={1.5} />
51+
<path d='M10.499 19.7504V9.30664C10.499 8.89243 10.8348 8.55664 11.249 8.55664H16.122C16.3063 8.55664 16.4841 8.62449 16.6215 8.74724L20.2486 11.9864C20.4079 12.1287 20.499 12.3322 20.499 12.5458V19.7504C20.499 20.1646 20.1632 20.5004 19.749 20.5004H11.249C10.8348 20.5004 10.499 20.1646 10.499 19.7504Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
52+
<path d='M16.124 12.737V8.55664L20.499 12.737H16.124Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
53+
<path d='M14.875 7.95903L12.2454 5.68293C12.1091 5.56495 11.9349 5.50001 11.7546 5.50001H8.76704H6.25C5.83579 5.50001 5.5 5.83579 5.5 6.25001L5.50001 16.1669C5.50001 16.5811 5.83579 16.9169 6.25001 16.9169H9.87501' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
5454
</svg>
5555
)
5656
break

‎src/components/icons/CircleEditIcon.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,10 @@ const CircleEditIcon = ({
4848
xmlns='http://www.w3.org/2000/svg'
4949
className={className}
5050
>
51-
<circle cx='13' cy='13' r='12' stroke='none' strokeWidth='1.5' />
52-
<rect x='16.083' y='7.75977' width='3.17647' height='11.6471' transform='rotate(45 16.083 7.75977)' stroke='none' strokeWidth='1.5' strokeLinejoin='round' />
53-
<path d='M10.0928 18.2402L7.84668 15.9941L6.72363 19.3633L10.0928 18.2402Z' stroke='none' strokeWidth='1.5' strokeLinejoin='round' />
54-
<path d='M17.2684 6.57238C17.8542 5.98659 18.804 5.98659 19.3898 6.57238L19.5145 6.69716C20.1003 7.28295 20.1003 8.2327 19.5145 8.81848L18.3291 10.0039L16.083 7.75782L17.2684 6.57238Z' stroke='none' strokeWidth='1.5' />
51+
<circle cx='13' cy='13' r='12' stroke='none' strokeWidth={1.5} />
52+
<rect x='16.083' y='7.75977' width='3.17647' height='11.6471' transform='rotate(45 16.083 7.75977)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
53+
<path d='M10.0928 18.2402L7.84668 15.9941L6.72363 19.3633L10.0928 18.2402Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
54+
<path d='M17.2684 6.57238C17.8542 5.98659 18.804 5.98659 19.3898 6.57238L19.5145 6.69716C20.1003 7.28295 20.1003 8.2327 19.5145 8.81848L18.3291 10.0039L16.083 7.75782L17.2684 6.57238Z' stroke='none' strokeWidth={1.5} />
5555

5656
</svg>
5757
)

‎src/components/icons/CircleRestartIcon.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@ const CircleRestartIcon = ({
4747
xmlns='http://www.w3.org/2000/svg'
4848
className={className}
4949
>
50-
<circle cx='13' cy='13' r='12' stroke='none' strokeWidth='1.5' />
51-
<path d='M7.07675 8.85276C8.34335 6.83189 10.5092 5.5 12.9683 5.5C16.8729 5.5 20.0382 8.85786 20.0382 13C20.0382 13.7532 19.9335 14.4805 19.7388 15.1664M5.99619 11.75C5.9319 12.1565 5.89844 12.5741 5.89844 13C5.89844 17.1421 9.06373 20.5 12.9683 20.5C15.0799 20.5 16.9753 19.518 18.2707 17.9609' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
52-
<path d='M17.8574 12.8125L19.7043 15.2471L21.9992 13.2879' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
53-
<path d='M8.15723 13.5273L5.93706 11.4735L4.00095 13.8287' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
50+
<circle cx='13' cy='13' r='12' stroke='none' strokeWidth={1.5} />
51+
<path d='M7.07675 8.85276C8.34335 6.83189 10.5092 5.5 12.9683 5.5C16.8729 5.5 20.0382 8.85786 20.0382 13C20.0382 13.7532 19.9335 14.4805 19.7388 15.1664M5.99619 11.75C5.9319 12.1565 5.89844 12.5741 5.89844 13C5.89844 17.1421 9.06373 20.5 12.9683 20.5C15.0799 20.5 16.9753 19.518 18.2707 17.9609' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
52+
<path d='M17.8574 12.8125L19.7043 15.2471L21.9992 13.2879' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
53+
<path d='M8.15723 13.5273L5.93706 11.4735L4.00095 13.8287' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
5454
</svg>
5555
)
5656
break

‎src/components/icons/CollapseIcon.jsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ const CollapseIcon = ({
2929
xmlns='http://www.w3.org/2000/svg'
3030
className={className}
3131
>
32-
<path d='M13.1426 7.14258L8.85686 7.14258L8.85686 2.85686' stroke='white' stroke-linecap='round' stroke-linejoin='round' />
33-
<path d='M14.0004 2L9.28613 6.71429' stroke='white' stroke-linecap='round' stroke-linejoin='round' />
34-
<path d='M2.85742 8.85742L7.14314 8.85742L7.14314 13.1431' stroke='white' stroke-linecap='round' stroke-linejoin='round' />
35-
<path d='M6.71429 9.28613L2 14.0004' stroke='white' stroke-linecap='round' stroke-linejoin='round' />
32+
<path d='M13.1426 7.14258L8.85686 7.14258L8.85686 2.85686' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
33+
<path d='M14.0004 2L9.28613 6.71429' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
34+
<path d='M2.85742 8.85742L7.14314 8.85742L7.14314 13.1431' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
35+
<path d='M6.71429 9.28613L2 14.0004' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
3636
</svg>
3737
)
3838
break
@@ -46,10 +46,10 @@ const CollapseIcon = ({
4646
xmlns='http://www.w3.org/2000/svg'
4747
className={className}
4848
>
49-
<path d='M19.7139 10.7144L13.2853 10.7144L13.2853 4.28578' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' />
50-
<path d='M21.0001 3L13.9287 10.0714' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' />
51-
<path d='M4.28613 13.2856L10.7147 13.2856L10.7147 19.7142' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' />
52-
<path d='M10.0714 13.9287L3 21.0001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' />
49+
<path d='M19.7139 10.7144L13.2853 10.7144L13.2853 4.28578' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
50+
<path d='M21.0001 3L13.9287 10.0714' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
51+
<path d='M4.28613 13.2856L10.7147 13.2856L10.7147 19.7142' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
52+
<path d='M10.0714 13.9287L3 21.0001' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
5353

5454
</svg>
5555
)
@@ -64,10 +64,10 @@ const CollapseIcon = ({
6464
xmlns='http://www.w3.org/2000/svg'
6565
className={className}
6666
>
67-
<path d='M32.8574 17.8569L22.1431 17.8569L22.1431 7.14265' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' />
68-
<path d='M35.0006 5L23.2148 16.7857' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' />
69-
<path d='M7.14355 22.1431L17.8578 22.1431L17.8578 32.8574' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' />
70-
<path d='M16.7857 23.2144L5 35.0001' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' />
67+
<path d='M32.8574 17.8569L22.1431 17.8569L22.1431 7.14265' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
68+
<path d='M35.0006 5L23.2148 16.7857' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
69+
<path d='M7.14355 22.1431L17.8578 22.1431L17.8578 32.8574' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
70+
<path d='M16.7857 23.2144L5 35.0001' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
7171
</svg>
7272
)
7373
break

0 commit comments

Comments
 (0)