@firedesktop/react-base 1.20.2 → 1.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/.eslintcache +1 -1
  2. package/dist/components/AppIcon.d.ts +5 -2
  3. package/dist/components/AppIcon.js +43 -43
  4. package/dist/components/AppIcon.js.map +1 -1
  5. package/package.json +7 -6
  6. package/src/App.tsx +6 -2
  7. package/src/lib/components/AppIcon.tsx +145 -142
package/src/lib/components/AppIcon.tsx CHANGED
@@ -46,35 +46,38 @@ type PropType = {
46
46
  | 'delivery';
47
47
  className: string;
48
48
  iconClassName: string;
49
+ iconHeight?: number,
50
+ iconWidth?: number
51
+ onClick?: (event: React.MouseEvent<SVGSVGElement>) => void,
49
52
  };
50
53
 
51
- function AppIcon({ name, className, iconClassName }: PropType) {
54
+ function AppIcon({ className, iconHeight, iconClassName, name, onClick, iconWidth }: PropType) {
52
55
  return (
53
56
  <Fragment>
54
57
  {name === 'expand' ?
55
58
  <svg
56
- width="19"
57
- height="12"
58
- viewBox="0 0 19 12"
59
- fill="none"
60
- xmlns="http://www.w3.org/2000/svg"
61
- className={iconClassName}
62
- >
63
- <path
64
- d="M2.71429 0.480121L9.5 7.28637L16.2857 0.48012L19 1.84137L9.5 11.3701L1.0659e-06 1.84137L2.71429 0.480121Z"
65
- className={className}
66
- />
67
- </svg> : ''}
59
+ width={iconHeight ?? 19}
60
+ height={iconWidth ?? 12}
61
+ viewBox="0 0 19 12"
62
+ fill="none"
63
+ xmlns="http://www.w3.org/2000/svg"
64
+ className={iconClassName}
65
+ onClick={onClick} >
66
+ <path
67
+ d="M2.71429 0.480121L9.5 7.28637L16.2857 0.48012L19 1.84137L9.5 11.3701L1.0659e-06 1.84137L2.71429 0.480121Z"
68
+ className={className}
69
+ />
70
+ </svg> : ''}
68
71
 
69
72
  {name === 'backicon' ?
70
73
  <svg
71
- width="15"
72
- height="26"
74
+ width={iconHeight ?? 15}
75
+ height={iconWidth ?? 26}
73
76
  viewBox="0 0 15 26"
74
77
  fill="none"
75
78
  xmlns="http://www.w3.org/2000/svg"
76
79
  className={iconClassName}
77
- >
80
+ onClick={onClick}>
78
81
  <path
79
82
  d="M15 22.2717L5.72875 12.7904L15 3.30904L12.1457 0.396484L0 12.7904L12.1457 25.1842L15 22.2717Z"
80
83
  className={className}
@@ -83,12 +86,11 @@ function AppIcon({ name, className, iconClassName }: PropType) {
83
86
 
84
87
  {name === 'table' ?
85
88
  <svg
86
- width="18"
87
- height="19"
89
+ width={iconHeight ?? 18}
90
+ height={iconWidth ?? 19}
88
91
  viewBox="0 0 18 19"
89
92
  fill="none"
90
- xmlns="http://www.w3.org/2000/svg"
91
- >
93
+ xmlns="http://www.w3.org/2000/svg" onClick={onClick}>
92
94
  <path
93
95
  d="M4.5 4.97453H0V0.519531H4.5V4.97453ZM11.25 0.519531H6.75V4.97453H11.25V0.519531ZM18 0.519531H13.5V4.97453H18V0.519531ZM4.5 7.20203H0V11.657H4.5V7.20203ZM11.25 7.20203H6.75V11.657H11.25V7.20203ZM18 7.20203H13.5V11.657H18V7.20203ZM4.5 13.8845H0V18.3395H4.5V13.8845ZM11.25 13.8845H6.75V18.3395H11.25V13.8845ZM18 13.8845H13.5V18.3395H18V13.8845Z"
94
96
  fill="#0057FF"
@@ -97,13 +99,12 @@ function AppIcon({ name, className, iconClassName }: PropType) {
97
99
 
98
100
  {name === 'logo-main' ?
99
101
  <svg
100
- width="93"
101
- height="96"
102
+ width={iconHeight ?? 93}
103
+ height={iconWidth ?? 96}
102
104
  viewBox="0 0 93 96"
103
105
  fill="none"
104
106
  xmlns="http://www.w3.org/2000/svg"
105
- className={iconClassName}
106
- >
107
+ className={iconClassName} onClick={onClick}>
107
108
  <g clipPath="url(#clip0)">
108
109
  <path
109
110
  d="M5.75582 63.0664C9.71508 51.2829 20.1208 45.8757 23.5386 44.0988C37.0323 37.0849 50.5597 38.9808 60.441 40.358C68.3003 41.4548 73.2155 42.0074 75.1021 39.4909C76.168 38.0626 76.4387 35.597 75.9396 32.3579C67.7588 30.2749 61.6846 22.6063 61.6846 13.4754C61.6846 8.23825 63.6811 3.49424 66.9213 0H14.7065C6.77948 0 0.349915 6.46137 0.349915 14.4276V77.698C1.55123 76.7883 2.89636 76.0741 4.35993 75.6235C3.97077 71.2621 4.42761 67.0027 5.75582 63.0664Z"
@@ -132,13 +133,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
132
133
 
133
134
  {name === 'pin-tilted' ?
134
135
  <svg
135
- width="17"
136
- height="17"
136
+ width={iconHeight ?? 17}
137
+ height={iconWidth ?? 17}
137
138
  viewBox="0 0 17 17"
138
139
  fill="none"
139
140
  xmlns="http://www.w3.org/2000/svg"
140
141
  className={iconClassName}
141
- >
142
+ onClick={onClick}>
142
143
  <path
143
144
  d="M11.729 0.294792C11.542 0.10679 11.288 0.000754119 11.0228 4.00685e-06C10.7577 -0.000746105 10.5031 0.103851 10.315 0.290792C10.2158 0.391926 10.1391 0.51291 10.09 0.645792C9.258 2.38179 8.342 3.36079 7.186 3.93879C5.889 4.57879 4.4 5.02379 2 5.02379C1.80258 5.02472 1.6098 5.08372 1.44568 5.19344C1.28155 5.30315 1.15334 5.45873 1.077 5.64079C1.00143 5.82359 0.981709 6.02468 1.02033 6.21867C1.05895 6.41267 1.15418 6.59088 1.294 6.73079L4.537 9.97379L0 16.0238L6.05 11.4868L9.292 14.7288C9.38487 14.8224 9.49578 14.8963 9.618 14.9458C9.74 14.9968 9.87 15.0238 10 15.0238C10.13 15.0238 10.26 14.9968 10.382 14.9458C10.5649 14.8708 10.7213 14.743 10.8313 14.5789C10.9414 14.4147 11.0001 14.2215 11 14.0238C11 11.6238 11.444 10.1348 12.083 8.85779C12.66 7.70179 13.639 6.78579 15.376 5.95379C15.5088 5.90514 15.6296 5.82839 15.73 5.72879C15.9169 5.54073 16.0215 5.28613 16.0208 5.02096C16.02 4.7558 15.914 4.50179 15.726 4.31479L11.729 0.294792Z"
144
145
  className={className}
@@ -147,13 +148,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
147
148
 
148
149
  {name === 'search' ?
149
150
  <svg
150
- width="26"
151
- height="26"
151
+ width={iconHeight ?? 26}
152
+ height={iconWidth ?? 26}
152
153
  viewBox="0 0 26 26"
153
154
  fill="none"
154
155
  xmlns="http://www.w3.org/2000/svg"
155
156
  className={iconClassName}
156
- >
157
+ onClick={onClick}>
157
158
  <path
158
159
  d="M18.582 16.3522H17.4077L16.9914 15.9508C18.4986 14.2027 19.327 11.9708 19.3253 9.66267C19.3253 7.75157 18.7586 5.8834 17.6969 4.29438C16.6351 2.70536 15.126 1.46687 13.3604 0.735531C11.5948 0.00418668 9.65195 -0.187166 7.77757 0.18567C5.9032 0.558506 4.18148 1.47878 2.83013 2.83013C1.47878 4.18148 0.558506 5.9032 0.18567 7.77757C-0.187166 9.65195 0.00418668 11.5948 0.735531 13.3604C1.46687 15.126 2.70536 16.6351 4.29438 17.6969C5.8834 18.7586 7.75157 19.3253 9.66267 19.3253C12.056 19.3253 14.2561 18.4483 15.9508 16.9914L16.3522 17.4077V18.582L23.785 26L26 23.785L18.582 16.3522ZM9.66267 16.3522C5.96112 16.3522 2.97313 13.3642 2.97313 9.66267C2.97313 5.96112 5.96112 2.97313 9.66267 2.97313C13.3642 2.97313 16.3522 5.96112 16.3522 9.66267C16.3522 13.3642 13.3642 16.3522 9.66267 16.3522Z"
159
160
  className={className}
@@ -163,13 +164,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
163
164
  {/* List Actions */}
164
165
  {name === 'download' ?
165
166
  <svg
166
- width="19"
167
- height="19"
167
+ width={iconHeight ?? 19}
168
+ height={iconWidth ?? 19}
168
169
  viewBox="0 0 19 19"
169
170
  fill="none"
170
171
  xmlns="http://www.w3.org/2000/svg"
171
172
  className={iconClassName}
172
- >
173
+ onClick={onClick}>
173
174
  <path
174
175
  d="M0 16.4273H19V19H0V16.4273ZM12.9958 0H6.00424V7.86334H1.63452L9.5 15.1884L17.3655 7.86334H12.9958V0Z"
175
176
  className={className}
@@ -178,12 +179,12 @@ function AppIcon({ name, className, iconClassName }: PropType) {
178
179
 
179
180
  {name === 'share' ?
180
181
  <svg
181
- width="23"
182
- height="20"
182
+ width={iconHeight ?? 23}
183
+ height={iconWidth ?? 20}
183
184
  viewBox="0 0 23 20"
184
185
  fill="none"
185
186
  xmlns="http://www.w3.org/2000/svg"
186
- >
187
+ onClick={onClick}>
187
188
  <path
188
189
  d="M21.5714 10L12.1429 1V6.14286C3.11982 6.14286 1 12.6127 1 19C3.60411 15.6657 5.90714 13.8571 12.1429 13.8571V19L21.5714 10Z"
189
190
  stroke="#0057FF"
@@ -194,13 +195,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
194
195
 
195
196
  {name === 'eye' ?
196
197
  <svg
197
- width="32"
198
- height="32"
198
+ width={iconHeight ?? 32}
199
+ height={iconWidth ?? 32}
199
200
  viewBox="0 0 32 32"
200
201
  fill="none"
201
202
  xmlns="http://www.w3.org/2000/svg"
202
203
  className={iconClassName}
203
- >
204
+ onClick={onClick}>
204
205
  <path
205
206
  d="M16 20C18.2091 20 20 18.2091 20 16C20 13.7909 18.2091 12 16 12C13.7909 12 12 13.7909 12 16C12 18.2091 13.7909 20 16 20Z"
206
207
  className={className}
@@ -214,13 +215,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
214
215
  {/* Actions */}
215
216
  {name === 'add' ?
216
217
  <svg
217
- width="21"
218
- height="20"
218
+ width={iconHeight ?? 21}
219
+ height={iconWidth ?? 20}
219
220
  viewBox="0 0 21 20"
220
221
  fill="none"
221
222
  xmlns="http://www.w3.org/2000/svg"
222
223
  className={iconClassName}
223
- >
224
+ onClick={onClick}>
224
225
  <path
225
226
  d="M18.6667 0H2.33333C1.71449 0 1.121 0.234126 0.683417 0.650874C0.245833 1.06762 0 1.63285 0 2.22222V17.7778C0 18.3671 0.245833 18.9324 0.683417 19.3491C1.121 19.7659 1.71449 20 2.33333 20H18.6667C19.95 20 21 19 21 17.7778V2.22222C21 1 19.95 0 18.6667 0ZM18.6667 17.7778H2.33333V2.22222H18.6667V17.7778ZM9.33333 15.5556H11.6667V11.1111H16.3333V8.88889H11.6667V4.44444H9.33333V8.88889H4.66667V11.1111H9.33333V15.5556Z"
226
227
  className={className}
@@ -229,12 +230,12 @@ function AppIcon({ name, className, iconClassName }: PropType) {
229
230
 
230
231
  {name === 'upload' ?
231
232
  <svg
232
- width="22"
233
- height="22"
233
+ width={iconHeight ?? 22}
234
+ height={iconWidth ?? 22}
234
235
  viewBox="0 0 22 22"
235
236
  fill="none"
236
237
  xmlns="http://www.w3.org/2000/svg"
237
- >
238
+ onClick={onClick}>
238
239
  <path
239
240
  d="M7.8163 6.81585L7.81607 6.81608C7.7089 6.92325 7.58167 7.00826 7.44165 7.06626C7.30163 7.12426 7.15156 7.15411 7 7.15411C6.84844 7.15411 6.69837 7.12426 6.55835 7.06626C6.41833 7.00826 6.2911 6.92325 6.18393 6.81608C6.07677 6.70892 5.99176 6.58169 5.93376 6.44167C5.87576 6.30165 5.84591 6.15158 5.84591 6.00002C5.84591 5.84846 5.87576 5.69839 5.93376 5.55837C5.99176 5.41835 6.07677 5.29112 6.18393 5.18395L10.1839 1.18395L10.1862 1.18164L10.1863 1.18166C10.2953 1.07731 10.4238 0.99544 10.5644 0.940708C10.5648 0.940526 10.5653 0.940344 10.5658 0.940163L10.62 1.08002C10.8635 0.98 11.1365 0.98 11.38 1.08002L7.8163 6.81585ZM7.8163 6.81585L9.85 4.77327V14C9.85 14.305 9.97116 14.5975 10.1868 14.8132C10.4025 15.0289 10.695 15.15 11 15.15C11.305 15.15 11.5975 15.0289 11.8132 14.8132C12.0288 14.5975 12.15 14.305 12.15 14V4.77327L14.1835 6.81565C14.1835 6.81565 14.1835 6.81566 14.1835 6.81567C14.2904 6.92345 14.4176 7.00899 14.5577 7.06737C14.6979 7.12576 14.8482 7.15582 15 7.15582C15.1518 7.15582 15.3021 7.12576 15.4423 7.06737C15.5822 7.00907 15.7092 6.92367 15.8161 6.81609C15.9236 6.70927 16.0091 6.58223 16.0674 6.44228C16.1257 6.30214 16.1558 6.15183 16.1558 6.00002C16.1558 5.84821 16.1257 5.69789 16.0674 5.55775C16.009 5.41769 15.9235 5.29057 15.8158 5.1837C15.8158 5.18364 15.8157 5.18358 15.8156 5.18352L11.8161 1.18395L11.8161 1.18393L11.8137 1.18166C11.7047 1.07731 11.5762 0.995441 11.4356 0.940708L7.8163 6.81585ZM20 10.85C19.695 10.85 19.4025 10.9712 19.1868 11.1868C18.9712 11.4025 18.85 11.695 18.85 12V18C18.85 18.2255 18.7604 18.4417 18.601 18.6011C18.4416 18.7605 18.2254 18.85 18 18.85H4C3.77457 18.85 3.55837 18.7605 3.39896 18.6011C3.23955 18.4417 3.15 18.2255 3.15 18V12C3.15 11.695 3.02884 11.4025 2.81317 11.1868C2.59751 10.9712 2.305 10.85 2 10.85C1.695 10.85 1.40249 10.9712 1.18683 11.1868C0.97116 11.4025 0.85 11.695 0.85 12V18C0.85 18.8354 1.18187 19.6367 1.77261 20.2274C2.36335 20.8181 3.16457 21.15 4 21.15H18C18.8354 21.15 19.6366 20.8181 20.2274 20.2274C20.8181 19.6367 21.15 18.8354 21.15 18V12C21.15 11.695 21.0288 11.4025 20.8132 11.1868C20.5975 10.9712 20.305 10.85 20 10.85Z"
240
241
  fill="#0057FF"
@@ -245,13 +246,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
245
246
 
246
247
  {name === 'edit' ?
247
248
  <svg
248
- width="26"
249
- height="20"
249
+ width={iconHeight ?? 26}
250
+ height={iconWidth ?? 20}
250
251
  viewBox="0 0 26 20"
251
252
  fill="none"
252
253
  xmlns="http://www.w3.org/2000/svg"
253
254
  className={iconClassName}
254
- >
255
+ onClick={onClick}>
255
256
  <path
256
257
  d="M12.8839 15L14.567 13.3523L12.3616 11.1932L10.6786 12.8409V13.6364H12.0714V15H12.8839ZM19.2679 4.77273C19.1131 4.62121 18.9535 4.62595 18.7891 4.78693L13.7109 9.75852C13.5465 9.91951 13.5417 10.0758 13.6964 10.2273C13.8512 10.3788 14.0108 10.3741 14.1752 10.2131L19.2533 5.24148C19.4178 5.08049 19.4226 4.92424 19.2679 4.77273ZM20.4286 13.2102V15.9091C20.4286 17.036 20.0199 17.9995 19.2026 18.7997C18.3852 19.5999 17.401 20 16.25 20H4.17857C3.02753 20 2.04334 19.5999 1.226 18.7997C0.408668 17.9995 0 17.036 0 15.9091V4.09091C0 2.96402 0.408668 2.00047 1.226 1.20028C2.04334 0.400095 3.02753 0 4.17857 0H16.25C16.8594 0 17.4252 0.118371 17.9475 0.355114C18.0926 0.421402 18.1797 0.530303 18.2087 0.681818C18.2377 0.842803 18.1942 0.980114 18.0781 1.09375L17.3672 1.78977C17.2318 1.92235 17.077 1.96023 16.9029 1.90341C16.6804 1.84659 16.4628 1.81818 16.25 1.81818H4.17857C3.54018 1.81818 2.99368 2.04072 2.53906 2.4858C2.08445 2.93087 1.85714 3.46591 1.85714 4.09091V15.9091C1.85714 16.5341 2.08445 17.0691 2.53906 17.5142C2.99368 17.9593 3.54018 18.1818 4.17857 18.1818H16.25C16.8884 18.1818 17.4349 17.9593 17.8895 17.5142C18.3441 17.0691 18.5714 16.5341 18.5714 15.9091V14.1193C18.5714 13.9962 18.615 13.892 18.702 13.8068L19.6306 12.8977C19.7757 12.7557 19.9449 12.7225 20.1384 12.7983C20.3318 12.8741 20.4286 13.0114 20.4286 13.2102ZM19.0357 2.72727L23.2143 6.81818L13.4643 16.3636H9.28572V12.2727L19.0357 2.72727ZM25.4777 4.60227L24.1429 5.90909L19.9643 1.81818L21.2991 0.511364C21.5699 0.246212 21.8988 0.113636 22.2857 0.113636C22.6726 0.113636 23.0015 0.246212 23.2723 0.511364L25.4777 2.67045C25.7485 2.93561 25.8839 3.25758 25.8839 3.63636C25.8839 4.01515 25.7485 4.33712 25.4777 4.60227Z"
257
258
  className={className}
@@ -260,28 +261,28 @@ function AppIcon({ name, className, iconClassName }: PropType) {
260
261
 
261
262
  {name === 'delete' ?
262
263
  <svg
263
- width="16"
264
- height="21"
264
+ width={iconHeight ?? 16}
265
+ height={iconWidth ?? 21}
265
266
  viewBox="0 0 16 21"
266
267
  fill="none"
267
268
  xmlns="http://www.w3.org/2000/svg"
268
269
  className={iconClassName}
269
- >
270
+ onClick={onClick}>
270
271
  <path
271
272
  d="M1.14286 18.6667C1.14286 19.95 2.17143 21 3.42857 21H12.5714C13.8286 21 14.8571 19.95 14.8571 18.6667V4.66667H1.14286V18.6667ZM3.95429 10.36L5.56571 8.715L8 11.1883L10.4229 8.715L12.0343 10.36L9.61143 12.8333L12.0343 15.3067L10.4229 16.9517L8 14.4783L5.57714 16.9517L3.96571 15.3067L6.38857 12.8333L3.95429 10.36ZM12 1.16667L10.8571 0H5.14286L4 1.16667H0V3.5H16V1.16667H12Z"
272
273
  className={className}
273
274
  />
274
- </svg>: ''}
275
+ </svg> : ''}
275
276
 
276
277
  {name === 'list' ?
277
278
  <svg
278
- width="20"
279
- height="17"
279
+ width={iconHeight ?? 20}
280
+ height={iconWidth ?? 17}
280
281
  viewBox="0 0 20 17"
281
282
  fill="none"
282
283
  xmlns="http://www.w3.org/2000/svg"
283
284
  className={iconClassName}
284
- >
285
+ onClick={onClick}>
285
286
  <g clipPath="url(#clip0)">
286
287
  <path
287
288
  d="M0 13.9386H3.60165V17H0V13.9386ZM0 13.9386H3.60165V17H0V13.9386ZM0 9.29241H3.60165V12.3538H0V9.29241ZM0 4.6462H3.60165V7.7076H0V4.6462ZM0 0H3.60165V3.06139H0V0ZM5.29327 13.9386H20V17H5.29327V13.9386ZM5.29327 13.9386H20V17H5.29327V13.9386ZM5.29327 9.29241H20V12.3538H5.29327V9.29241ZM5.29327 4.6462H20V7.7076H5.29327V4.6462ZM5.29327 0H20V3.06139H5.29327V0V0Z"
@@ -293,17 +294,17 @@ function AppIcon({ name, className, iconClassName }: PropType) {
293
294
  <rect width="20" height="17" fill="white" />
294
295
  </clipPath>
295
296
  </defs>
296
- </svg>: ''}
297
+ </svg> : ''}
297
298
 
298
299
  {name === 'link' ?
299
300
  <svg
300
- width="20"
301
- height="20"
301
+ width={iconHeight ?? 20}
302
+ height={iconWidth ?? 20}
302
303
  viewBox="0 0 20 20"
303
304
  fill="none"
304
305
  xmlns="http://www.w3.org/2000/svg"
305
306
  className={iconClassName}
306
- >
307
+ onClick={onClick}>
307
308
  <path
308
309
  d="M4.33142 20.0005C3.9876 19.9228 3.6386 19.8675 3.30343 19.7638C0.338673 18.8496 -0.91219 15.4814 0.729136 12.8131C0.958922 12.4381 1.24918 12.0908 1.55844 11.7762C2.93197 10.3816 4.30204 8.98179 5.71359 7.62519C7.50177 5.90912 10.3594 5.84518 12.1597 7.43163C12.4845 7.71851 12.7022 8.05204 12.7108 8.50309C12.7212 9.0008 12.4828 9.36026 12.0698 9.59529C11.669 9.82341 11.2457 9.80613 10.8414 9.57974C10.7136 9.50715 10.5996 9.40865 10.4821 9.31878C9.52146 8.59641 8.29133 8.62579 7.43439 9.45877C6.01075 10.8448 4.60439 12.2497 3.22222 13.6772C2.40156 14.5257 2.31518 15.7752 2.94234 16.6151C3.66625 17.5846 5.13307 17.747 6.10923 16.9037C6.89361 16.2262 7.62271 15.4831 8.35871 14.7521C8.58677 14.5257 8.74572 14.467 9.07053 14.6173C9.86182 14.9854 10.7101 15.1047 11.6535 14.9232C11.5498 15.0545 11.4911 15.1444 11.415 15.2205C10.3473 16.2919 9.27267 17.3565 8.20667 18.4296C7.32554 19.3162 6.26991 19.826 5.02423 19.9383C4.96894 19.9435 4.91711 19.9798 4.86528 20.0023C4.68732 20.0005 4.50937 20.0005 4.33142 20.0005Z"
309
310
  className={className}
@@ -316,13 +317,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
316
317
 
317
318
  {name === 'unlink' ?
318
319
  <svg
319
- width="20"
320
- height="20"
320
+ width={iconHeight ?? 20}
321
+ height={iconWidth ?? 20}
321
322
  viewBox="0 0 20 20"
322
323
  fill="none"
323
324
  xmlns="http://www.w3.org/2000/svg"
324
325
  className={iconClassName}
325
- >
326
+ onClick={onClick}>
326
327
  <path
327
328
  d="M12.1597 7.43152C11.4306 6.78864 10.527 6.42227 9.59229 6.32031L12.4948 9.22362C12.6382 9.02661 12.7177 8.78813 12.7108 8.50298C12.7022 8.05366 12.4862 7.71839 12.1597 7.43152Z"
328
329
  className={className}
@@ -351,13 +352,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
351
352
 
352
353
  {name === 'shrink' ?
353
354
  <svg
354
- width="19"
355
- height="11"
355
+ width={iconHeight ?? 19}
356
+ height={iconWidth ?? 11}
356
357
  viewBox="0 0 19 11"
357
358
  fill="none"
358
359
  xmlns="http://www.w3.org/2000/svg"
359
360
  className={iconClassName}
360
- >
361
+ onClick={onClick}>
361
362
  <path
362
363
  d="M16.2857 11L9.5 4.125L2.71429 11L0 9.625L9.5 0L19 9.625L16.2857 11Z"
363
364
  className={className}
@@ -367,13 +368,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
367
368
  {/* Pagination */}
368
369
  {name === 'arrow-first' ?
369
370
  <svg
370
- width="9"
371
- height="9"
371
+ width={iconHeight ?? 9}
372
+ height={iconWidth ?? 9}
372
373
  viewBox="0 0 9 9"
373
374
  fill="none"
374
375
  xmlns="http://www.w3.org/2000/svg"
375
376
  className={iconClassName}
376
- >
377
+ onClick={onClick}>
377
378
  <path
378
379
  d="M8.29238 7.06L5.22412 4.00829L8.27584 0.940025L7.3333 0.00256998L3.34413 4.01337L7.35493 8.00254L8.29238 7.06ZM1.35495 8.01876L0.0216184 8.02236L-6.18855e-06 0.0223925L1.33332 0.0187884L1.35495 8.01876Z"
379
380
  className={className}
@@ -382,13 +383,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
382
383
 
383
384
  {name === 'arrow-prev' ?
384
385
  <svg
385
- width="6"
386
- height="9"
386
+ width={iconHeight ?? 6}
387
+ height={iconWidth ?? 9}
387
388
  viewBox="0 0 6 9"
388
389
  fill="none"
389
390
  xmlns="http://www.w3.org/2000/svg"
390
391
  className={iconClassName}
391
- >
392
+ onClick={onClick}>
392
393
  <path
393
394
  d="M4.94724 0.940223L1.91835 4.02442L4.99594 7.06003L4.06345 8.00748L0.0317433 4.03944L3.99979 0.00773347L4.94724 0.940223Z"
394
395
  className={className}
@@ -397,13 +398,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
397
398
 
398
399
  {name === 'arrow-next' ?
399
400
  <svg
400
- width="5"
401
- height="8"
401
+ width={iconHeight ?? 5}
402
+ height={iconWidth ?? 8}
402
403
  viewBox="0 0 5 8"
403
404
  fill="none"
404
405
  xmlns="http://www.w3.org/2000/svg"
405
406
  className={iconClassName}
406
- >
407
+ onClick={onClick}>
407
408
  <path
408
409
  d="M0 7.06L3.05333 4L0 0.94L0.94 0L4.94 4L0.94 8L0 7.06Z"
409
410
  className={className}
@@ -412,13 +413,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
412
413
 
413
414
  {name === 'arrow-last' ?
414
415
  <svg
415
- width="9"
416
- height="8"
416
+ width={iconHeight ?? 9}
417
+ height={iconWidth ?? 8}
417
418
  viewBox="0 0 9 8"
418
419
  fill="none"
419
420
  xmlns="http://www.w3.org/2000/svg"
420
421
  className={iconClassName}
421
- >
422
+ onClick={onClick} >
422
423
  <path
423
424
  d="M0 0.94L3.06 4L0 7.06L0.94 8L4.94 4L0.94 0L0 0.94ZM6.94 0H8.27333V8H6.94V0Z"
424
425
  className={className}
@@ -428,13 +429,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
428
429
  {/* Form */}
429
430
  {name === 'user' ?
430
431
  <svg
431
- width="28"
432
- height="28"
432
+ width={iconHeight ?? 28}
433
+ height={iconWidth ?? 28}
433
434
  viewBox="0 0 28 28"
434
435
  fill="none"
435
436
  xmlns="http://www.w3.org/2000/svg"
436
437
  className={iconClassName}
437
- >
438
+ onClick={onClick}>
438
439
  <path
439
440
  d="M14.0513 23.6237C12.4993 23.6249 10.9712 23.2309 9.6037 22.477C8.23618 21.7231 7.07188 20.6328 6.21493 19.3035C6.24889 16.6376 11.4444 15.1712 14.0487 15.1712C16.653 15.1712 21.8485 16.6376 21.8825 19.3035C21.026 20.632 19.8626 21.7219 18.496 22.4757C17.1295 23.2296 15.6024 23.624 14.0513 23.6237ZM14.0513 4.57201C15.073 4.59911 16.0439 5.03507 16.7572 5.78694C17.4705 6.53882 17.8696 7.54716 17.8696 8.59701C17.8696 9.64686 17.4705 10.6552 16.7572 11.4071C16.0439 12.159 15.073 12.5949 14.0513 12.622C13.0122 12.622 12.0155 12.1979 11.2807 11.4431C10.5459 10.6883 10.1331 9.66451 10.1331 8.59701C10.1331 7.52952 10.5459 6.50574 11.2807 5.75091C12.0155 4.99607 13.0122 4.57201 14.0513 4.57201ZM14.0513 0.547012C6.83662 0.547012 0.990669 6.55231 0.990669 13.9637C0.990669 21.3737 6.83662 27.3803 14.0513 27.3803C21.2634 27.3803 27.112 21.3737 27.112 13.9637C27.112 6.55231 21.2634 0.547012 14.0513 0.547012Z"
440
441
  className={className}
@@ -443,13 +444,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
443
444
 
444
445
  {name === 'password' ?
445
446
  <svg
446
- width="20"
447
- height="23"
447
+ width={iconHeight ?? 20}
448
+ height={iconWidth ?? 23}
448
449
  viewBox="0 0 20 23"
449
450
  fill="none"
450
451
  xmlns="http://www.w3.org/2000/svg"
451
452
  className={iconClassName}
452
- >
453
+ onClick={onClick}>
453
454
  <path
454
455
  d="M9.73872 17.4103C10.3768 17.4103 10.9888 17.1824 11.44 16.7769C11.8912 16.3714 12.1446 15.8214 12.1446 15.2479C12.1446 14.6744 11.8912 14.1244 11.44 13.7188C10.9888 13.3133 10.3768 13.0855 9.73872 13.0855C9.10064 13.0855 8.48868 13.3133 8.03749 13.7188C7.58629 14.1244 7.33281 14.6744 7.33281 15.2479C7.33281 15.8214 7.58629 16.3714 8.03749 16.7769C8.48868 17.1824 9.10064 17.4103 9.73872 17.4103ZM16.9565 7.67949C17.5945 7.67949 18.2065 7.90732 18.6577 8.31284C19.1089 8.71837 19.3624 9.26839 19.3624 9.84189V20.6539C19.3624 21.2274 19.1089 21.7774 18.6577 22.1829C18.2065 22.5884 17.5945 22.8163 16.9565 22.8163H2.52099C1.88291 22.8163 1.27095 22.5884 0.819757 22.1829C0.368561 21.7774 0.115082 21.2274 0.115082 20.6539V9.84189C0.115082 9.26839 0.368561 8.71837 0.819757 8.31284C1.27095 7.90732 1.88291 7.67949 2.52099 7.67949H3.72395V5.5171C3.72395 4.08334 4.35765 2.70831 5.48563 1.69449C6.61362 0.680672 8.14351 0.111115 9.73872 0.111115C11.3339 0.111115 12.8638 0.680672 13.9918 1.69449C15.1198 2.70831 15.7535 4.08334 15.7535 5.5171V7.67949H16.9565ZM9.73872 2.27567C8.78159 2.27567 7.86366 2.61741 7.18687 3.2257C6.51008 3.83399 6.12986 4.65901 6.12986 5.51926V7.68166H13.3476V5.51926C13.3476 4.65901 12.9674 3.83399 12.2906 3.2257C11.6138 2.61741 10.6959 2.27567 9.73872 2.27567Z"
455
456
  className={className}
@@ -459,13 +460,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
459
460
  {/* Dashboard */}
460
461
  {name === 'tickTrue' ?
461
462
  <svg
462
- width="37"
463
- height="33"
463
+ width={iconHeight ?? 37}
464
+ height={iconWidth ?? 33}
464
465
  viewBox="0 0 37 33"
465
466
  fill="none"
466
467
  xmlns="http://www.w3.org/2000/svg"
467
468
  className={iconClassName}
468
- >
469
+ onClick={onClick}>
469
470
  <path
470
471
  d="M37.0001 5.04883C36.7651 6.43099 36.0179 7.40495 35.2104 8.36458C28.6842 16.0918 22.176 23.8333 15.6618 31.5749C14.3 33.1934 12.3957 33.4583 10.8832 32.2409C10.6361 32.0404 10.4071 31.7897 10.1902 31.5391C7.19524 27.987 4.19426 24.4277 1.20533 20.8613C-0.915839 18.3405 -0.120399 14.3014 2.68172 13.3704C4.12195 12.8906 5.36331 13.3633 6.40582 14.6094C8.17748 16.7077 9.94312 18.8132 11.7088 20.9186C12.1065 21.3913 12.4921 21.8783 12.9983 22.4941C13.1188 22.2721 13.1912 22.0716 13.3117 21.9284C18.8677 15.3184 24.4358 8.71549 29.9858 2.09115C30.7812 1.13867 31.6008 0.279297 32.7457 0C33.1193 0 33.499 0 33.8726 0C33.963 0.0358073 34.0534 0.0859375 34.1498 0.114583C35.4996 0.558594 36.4035 1.54687 36.8374 3.14388C36.8916 3.33724 36.9459 3.52344 37.0001 3.7168C37.0001 4.16081 37.0001 4.60482 37.0001 5.04883Z"
471
472
  className={className}
@@ -474,13 +475,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
474
475
 
475
476
  {name === 'tickFalse' ?
476
477
  <svg
477
- width="40"
478
- height="40"
478
+ width={iconHeight ?? 40}
479
+ height={iconWidth ?? 40}
479
480
  viewBox="0 0 40 40"
480
481
  fill="none"
481
482
  xmlns="http://www.w3.org/2000/svg"
482
483
  className={iconClassName}
483
- >
484
+ onClick={onClick}>
484
485
  <rect
485
486
  y="9.19238"
486
487
  width="13"
@@ -502,25 +503,25 @@ function AppIcon({ name, className, iconClassName }: PropType) {
502
503
 
503
504
  {name === 'circle' ?
504
505
  <svg
505
- width="31"
506
- height="31"
506
+ width={iconHeight ?? 31}
507
+ height={iconWidth ?? 31}
507
508
  viewBox="0 0 31 31"
508
509
  fill="none"
509
510
  xmlns="http://www.w3.org/2000/svg"
510
511
  className={iconClassName}
511
- >
512
+ onClick={onClick}>
512
513
  <circle cx="15.5" cy="15.5" r="15.5" className={className} />
513
514
  </svg> : ''}
514
515
 
515
516
  {name === 'tickStep' ?
516
517
  <svg
517
- width="25"
518
- height="23"
518
+ width={iconHeight ?? 25}
519
+ height={iconWidth ?? 23}
519
520
  viewBox="0 0 31 23"
520
521
  fill="none"
521
522
  xmlns="http://www.w3.org/2000/svg"
522
523
  className={iconClassName}
523
- >
524
+ onClick={onClick}>
524
525
  <path
525
526
  d="M31.0003 3.51888C30.8034 4.4822 30.1773 5.16102 29.5008 5.82986C24.0329 11.2155 18.5801 16.6111 13.1223 22.0067C11.9812 23.1348 10.3858 23.3194 9.11852 22.4709C8.91152 22.3312 8.71966 22.1565 8.53791 21.9818C6.02862 19.5061 3.51429 17.0254 1.01006 14.5397C-0.767143 12.7828 -0.100694 9.96766 2.24703 9.31879C3.4537 8.98438 4.49377 9.3138 5.36722 10.1823C6.85159 11.6447 8.3309 13.1122 9.81022 14.5796C10.1434 14.9091 10.4666 15.2485 10.8907 15.6777C10.9917 15.523 11.0522 15.3832 11.1532 15.2834C15.8083 10.6764 20.4734 6.07444 25.1234 1.45747C25.7899 0.79362 26.4765 0.194661 27.4358 0C27.7488 0 28.0669 0 28.3799 0C28.4557 0.0249566 28.5314 0.0598958 28.6122 0.0798611C29.7431 0.389323 30.5004 1.07812 30.864 2.19119C30.9094 2.32595 30.9548 2.45573 31.0003 2.59049C31.0003 2.89996 31.0003 3.20942 31.0003 3.51888Z"
526
527
  className={className}
@@ -531,12 +532,12 @@ function AppIcon({ name, className, iconClassName }: PropType) {
531
532
  {name === 'document' ?
532
533
  <svg
533
534
  className={iconClassName}
534
- width="21"
535
- height="28"
535
+ width={iconHeight ?? 21}
536
+ height={iconWidth ?? 28}
536
537
  viewBox="0 0 21 28"
537
538
  fill="none"
538
539
  xmlns="http://www.w3.org/2000/svg"
539
- >
540
+ onClick={onClick}>
540
541
  <path
541
542
  className={className}
542
543
  fillRule="evenodd"
@@ -547,12 +548,12 @@ function AppIcon({ name, className, iconClassName }: PropType) {
547
548
 
548
549
  {name === 'company' ?
549
550
  <svg
550
- width="32"
551
- height="30"
551
+ width={iconHeight ?? 32}
552
+ height={iconWidth ?? 30}
552
553
  viewBox="0 0 32 30"
553
554
  fill="none"
554
555
  xmlns="http://www.w3.org/2000/svg"
555
- >
556
+ onClick={onClick}>
556
557
  <path
557
558
  d="M29.2567 29.0409H17.1983C16.2082 29.0409 15.4072 28.2289 15.4072 27.2251V14.156C15.4072 13.1522 16.2082 12.3401 17.1983 12.3401H29.2567C30.2468 12.3401 31.0477 13.1522 31.0477 14.156V27.2251C31.0541 28.2225 30.2468 29.0409 29.2567 29.0409Z"
558
559
  stroke={className === 'primary-svg' ? '#0057FF' : '#B1AEAE'}
@@ -584,12 +585,12 @@ function AppIcon({ name, className, iconClassName }: PropType) {
584
585
  {name === 'plantMonitor' ?
585
586
  <svg
586
587
  className={iconClassName}
587
- width="29"
588
- height="24"
588
+ width={iconHeight ?? 29}
589
+ height={iconWidth ?? 24}
589
590
  viewBox="0 0 29 24"
590
591
  fill="none"
591
592
  xmlns="http://www.w3.org/2000/svg"
592
- >
593
+ onClick={onClick}>
593
594
  <path
594
595
  className={className}
595
596
  d="M1.00221 13.8574L2.97841 14.329L4.46599 12.0811L1.63871 11.4086C1.30128 11.3274 0.944146 11.3785 0.645864 11.5506C0.347583 11.7228 0.132591 12.002 0.0481861 12.3267C-0.0362191 12.6514 0.0168757 12.9951 0.19579 13.2822C0.374705 13.5693 0.664783 13.7762 1.00221 13.8574ZM26.7972 14.2216L20.3263 19.8252L12.7188 14.1588C12.5736 14.0513 12.4066 13.9743 12.2287 13.9327L11.2167 13.6899L9.72764 15.9378L11.3225 16.3187L19.5825 22.4693C19.8278 22.651 20.1313 22.7444 20.4405 22.7334C20.7498 22.7225 21.0453 22.6078 21.276 22.4093L28.566 16.0927C28.6944 15.982 28.7987 15.8479 28.8729 15.6982C28.9471 15.5484 28.9897 15.3861 28.9984 15.2204C29.007 15.0547 28.9814 14.889 28.9231 14.7329C28.8649 14.5768 28.775 14.4334 28.6588 14.3109C28.4236 14.0624 28.0959 13.9136 27.7471 13.8969C27.3983 13.8801 27.0568 13.9969 26.7972 14.2216ZM12.5926 8.06541L19.6782 12.4314C19.966 12.6084 20.3138 12.6716 20.6489 12.6076C20.9839 12.5437 21.2803 12.3575 21.4761 12.0881L28.7647 1.98321C28.8633 1.84684 28.933 1.69302 28.9696 1.53062C29.0061 1.36822 29.009 1.20045 28.9778 1.037C28.9467 0.873553 28.8822 0.717655 28.7881 0.578306C28.6941 0.438956 28.5723 0.318913 28.4297 0.225105C28.1422 0.0339089 27.7876 -0.0396814 27.4437 0.0204864C27.0998 0.0806541 26.7948 0.269664 26.5956 0.546028L20.0305 9.64491L12.9029 5.25384C12.6071 5.07186 12.2484 5.01014 11.9054 5.08221C11.5636 5.15569 11.266 5.35634 11.0775 5.64034L0.207674 22.0591C0.0802112 22.25 0.00871782 22.4706 0.000747918 22.6974C-0.00722199 22.9243 0.0486275 23.149 0.162395 23.3478C0.276163 23.5466 0.443624 23.7122 0.647083 23.827C0.850543 23.9418 1.08245 24.0015 1.31829 24C1.54017 24.0005 1.7586 23.9471 1.95327 23.8446C2.14794 23.7422 2.31255 23.594 2.4318 23.4139L12.5926 8.06541Z"
@@ -600,12 +601,12 @@ function AppIcon({ name, className, iconClassName }: PropType) {
600
601
  {name === 'plantMissing' ?
601
602
  <svg
602
603
  className={iconClassName}
603
- width="34"
604
- height="36"
604
+ width={iconHeight ?? 34}
605
+ height={iconWidth ?? 36}
605
606
  viewBox="0 0 34 36"
606
607
  fill="none"
607
608
  xmlns="http://www.w3.org/2000/svg"
608
- >
609
+ onClick={onClick}>
609
610
  <path
610
611
  className={className}
611
612
  d="M14.797 33.2218L13.1538 33.2235V32.1289H8.76937V33.2286L7.12588 33.2303C6.82377 33.2306 6.57885 33.4747 6.57851 33.7762L6.5768 34.8595C6.57646 35.1616 6.8224 35.4068 7.12554 35.4064L14.797 35.3976C15.0991 35.3972 15.344 35.1531 15.3443 34.852L15.3457 33.7687C15.3461 33.4666 15.1001 33.2214 14.797 33.2218ZM20.0453 18.8392C19.9556 18.3124 19.4901 17.9263 18.9444 17.9263H2.97778C2.43212 17.9263 1.96661 18.3124 1.87687 18.8392C-0.113608 30.5297 0.00148378 29.8101 0.00114125 29.9439C0.00011364 30.5352 0.490625 31.0364 1.11781 31.0364H20.8047C21.4291 31.0364 21.9183 30.5393 21.921 29.9511C21.9217 29.8118 22.0358 30.5297 20.0453 18.8392ZM8.90022 20.1113H13.022L13.3566 23.3888H8.56556L8.90022 20.1113ZM6.32538 28.8514H2.4352L3.08636 25.0276H6.71621L6.32538 28.8514ZM6.88337 23.3888H3.36518L3.92318 20.1113H7.21803L6.88337 23.3888ZM8.00757 28.8514L8.39806 25.0276H13.5241L13.9146 28.8514H8.00757ZM14.7041 20.1113H17.999L18.557 23.3888H15.0388L14.7041 20.1113ZM15.5968 28.8514L15.2063 25.0276H18.8362L19.4873 28.8514H15.5968Z"
@@ -621,12 +622,12 @@ function AppIcon({ name, className, iconClassName }: PropType) {
621
622
  {name === 'contact' ?
622
623
  <svg
623
624
  className={`align-self-center mr-3 ${iconClassName}`}
624
- width="28"
625
- height="25"
625
+ width={iconHeight ?? 28}
626
+ height={iconWidth ?? 25}
626
627
  viewBox="0 0 28 31"
627
628
  fill="none"
628
629
  xmlns="http://www.w3.org/2000/svg"
629
- >
630
+ onClick={onClick}>
630
631
  <path
631
632
  d="M2.30762 7.125C2.30762 5.35938 2.29977 3.64062 2.30762 1.91406C2.31547 0.265625 2.58236 0 4.19941 0C11.4997 0 18.7999 0 26.1002 0C27.7094 0 27.992 0.28125 27.992 1.89844C27.9998 10.9844 27.9998 20.0625 27.992 29.1484C27.992 30.7109 27.6937 31 26.1708 31C18.8313 31 11.4918 31 4.14446 31C2.60591 31 2.31547 30.7109 2.30762 29.1641C2.29977 27.4297 2.30762 25.7031 2.30762 23.9609C1.452 23.5391 -0.117947 24.2188 0.00764919 22.6016C0.101846 21.3438 1.31071 21.6797 2.22127 21.5312C2.22127 19.9453 2.22127 18.3594 2.22127 16.7422C1.39705 16.4375 -0.0237497 16.9375 -0.000200546 15.4766C0.0233487 14.1094 1.3264 14.5078 2.22912 14.2891C2.22912 12.6953 2.22912 11.1016 2.22912 9.49219C1.33425 9.27344 -0.0315995 9.69531 -0.000200546 8.23438C0.0311984 6.90625 1.27931 7.32812 2.30762 7.125ZM4.58404 28.7812C11.6802 28.7812 18.6508 28.7812 25.6841 28.7812C25.6841 19.9141 25.6841 11.0938 25.6841 2.25C18.6194 2.25 11.6331 2.25 4.61544 2.25C4.61544 3.92188 4.61544 5.51563 4.61544 7.07813C5.46321 7.42969 6.82907 6.78906 6.86832 8.23438C6.91542 9.80469 5.39257 9.17188 4.61544 9.53906C4.61544 11.1562 4.61544 12.7109 4.61544 14.2734C5.49461 14.5469 6.81337 14.0625 6.86832 15.4453C6.93896 17.0391 5.37687 16.3594 4.60759 16.7969C4.60759 18.3828 4.60759 19.9375 4.60759 21.5312C5.50246 21.7266 6.79767 21.2812 6.86832 22.6484C6.96251 24.2812 5.36902 23.5234 4.58404 23.9609C4.58404 25.5469 4.58404 27.1094 4.58404 28.7812Z"
632
633
  className={className}
@@ -643,13 +644,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
643
644
 
644
645
  {name === 'userManagement' ?
645
646
  <svg
646
- width="30"
647
- height="31"
647
+ width={iconHeight ?? 30}
648
+ height={iconWidth ?? 31}
648
649
  viewBox="0 0 30 31"
649
650
  fill="none"
650
651
  xmlns="http://www.w3.org/2000/svg"
651
652
  className={`align-self-center mr-3 ${iconClassName}`}
652
- >
653
+ onClick={onClick}>
653
654
  <path
654
655
  d="M5.37589 20.6866C5.12891 20.0493 4.88194 19.4438 4.65089 18.8303C4.61106 18.7267 4.55529 18.7108 4.45968 18.7188C3.78249 18.7825 3.09732 18.8462 2.42012 18.902C2.23688 18.918 2.04567 18.9339 1.8704 18.894C1.54375 18.8223 1.34457 18.5913 1.28084 18.2647C0.906387 16.4322 0.906387 14.5919 1.28084 12.7515C1.36848 12.3133 1.70309 12.0424 2.14924 12.0743C2.82644 12.1221 3.49567 12.1938 4.17287 12.2575C4.31628 12.2734 4.45968 12.2814 4.58716 12.2894C4.85804 11.6361 5.12095 10.9908 5.39183 10.3215C5.01738 10.0028 4.62699 9.66823 4.22864 9.32564C4.00556 9.13443 3.78249 8.95119 3.55941 8.75998C3.19293 8.44927 3.13716 8.01905 3.40007 7.6207C4.41985 6.10696 5.69457 4.8402 7.20034 3.81246C7.6226 3.52564 8.05282 3.58938 8.38743 3.98773C8.86545 4.55339 9.35144 5.11905 9.83743 5.68471C9.87727 5.73251 9.9888 5.78031 10.0366 5.76438C10.6501 5.50944 11.2556 5.24652 11.885 4.97564C11.8611 4.68883 11.8292 4.36218 11.8053 4.03553C11.7575 3.54955 11.7097 3.05559 11.6698 2.5696C11.638 2.13141 11.9009 1.78086 12.3311 1.68526C13.558 1.42235 14.8009 1.34268 16.0517 1.44625C16.6094 1.49405 17.1671 1.57372 17.7248 1.65339C18.3064 1.74103 18.5613 2.08361 18.5135 2.6652C18.4498 3.3663 18.3861 4.0674 18.3223 4.76053C18.3144 4.8402 18.3144 4.91987 18.3144 4.97564C18.9677 5.24652 19.613 5.5174 20.2742 5.78828C20.4973 5.52537 20.7443 5.23856 20.9833 4.95174C21.2622 4.62509 21.533 4.30641 21.8119 3.97977C22.1465 3.58938 22.5688 3.52564 22.999 3.81246C24.5127 4.83224 25.7795 6.099 26.7992 7.6207C27.0701 8.01905 27.0064 8.4652 26.6319 8.77592C26.0742 9.25394 25.5086 9.73196 24.9509 10.21C24.9031 10.2498 24.8553 10.2976 24.7995 10.3454C24.9429 10.6561 25.0943 10.9589 25.2218 11.2696C25.3413 11.5564 25.4528 11.8512 25.5405 12.146C25.5803 12.2655 25.6281 12.2973 25.7476 12.2814C26.4248 12.2097 27.11 12.1539 27.7872 12.0902C27.8748 12.0822 27.9624 12.0743 28.0421 12.0743C28.5122 12.0583 28.8468 12.3212 28.9344 12.7833C29.285 14.5919 29.285 16.4083 28.9344 18.2169C28.8468 18.671 28.5122 18.9578 28.0501 18.9259C27.2932 18.8701 26.5284 18.7984 25.7715 18.7188C25.6361 18.7028 25.5803 18.7427 25.5325 18.8701C25.3094 19.4677 25.0704 20.0493 24.8234 20.6787C25.0306 20.8619 25.2775 21.069 25.5245 21.2762C25.899 21.5949 26.2734 21.9136 26.6479 22.2322C27.0064 22.535 27.0701 22.9811 26.7992 23.3715C25.7795 24.8932 24.5047 26.1679 22.983 27.1877C22.5767 27.4586 22.1545 27.4028 21.8278 27.0284C21.3339 26.4627 20.8558 25.8891 20.3698 25.3155C20.338 25.2756 20.2981 25.2358 20.2742 25.2039C19.6289 25.4748 18.9916 25.7377 18.3144 26.0245C18.3303 26.2078 18.3462 26.4388 18.3622 26.6699C18.4179 27.2594 18.4737 27.841 18.5295 28.4306C18.5693 28.8528 18.3064 29.2193 17.8921 29.307C16.6652 29.5699 15.4223 29.6495 14.1715 29.5539C13.6058 29.5061 13.0402 29.4265 12.4745 29.3388C11.869 29.2432 11.622 28.8767 11.6858 28.2712C11.7655 27.5144 11.8292 26.7575 11.8929 25.9927C11.5344 25.8572 11.1839 25.7377 10.8333 25.5943C10.5784 25.4908 10.3394 25.3712 10.1003 25.2517C9.98084 25.188 9.9171 25.2119 9.83743 25.3075C9.35941 25.8732 8.87342 26.4388 8.3954 27.0045C8.06078 27.4028 7.63056 27.4586 7.19238 27.1638C5.70254 26.152 4.44375 24.8932 3.43194 23.4034C3.12919 22.9652 3.19293 22.535 3.59924 22.1844C4.19677 21.6905 4.7943 21.1806 5.37589 20.6866ZM24.9987 23.0289C24.9589 22.9891 24.927 22.9572 24.8872 22.9254C24.3295 22.4473 23.7638 21.9693 23.2061 21.4913C22.8715 21.2045 22.7759 20.7982 22.991 20.4397C23.5248 19.5473 23.9391 18.6072 24.1622 17.5875C24.2498 17.1971 24.6163 16.9501 25.0146 16.982C25.3413 17.0059 25.6759 17.0457 26.0025 17.0776C26.4726 17.1174 26.9347 17.1652 27.4207 17.205C27.588 16.0658 27.588 14.9424 27.4207 13.7951C26.6399 13.8669 25.8751 13.9386 25.1102 14.0182C24.6402 14.066 24.2498 13.827 24.1542 13.3809C23.947 12.385 23.5407 11.4688 23.0149 10.6004C22.7918 10.2339 22.8635 9.82757 23.1902 9.54075C23.3256 9.41328 23.469 9.30174 23.6124 9.18224C24.0745 8.78389 24.5366 8.3935 25.0067 7.98718C24.3215 7.07894 23.5328 6.2902 22.6245 5.60504C22.5767 5.65284 22.5369 5.70064 22.497 5.74048C22.035 6.28224 21.5729 6.824 21.1187 7.35779C20.7841 7.75614 20.3858 7.81191 19.9317 7.549C19.0872 7.04707 18.2028 6.65669 17.2388 6.45751C16.8006 6.36987 16.5457 5.99542 16.5855 5.54927C16.6413 4.95174 16.697 4.36218 16.7528 3.76466C16.7688 3.57345 16.7847 3.37427 16.8006 3.17509C15.6613 3.02372 14.5459 3.02372 13.4067 3.17509C13.4146 3.32647 13.4226 3.46191 13.4385 3.59735C13.4943 4.25064 13.566 4.90394 13.6138 5.55724C13.6457 6.03526 13.3907 6.35394 12.9286 6.45751C12.0045 6.66465 11.1361 7.0152 10.3234 7.50119C9.7976 7.81987 9.43111 7.75614 9.03276 7.28608C8.54677 6.73636 8.06875 6.1707 7.57479 5.59707C6.66655 6.28224 5.87782 7.07097 5.19265 7.97125C5.25639 8.02702 5.31216 8.07482 5.36793 8.12262C5.90968 8.58471 6.45941 9.0468 7.00117 9.51685C7.33578 9.80367 7.41545 10.2259 7.18441 10.5924C6.64265 11.4608 6.2682 12.393 6.04512 13.3968C5.95749 13.7872 5.591 14.0501 5.18468 14.0182C4.85804 13.9943 4.52342 13.9545 4.19677 13.9226C3.72672 13.8828 3.26463 13.835 2.77864 13.7951C2.62727 14.9424 2.61133 16.0737 2.78661 17.205C3.59924 17.1254 4.38001 17.0537 5.16078 16.982C5.58304 16.9421 5.96545 17.205 6.05309 17.6114C6.26023 18.6072 6.66655 19.5234 7.19238 20.3919C7.42342 20.7743 7.35172 21.1886 7.00913 21.4833C6.73029 21.7223 6.44347 21.9614 6.16463 22.2083C5.84595 22.4792 5.53523 22.7501 5.20858 23.0289C5.90172 23.9372 6.69045 24.7259 7.59073 25.4111C8.10062 24.8136 8.59457 24.224 9.0965 23.6424C9.43111 23.252 9.82946 23.1883 10.2677 23.4592C11.0723 23.9531 11.9407 24.3116 12.8649 24.5347C13.4624 24.6781 13.6855 25.0048 13.6218 25.6182C13.566 26.1122 13.5262 26.6061 13.4784 27.1001C13.4545 27.3391 13.4385 27.5861 13.4226 27.8331C14.5698 27.9844 15.6852 27.9924 16.8166 27.8331C16.8166 27.7773 16.8166 27.7375 16.8166 27.6976C16.7608 27.0682 16.713 26.4388 16.6333 25.8174C16.5218 24.9809 16.7767 24.5905 17.5416 24.4949C17.5495 24.4949 17.5575 24.4869 17.5575 24.4869C18.4179 24.2798 19.2146 23.9053 19.9715 23.4512C20.3937 23.1962 20.808 23.268 21.1267 23.6424C21.2144 23.746 21.31 23.8575 21.3976 23.9611C21.8119 24.4471 22.2262 24.9251 22.6405 25.4191C23.5248 24.7259 24.3056 23.9372 24.9987 23.0289Z"
655
656
  className={className}
@@ -664,13 +665,13 @@ function AppIcon({ name, className, iconClassName }: PropType) {
664
665
 
665
666
  {name === 'configurations' ?
666
667
  <svg
667
- width="26"
668
- height="28"
668
+ width={iconHeight ?? 26}
669
+ height={iconWidth ?? 28}
669
670
  viewBox="0 0 26 28"
670
671
  fill="none"
671
672
  xmlns="http://www.w3.org/2000/svg"
672
673
  className={` ${iconClassName}`}
673
- >
674
+ onClick={onClick}>
674
675
  <path
675
676
  fillRule="evenodd"
676
677
  clipRule="evenodd"
@@ -681,74 +682,76 @@ function AppIcon({ name, className, iconClassName }: PropType) {
681
682
 
682
683
  {name === 'documentTemplate' ?
683
684
  <svg
684
- width="24"
685
- height="28"
685
+ width={iconHeight ?? 24}
686
+ height={iconWidth ?? 28}
686
687
  viewBox="0 0 24 28"
687
688
  fill="none"
688
689
  xmlns="http://www.w3.org/2000/svg"
689
690
  className={` ${iconClassName}`}
690
- >
691
- <path
692
- d="M2.66667 0C1.18667 0 0 1.18667 0 2.66667V24C0 24.7072 0.280951 25.3855 0.781048 25.8856C1.28115 26.3857 1.95942 26.6667 2.66667 26.6667H8V24.12L10.7867 21.3333H2.66667V18.6667H13.4533L16.12 16H2.66667V13.3333H18.7867L21.3333 10.7867V8L13.3333 0H2.66667ZM12 2L19.3333 9.33333H12V2ZM21.5333 14.6667C21.4347 14.6645 21.3366 14.6823 21.2449 14.7189C21.1533 14.7556 21.07 14.8104 21 14.88L19.64 16.24L22.4267 19.0133L23.7867 17.6667C24.0667 17.3733 24.0667 16.8933 23.7867 16.6133L22.0533 14.88C21.9852 14.8116 21.9041 14.7576 21.8148 14.7209C21.7255 14.6843 21.6298 14.6658 21.5333 14.6667ZM18.8533 17.0267L10.6667 25.2267V28H13.44L21.64 19.8L18.8533 17.0267Z"
693
- className={className}
694
- />
691
+ onClick={onClick}>
692
+ <path className={className} d="M2.66667 0C1.18667 0 0 1.18667 0 2.66667V24C0 24.7072 0.280951 25.3855 0.781048 25.8856C1.28115 26.3857 1.95942 26.6667 2.66667 26.6667H8V24.12L10.7867 21.3333H2.66667V18.6667H13.4533L16.12 16H2.66667V13.3333H18.7867L21.3333 10.7867V8L13.3333 0H2.66667ZM12 2L19.3333 9.33333H12V2ZM21.5333 14.6667C21.4347 14.6645 21.3366 14.6823 21.2449 14.7189C21.1533 14.7556 21.07 14.8104 21 14.88L19.64 16.24L22.4267 19.0133L23.7867 17.6667C24.0667 17.3733 24.0667 16.8933 23.7867 16.6133L22.0533 14.88C21.9852 14.8116 21.9041 14.7576 21.8148 14.7209C21.7255 14.6843 21.6298 14.6658 21.5333 14.6667ZM18.8533 17.0267L10.6667 25.2267V28H13.44L21.64 19.8L18.8533 17.0267Z" />
695
693
  </svg> : ''}
696
694
 
697
695
  {/* Other */}
698
696
  {name === 'unPin' ?
699
697
  <svg
700
- width="17"
701
- height="17"
698
+ width={iconHeight ?? 17}
699
+ height={iconWidth ?? 17}
702
700
  viewBox="0 0 17 17"
703
701
  fill="none"
704
702
  xmlns="http://www.w3.org/2000/svg"
705
703
  className={iconClassName}
706
- >
707
- <path
708
- d="M11.729 0.294792C11.542 0.10679 11.288 0.000754119 11.0228 4.00685e-06C10.7577 -0.000746105 10.5031 0.103851 10.315 0.290792C10.2158 0.391926 10.1391 0.51291 10.09 0.645792C9.258 2.38179 8.342 3.36079 7.186 3.93879C5.889 4.57879 4.4 5.02379 2 5.02379C1.80258 5.02472 1.6098 5.08372 1.44568 5.19344C1.28155 5.30315 1.15334 5.45873 1.077 5.64079C1.00143 5.82359 0.981709 6.02468 1.02033 6.21867C1.05895 6.41267 1.15418 6.59088 1.294 6.73079L4.537 9.97379L0 16.0238L6.05 11.4868L9.292 14.7288C9.38487 14.8224 9.49578 14.8963 9.618 14.9458C9.74 14.9968 9.87 15.0238 10 15.0238C10.13 15.0238 10.26 14.9968 10.382 14.9458C10.5649 14.8708 10.7213 14.743 10.8313 14.5789C10.9414 14.4147 11.0001 14.2215 11 14.0238C11 11.6238 11.444 10.1348 12.083 8.85779C12.66 7.70179 13.639 6.78579 15.376 5.95379C15.5088 5.90514 15.6296 5.82839 15.73 5.72879C15.9169 5.54073 16.0215 5.28613 16.0208 5.02096C16.02 4.7558 15.914 4.50179 15.726 4.31479L11.729 0.294792Z"
709
- className={className}
710
- />
704
+ onClick={onClick}>
705
+ <path className={className} d="M11.729 0.294792C11.542 0.10679 11.288 0.000754119 11.0228 4.00685e-06C10.7577 -0.000746105 10.5031 0.103851 10.315 0.290792C10.2158 0.391926 10.1391 0.51291 10.09 0.645792C9.258 2.38179 8.342 3.36079 7.186 3.93879C5.889 4.57879 4.4 5.02379 2 5.02379C1.80258 5.02472 1.6098 5.08372 1.44568 5.19344C1.28155 5.30315 1.15334 5.45873 1.077 5.64079C1.00143 5.82359 0.981709 6.02468 1.02033 6.21867C1.05895 6.41267 1.15418 6.59088 1.294 6.73079L4.537 9.97379L0 16.0238L6.05 11.4868L9.292 14.7288C9.38487 14.8224 9.49578 14.8963 9.618 14.9458C9.74 14.9968 9.87 15.0238 10 15.0238C10.13 15.0238 10.26 14.9968 10.382 14.9458C10.5649 14.8708 10.7213 14.743 10.8313 14.5789C10.9414 14.4147 11.0001 14.2215 11 14.0238C11 11.6238 11.444 10.1348 12.083 8.85779C12.66 7.70179 13.639 6.78579 15.376 5.95379C15.5088 5.90514 15.6296 5.82839 15.73 5.72879C15.9169 5.54073 16.0215 5.28613 16.0208 5.02096C16.02 4.7558 15.914 4.50179 15.726 4.31479L11.729 0.294792Z" />
711
706
  </svg> : ''}
712
707
 
713
708
  {name === 'Pin' ?
714
709
  <svg
715
- width="23"
716
- height="23"
710
+ width={iconHeight ?? 23}
711
+ height={iconWidth ?? 23}
717
712
  viewBox="0 0 23 23"
718
713
  fill="none"
719
714
  xmlns="http://www.w3.org/2000/svg"
720
715
  className={iconClassName}
721
- >
722
- <path
723
- d="M8.5122 3.23988C8.24704 3.23883 7.99232 3.34315 7.80405 3.52988C7.61579 3.71662 7.5094 3.97048 7.50828 4.23564C7.50947 4.37731 7.54062 4.51712 7.59969 4.64588C8.23665 6.46253 8.27952 7.80255 7.86928 9.02816C7.403 10.3972 6.66307 11.7639 4.9639 13.4588C4.82479 13.5989 4.72997 13.7768 4.69125 13.9704C4.65253 14.164 4.67163 14.3647 4.74616 14.5475C4.82175 14.7303 4.94981 14.8866 5.11415 14.9966C5.2785 15.1067 5.47177 15.1656 5.66958 15.1659L10.2559 15.1717L11.3164 22.6591L12.3956 15.1743L16.9804 15.1801C17.1123 15.1808 17.243 15.1547 17.3645 15.1035C17.4869 15.0534 17.598 14.9807 17.69 14.8889C17.7821 14.7971 17.8551 14.6862 17.9054 14.5639C17.9819 14.3817 18.0024 14.1808 17.9644 13.9868C17.9264 13.7928 17.8315 13.6146 17.6918 13.4747C15.9969 11.7755 15.2597 10.4078 14.8102 9.05239C14.4023 7.82646 14.4486 6.48655 15.0908 4.6708C15.1504 4.54255 15.1817 4.40294 15.1825 4.2615C15.182 3.99633 15.0763 3.7422 14.8885 3.555C14.7007 3.3678 14.4462 3.26284 14.1811 3.26322L8.5122 3.23988Z"
724
- className={className}
725
- />
716
+ onClick={onClick} >
717
+ <path className={className} d="M8.5122 3.23988C8.24704 3.23883 7.99232 3.34315 7.80405 3.52988C7.61579 3.71662 7.5094 3.97048 7.50828 4.23564C7.50947 4.37731 7.54062 4.51712 7.59969 4.64588C8.23665 6.46253 8.27952 7.80255 7.86928 9.02816C7.403 10.3972 6.66307 11.7639 4.9639 13.4588C4.82479 13.5989 4.72997 13.7768 4.69125 13.9704C4.65253 14.164 4.67163 14.3647 4.74616 14.5475C4.82175 14.7303 4.94981 14.8866 5.11415 14.9966C5.2785 15.1067 5.47177 15.1656 5.66958 15.1659L10.2559 15.1717L11.3164 22.6591L12.3956 15.1743L16.9804 15.1801C17.1123 15.1808 17.243 15.1547 17.3645 15.1035C17.4869 15.0534 17.598 14.9807 17.69 14.8889C17.7821 14.7971 17.8551 14.6862 17.9054 14.5639C17.9819 14.3817 18.0024 14.1808 17.9644 13.9868C17.9264 13.7928 17.8315 13.6146 17.6918 13.4747C15.9969 11.7755 15.2597 10.4078 14.8102 9.05239C14.4023 7.82646 14.4486 6.48655 15.0908 4.6708C15.1504 4.54255 15.1817 4.40294 15.1825 4.2615C15.182 3.99633 15.0763 3.7422 14.8885 3.555C14.7007 3.3678 14.4462 3.26284 14.1811 3.26322L8.5122 3.23988Z" />
726
718
  </svg> : ''}
727
719
 
728
720
  {name === 'home' ?
729
- <svg width="30" height="28" viewBox="0 0 30 28" fill="none" xmlns="http://www.w3.org/2000/svg">
721
+ <svg
722
+ width={iconHeight ?? 30}
723
+ height={iconWidth ?? 28} viewBox="0 0 30 28" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}>
730
724
  <path className={className} d="M29.0318 13.7752L16.3962 1.14624L15.5493 0.299293C15.3563 0.107591 15.0953 0 14.8233 0C14.5513 0 14.2904 0.107591 14.0974 0.299293L0.614907 13.7752C0.41717 13.9722 0.260895 14.2068 0.155307 14.4651C0.0497187 14.7235 -0.00304321 15.0004 0.000135543 15.2795C0.0132158 16.4305 0.971344 17.3494 2.12241 17.3494H3.51218V28H26.1345V17.3494H27.5537C28.1129 17.3494 28.6393 17.1303 29.035 16.7346C29.2299 16.5404 29.3842 16.3095 29.4892 16.0552C29.5942 15.801 29.6476 15.5284 29.6465 15.2533C29.6465 14.6974 29.4274 14.1709 29.0318 13.7752ZM16.6546 25.6456H12.9921V18.9746H16.6546V25.6456ZM23.78 14.995V25.6456H18.7474V18.1898C18.7474 17.4671 18.1621 16.8818 17.4394 16.8818H12.2073C11.4846 16.8818 10.8993 17.4671 10.8993 18.1898V25.6456H5.86663V14.995H2.72737L14.8266 2.90553L15.582 3.66092L26.9226 14.995H23.78Z" fill="#B0AEAE" />
731
725
  </svg> : ''}
732
726
 
733
727
  {name === 'registry' ?
734
728
  <svg
729
+ width={iconHeight ?? 26}
730
+ height={iconWidth ?? 30}
735
731
  className={iconClassName}
736
- width="26" height="30" viewBox="0 0 26 30" fill="none" xmlns="http://www.w3.org/2000/svg">
732
+ viewBox="0 0 26 30" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}>
737
733
  <path className={className} d="M22.0547 0.75H4.60938C4.16964 0.75 3.77863 0.850347 3.44845 1.06336C3.13194 1.26756 2.89559 1.5259 2.75429 1.8411C2.6204 2.13979 2.55469 2.46204 2.55469 2.80469V6.02734H1.84766C1.54151 6.02734 1.27552 6.14254 1.06461 6.36517C0.856876 6.58444 0.75 6.85093 0.75 7.15234C0.75 7.34178 0.797803 7.52322 0.888787 7.69382C0.985045 7.8743 1.1257 8.01496 1.30618 8.11121C1.47678 8.2022 1.65822 8.25 1.84766 8.25H2.55469V11.2773H1.92969C1.74026 11.2773 1.55881 11.3251 1.38821 11.4161C1.20773 11.5124 1.06708 11.653 0.970818 11.8335C0.879834 12.0041 0.832031 12.1856 0.832031 12.375C0.832031 12.6767 0.93929 12.9413 1.15135 13.1533C1.36341 13.3654 1.62799 13.4727 1.92969 13.4727H2.55469V16.5273H1.90234C1.75703 16.5273 1.61696 16.5579 1.48444 16.6181C1.36146 16.674 1.24918 16.747 1.14836 16.8366C1.03603 16.9364 0.951142 17.0594 0.892278 17.2007C0.835077 17.338 0.804688 17.48 0.804688 17.625C0.804688 17.9307 0.919369 18.1987 1.13768 18.417C1.35161 18.6309 1.6091 18.75 1.90234 18.75H2.55469V21.75H1.90234C1.80836 21.75 1.71509 21.7618 1.62296 21.7848C1.52835 21.8085 1.4386 21.8442 1.35448 21.8923C1.2704 21.9404 1.19358 21.9997 1.124 22.0693C1.05443 22.1389 0.995049 22.2157 0.947001 22.2998C0.898932 22.3839 0.863147 22.4737 0.839496 22.5683C0.816462 22.6604 0.804688 22.7537 0.804688 22.8477C0.804688 23.1534 0.919369 23.4214 1.13768 23.6397C1.35161 23.8536 1.6091 23.9727 1.90234 23.9727H2.55469V27.25C2.55469 27.9347 2.75706 28.4796 3.22087 28.8076C3.63471 29.1003 4.09034 29.25 4.58203 29.25H22.0547C22.8494 29.25 23.533 28.969 24.0908 28.4112C24.6487 27.8533 24.9297 27.1697 24.9297 26.375V3.625C24.9297 2.83029 24.6487 2.14668 24.0908 1.58885C23.533 1.03102 22.8494 0.75 22.0547 0.75ZM4.80469 27V23.9727H5.45703C5.76275 23.9727 6.03073 23.858 6.24904 23.6397C6.46735 23.4214 6.58203 23.1534 6.58203 22.8477C6.58203 22.7026 6.55164 22.5607 6.49444 22.4234C6.43558 22.2821 6.35069 22.1591 6.23836 22.0592C6.13754 21.9696 6.02526 21.8967 5.90228 21.8408C5.76477 21.7783 5.6147 21.75 5.45703 21.75H4.80469V18.75H5.45703C5.66496 18.75 5.8585 18.6973 6.02972 18.5872C6.18745 18.4858 6.31788 18.3554 6.41928 18.1977C6.52935 18.0265 6.58203 17.8329 6.58203 17.625C6.58203 17.3189 6.46684 17.0529 6.2442 16.8419C6.02493 16.6342 5.75845 16.5273 5.45703 16.5273H4.80469V13.4727H5.48438C5.68677 13.4727 5.87628 13.4273 6.04591 13.3303C6.21227 13.2353 6.34465 13.1029 6.43972 12.9365C6.53665 12.7669 6.58203 12.5774 6.58203 12.375C6.58203 12.2373 6.55901 12.1013 6.51451 11.9678C6.46494 11.8191 6.38213 11.6901 6.2657 11.5866C6.16488 11.497 6.05261 11.424 5.92962 11.3681C5.79211 11.3056 5.64204 11.2773 5.48438 11.2773H4.80469V8.25H5.40234C5.70404 8.25 5.96862 8.14274 6.18068 7.93068C6.39274 7.71862 6.5 7.45404 6.5 7.15234C6.5 6.85093 6.39312 6.58444 6.18539 6.36517C5.97447 6.14254 5.70849 6.02734 5.40234 6.02734H4.80469V3H18.3047V27H4.80469ZM22.6797 26.375C22.6797 26.5432 22.6212 26.6854 22.4931 26.8135C22.3651 26.9415 22.2229 27 22.0547 27H20.5547V3H22.0547C22.2229 3 22.3651 3.0585 22.4931 3.18654C22.6212 3.31459 22.6797 3.45676 22.6797 3.625V26.375Z" fill="#B0AEAE" />
738
734
  </svg> : ''}
739
735
 
740
736
  {name === 'material' ?
741
- <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
737
+ <svg
738
+ width={iconHeight ?? 28}
739
+ height={iconWidth ?? 28}
740
+ viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}>
742
741
  <path className={className} fillRule="evenodd" clipRule="evenodd" d="M15.8385 11.5611L26.4319 22.1544C26.8985 22.6211 26.8985 23.3561 26.4319 23.7994L23.7485 26.4827C23.2935 26.9377 22.5585 26.9377 22.1035 26.4827L11.4752 15.8544C8.76854 16.8694 5.60688 16.2977 3.43688 14.1277C0.753544 11.4561 0.508544 7.26773 2.67854 4.3044L7.14688 8.77273L8.80354 7.12773L4.32354 2.63606C7.29854 0.466063 11.4752 0.711063 14.1585 3.3944C16.3635 5.61106 16.9235 8.83106 15.8385 11.5611ZM11.8952 12.9844L22.9319 24.0211L23.9586 22.9827L12.9336 11.9577C13.4702 11.2694 13.8202 10.4994 13.9602 9.67106C14.2519 8.04939 13.7736 6.31106 12.5136 5.05106C11.4052 3.95439 9.94689 3.44106 8.50022 3.52272L12.1052 7.12772L7.15855 12.0744L3.55355 8.46939C3.47189 9.91606 3.98522 11.3861 5.09355 12.4827C6.30689 13.6961 7.97522 14.1744 9.56189 13.9411C10.3902 13.8244 11.1836 13.5094 11.8952 12.9844Z" fill="#B0AEAE" />
743
742
  </svg> : ''}
744
743
 
745
744
  {name === 'supply' ?
746
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
745
+ <svg
746
+ width={iconHeight ?? 24}
747
+ height={iconWidth ?? 24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}>
747
748
  <path fillRule="evenodd" clipRule="evenodd" d="M17.21 9.48977H22C22.55 9.48977 23 9.93977 23 10.4898L22.97 10.7598L20.43 20.0298C20.19 20.8698 19.42 21.4898 18.5 21.4898H5.5C4.58 21.4898 3.81 20.8698 3.58 20.0298L1.04 10.7598C1.01 10.6698 1 10.5798 1 10.4898C1 9.93977 1.45 9.48977 2 9.48977H6.79L11.17 2.93977C11.36 2.64977 11.68 2.50977 12 2.50977C12.32 2.50977 12.64 2.64977 12.83 2.92977L17.21 9.48977ZM14.8 9.48977L12 5.28977L9.2 9.48977H14.8ZM18.5 19.4898L5.51 19.4998L3.31 11.4898H20.7L18.5 19.4898ZM10 15.4898C10 14.3898 10.9 13.4898 12 13.4898C13.1 13.4898 14 14.3898 14 15.4898C14 16.5898 13.1 17.4898 12 17.4898C10.9 17.4898 10 16.5898 10 15.4898Z" fill="#0057FF" />
748
749
  </svg> : ''}
749
750
 
750
751
  {name === 'delivery' ?
751
- <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
752
+ <svg
753
+ width={iconHeight ?? 27}
754
+ height={iconWidth ?? 27} viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}>
752
755
  <path fillRule="evenodd" clipRule="evenodd" d="M22.5 9H19.125V4.5H3.375C2.1375 4.5 1.125 5.5125 1.125 6.75V19.125H3.375C3.375 20.9925 4.8825 22.5 6.75 22.5C8.6175 22.5 10.125 20.9925 10.125 19.125H16.875C16.875 20.9925 18.3825 22.5 20.25 22.5C22.1175 22.5 23.625 20.9925 23.625 19.125H25.875V13.5L22.5 9ZM21.9375 10.6875L24.1425 13.5H19.125V10.6875H21.9375ZM5.625 19.125C5.625 19.7437 6.13125 20.25 6.75 20.25C7.36875 20.25 7.875 19.7437 7.875 19.125C7.875 18.5063 7.36875 18 6.75 18C6.13125 18 5.625 18.5063 5.625 19.125ZM9.2475 16.875C8.62875 16.1888 7.75125 15.75 6.75 15.75C5.74875 15.75 4.87125 16.1888 4.2525 16.875H3.375V6.75H16.875V16.875H9.2475ZM19.125 19.125C19.125 19.7437 19.6313 20.25 20.25 20.25C20.8687 20.25 21.375 19.7437 21.375 19.125C21.375 18.5063 20.8687 18 20.25 18C19.6313 18 19.125 18.5063 19.125 19.125Z" fill="#0057FF" />
753
756
  </svg> : ''}
754
757