pico-pixel-player

pico-pixel-player/webclient/src/components/SVG.tsx
SVG.tsx
⎇
Raw
1import { type Accessor, createSignal } from "solid-js";
2
3const defaultColor = "#888";
4const highlightColor = "#AAA";
5
6interface StateProps {
7 disabled: Accessor<boolean>;
8}
9
10export function CogSVG() {
11 const [hovered, setHovered] = createSignal();
12 return (
13 <svg
14 xmlns="http://www.w3.org/2000/svg"
15 width="24"
16 height="24"
17 viewBox="0 0 24 24"
18 onMouseEnter={() => setHovered(true)}
19 onMouseLeave={() => setHovered(false)}
20 >
21 <path
22 fill={hovered() ? "#FFF" : "#CCC"}
23 d="M21 10V9h-1V7h1V5h-1V4h-1V3h-2v1h-2V3h-1V1h-4v2H9v1H7V3H5v1H4v1H3v2h1v2H3v1H1v4h2v1h1v2H3v2h1v1h1v1h2v-1h2v1h1v2h4v-2h1v-1h2v1h2v-1h1v-1h1v-2h-1v-2h1v-1h2v-4zm-11 0V9h4v1h1v4h-1v1h-4v-1H9v-4z"
24 />
25 </svg>
26 );
27}
28
29export function DatabaseSVG() {
30 const [hovered, setHovered] = createSignal();
31 return (
32 <svg
33 xmlns="http://www.w3.org/2000/svg"
34 width="24"
35 height="24"
36 viewBox="0 0 24 24"
37 onMouseEnter={() => setHovered(true)}
38 onMouseLeave={() => setHovered(false)}
39 >
40 <path
41 fill={hovered() ? "#FFF" : "#CCC"}
42 //scale the original glyph to match the visual weight of the other 24px toolbar icons
43 transform="translate(-3.625 0.75) scale(1.25)"
44 d="M19.504 11.502v1h-1v1H6.5v-1h-1v-1h-1v3.001h1v1h1v1h12.003v-1h1v-1h1v-3zM9.502 15.503v-1h6.001v1zM19.504 7.501v1h-1v1H6.5v-1h-1v-1h-1v3.001h1v1h1v1h12.003v-1h1v-1h1v-3zM9.502 11.502v-1h6.001v1zM19.504 3.5v-1h-1v-1H6.5v1h-1v1h-1v3.001h1v1h1v1h12.003v-1h1v-1h1v-3zm-12.003 0v1h10.003v-1h1v1h-1v1H7.5v-1h-1v-1zm2 4.001v-1h6.002v1z"
45 />
46 </svg>
47 );
48}
49
50export function PlaySVG(props: StateProps) {
51 const [hovered, setHovered] = createSignal();
52 return (
53 <svg
54 xmlns="http://www.w3.org/2000/svg"
55 width="24"
56 height="24"
57 viewBox="0 0 24 24"
58 onMouseEnter={() => setHovered(true)}
59 onMouseLeave={() => setHovered(false)}
60 >
61 <path
62 fill={hovered() && !props.disabled() ? highlightColor : defaultColor}
63 d="M22 11v2h-1v1h-1v1h-2v1h-2v1h-1v1h-2v1h-2v1h-1v1H8v1H6v1H3v-1H2V2h1V1h3v1h2v1h2v1h1v1h2v1h2v1h1v1h2v1h2v1h1v1z"
64 />
65 </svg>
66 );
67}
68
69export function PauseSVG(props: StateProps) {
70 const [hovered, setHovered] = createSignal();
71 return (
72 <svg
73 xmlns="http://www.w3.org/2000/svg"
74 width="24"
75 height="24"
76 viewBox="0 0 24 24"
77 onMouseEnter={() => setHovered(true)}
78 onMouseLeave={() => setHovered(false)}
79 >
80 <path
81 fill={hovered() && !props.disabled() ? highlightColor : defaultColor}
82 d="M23 2v20h-1v1h-7v-1h-1V2h1V1h7v1zM9 2h1v20H9v1H2v-1H1V2h1V1h7z"
83 />
84 </svg>
85 );
86}
87
88export function NextTrackSVG(props: StateProps) {
89 const [hovered, setHovered] = createSignal();
90 return (
91 <svg
92 xmlns="http://www.w3.org/2000/svg"
93 width="24"
94 height="24"
95 viewBox="0 0 24 24"
96 onMouseEnter={() => setHovered(true)}
97 onMouseLeave={() => setHovered(false)}
98 >
99 <path
100 fill={hovered() && !props.disabled() ? highlightColor : defaultColor}
101 d="M7 19v-2h1v-1h1v-1h1v-1h1v-1h1v-2h-1v-1h-1V9H9V8H8V7H7V5h1V4h2v1h1v1h1v1h1v1h1v1h1v1h1v1h1v2h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1H8v-1z"
102 />
103 </svg>
104 );
105}
106
107export function PreviousTrackSVG(props: StateProps) {
108 const [hovered, setHovered] = createSignal();
109 return (
110 <svg
111 xmlns="http://www.w3.org/2000/svg"
112 width="24"
113 height="24"
114 viewBox="0 0 24 24"
115 onMouseEnter={() => setHovered(true)}
116 onMouseLeave={() => setHovered(false)}
117 >
118 <path
119 fill={hovered() && !props.disabled() ? highlightColor : defaultColor}
120 d="M17 5v2h-1v1h-1v1h-1v1h-1v1h-1v2h1v1h1v1h1v1h1v1h1v2h-1v1h-2v-1h-1v-1h-1v-1h-1v-1h-1v-1H9v-1H8v-1H7v-2h1v-1h1V9h1V8h1V7h1V6h1V5h1V4h2v1z"
121 />
122 </svg>
123 );
124}
125
126export function ShuffleSVG(props: StateProps) {
127 return (
128 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
129 <path fill={!props.disabled() ? highlightColor : defaultColor} d="M8 14h1v3H8v1H7v1H1v-3h6v-1h1z" />
130 <path
131 fill={!props.disabled() ? highlightColor : defaultColor}
132 d="M22 17h1v1h-1v1h-1v1h-1v1h-1v1h-1v-3h-4v-1h-1v-1h-1v-2h-1v-1h-1v-2H9v-1H8V9H7V8H1V5h7v1h1v2h1v2h1v1h1v2h1v1h1v2h4v-3h1v1h1v1h1v1h1z"
133 />
134 <path
135 fill={!props.disabled() ? highlightColor : defaultColor}
136 d="M23 6v1h-1v1h-1v1h-1v1h-1v1h-1V8h-4v1h-1v1h-1V7h1V6h1V5h4V2h1v1h1v1h1v1h1v1z"
137 />
138 </svg>
139 );
140}
141
142export function RepeatSVG(props: StateProps) {
143 return (
144 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
145 <path
146 fill={!props.disabled() ? highlightColor : defaultColor}
147 d="M23 14v1h-1v2h-1v2h-1v1h-1v1h-2v1h-2v1H9v-1H7v-1H5v-1H3v1H2v1H1v-8h8v1H8v1H7v2h1v1h2v1h4v-1h2v-1h1v-1h1v-2h1v-1zm0-12v8h-8V9h1V8h1V6h-1V5h-2V4h-4v1H8v1H7v1H6v2H5v1H1V9h1V7h1V5h1V4h1V3h2V2h2V1h6v1h2v1h2v1h2V3h1V2z"
148 />
149 </svg>
150 );
151}
152
153export function VolumeSVG() {
154 return (
155 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
156 <path
157 fill={defaultColor}
158 d="M14 2v20h-3v-1h-1v-1H9v-1H8v-1H7v-1H6v-1H1V8h5V7h1V6h1V5h1V4h1V3h1V2zm3 13v-1h-1v-1h1v-2h-1v-1h1V9h1v1h1v4h-1v1z"
159 />
160 <path
161 fill={defaultColor}
162 d="M23 10v4h-1v2h-1v1h-1v1h-1v-1h-1v-1h1v-1h1v-1h1v-4h-1V9h-1V8h-1V7h1V6h1v1h1v1h1v2z"
163 />
164 </svg>
165 );
166}
167
168export function MusicSVG() {
169 return (
170 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
171 <path
172 fill={defaultColor}
173 d="M23 1v17h-1v1h-1v1h-4v-1h-1v-1h-1v-3h1v-1h1v-1h3V8h-2v1h-3v1h-4v1H9v10H8v1H7v1H3v-1H2v-1H1v-3h1v-1h1v-1h3V6h2V5h3V4h4V3h3V2h3V1z"
174 />
175 </svg>
176 );
177}
178
179export function ClosedFolderSVG(props: { forButton: boolean }) {
180 const [hovered, setHovered] = createSignal();
181
182 return (
183 <svg
184 xmlns="http://www.w3.org/2000/svg"
185 width="24"
186 height="24"
187 viewBox="0 0 24 24"
188 onMouseEnter={() => setHovered(true)}
189 onMouseLeave={() => setHovered(false)}
190 >
191 <path
192 fill={props.forButton ? (hovered() ? highlightColor : defaultColor) : "#ead800"}
193 d="M23 6v15h-1v1H2v-1H1V3h1V2h9v1h1v1h1v1h9v1z"
194 />
195 </svg>
196 );
197}
198
199export function OpenFolderSVG() {
200 const [hovered, setHovered] = createSignal();
201 return (
202 <svg
203 xmlns="http://www.w3.org/2000/svg"
204 width="24"
205 height="24"
206 viewBox="0 0 24 24"
207 onMouseEnter={() => setHovered(true)}
208 onMouseLeave={() => setHovered(false)}
209 >
210 <path fill={hovered() ? highlightColor : defaultColor} d="M2 16H1V3h1V2h7v1h1v1h9v1h1v4H5v1H4v2H3v2H2z" />
211 <path
212 fill={hovered() ? highlightColor : defaultColor}
213 d="M23 10v2h-1v2h-1v2h-1v2h-1v3h-1v1H3v-1H2v-3h1v-2h1v-2h1v-2h1v-2z"
214 />
215 </svg>
216 );
217}
218
219export function FullscreenSVG() {
220 const [hovered, setHovered] = createSignal();
221 return (
222 <svg
223 xmlns="http://www.w3.org/2000/svg"
224 width="24"
225 height="24"
226 viewBox="0 0 24 24"
227 onMouseEnter={() => setHovered(true)}
228 onMouseLeave={() => setHovered(false)}
229 >
230 <path
231 fill={hovered() ? highlightColor : defaultColor}
232 d="M9 20v3H2v-1H1v-7h3v5zM9 1v3H4v5H1V2h1V1zm14 14v7h-1v1h-7v-3h5v-5zm0-13v7h-3V4h-5V1h7v1z"
233 />
234 </svg>
235 );
236}
237
238export function TheaterSVG() {
239 const [hovered, setHovered] = createSignal();
240 return (
241 <svg
242 xmlns="http://www.w3.org/2000/svg"
243 width="24"
244 height="24"
245 viewBox="0 0 24 24"
246 onMouseEnter={() => setHovered(true)}
247 onMouseLeave={() => setHovered(false)}
248 >
249 <path fill={hovered() ? highlightColor : defaultColor} fill-rule="evenodd" d="M1 4h22v16H1zm3 3v10h16V7z" />
250 </svg>
251 );
252}
253
254export function ClearSVG() {
255 const [hovered, setHovered] = createSignal();
256 return (
257 <svg
258 xmlns="http://www.w3.org/2000/svg"
259 width="24"
260 height="24"
261 viewBox="0 0 24 24"
262 onMouseEnter={() => setHovered(true)}
263 onMouseLeave={() => setHovered(false)}
264 >
265 <path
266 fill={hovered() ? highlightColor : defaultColor}
267 d="M15 13h1v1h1v1h1v1h1v1h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1H9v1H8v1H7v1H6v1H5v1H4v-1H3v-1H2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-2H8v-1H7V9H6V8H5V7H4V6H3V5H2V4h1V3h1V2h1v1h1v1h1v1h1v1h1v1h1v1h1v1h2V8h1V7h1V6h1V5h1V4h1V3h1V2h1v1h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1z"
268 />
269 </svg>
270 );
271}
272
273export function DeleteSVG() {
274 const [hovered, setHovered] = createSignal();
275
276 return (
277 <svg
278 xmlns="http://www.w3.org/2000/svg"
279 width="24"
280 height="24"
281 viewBox="0 0 24 24"
282 onMouseEnter={() => setHovered(true)}
283 onMouseLeave={() => setHovered(false)}
284 >
285 <path
286 fill={hovered() ? highlightColor : defaultColor}
287 d="M22 3v2H2V3h6V2h1V1h6v1h1v1zM4 7v15h1v1h14v-2h1V7zm12 12h-2V9h2zm-6 0H8V9h2z"
288 />
289 </svg>
290 );
291}
292
293export function RefreshSVG() {
294 const [hovered, setHovered] = createSignal();
295 return (
296 <svg
297 xmlns="http://www.w3.org/2000/svg"
298 width="24"
299 height="24"
300 viewBox="0 0 24 24"
301 onMouseEnter={() => setHovered(true)}
302 onMouseLeave={() => setHovered(false)}
303 >
304 <path
305 fill={hovered() ? highlightColor : defaultColor}
306 d="M23 14v1h-1v2h-1v2h-1v1h-1v1h-2v1h-2v1H9v-1H7v-1H5v-1H3v1H2v1H1v-8h8v1H8v1H7v2h1v1h2v1h4v-1h2v-1h1v-1h1v-2h1v-1zm0-12v8h-8V9h1V8h1V6h-1V5h-2V4h-4v1H8v1H7v1H6v2H5v1H1V9h1V7h1V5h1V4h1V3h2V2h2V1h6v1h2v1h2v1h2V3h1V2z"
307 />
308 </svg>
309 );
310}
311
312export function DragSVG() {
313 return (
314 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
315 <path
316 fill={defaultColor}
317 d="M22 11h1v2h-1v1H2v-1H1v-2h1v-1h20zm0 8h1v2h-1v1H2v-1H1v-2h1v-1h20zm1-16v2h-1v1H2V5H1V3h1V2h20v1z"
318 />
319 </svg>
320 );
321}
322
323export function LinkSVG() {
324 const [hovered, setHovered] = createSignal();
325
326 return (
327 <svg
328 xmlns="http://www.w3.org/2000/svg"
329 width="24"
330 height="24"
331 viewBox="0 0 24 24"
332 onMouseEnter={() => setHovered(true)}
333 onMouseLeave={() => setHovered(false)}
334 >
335 <path
336 fill={hovered() ? highlightColor : defaultColor}
337 d="M16 10h1v7h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1H5v-1H4v-1H3v-1H2v-1H1v-5h1v-1h1v-1h1v-1h1v4H4v3h1v1h1v1h3v-1h1v-1h1v-1h1v-1h1v-1h1v-3h-1v-1h-1v-1h1V9h1V8h1v1h1z"
338 />
339 <path
340 fill={hovered() ? highlightColor : defaultColor}
341 d="M23 5v5h-1v1h-1v1h-1v1h-1V9h1V6h-1V5h-1V4h-3v1h-1v1h-1v1h-1v1h-1v1h-1v3h1v1h1v1h-1v1h-1v1H9v-1H8v-1H7V7h1V6h1V5h1V4h1V3h1V2h1V1h6v1h1v1h1v1h1v1z"
342 />
343 </svg>
344 );
345}
346
347export function DownloadSVG() {
348 const [hovered, setHovered] = createSignal();
349
350 return (
351 <svg
352 xmlns="http://www.w3.org/2000/svg"
353 width="24"
354 height="24"
355 viewBox="0 0 24 24"
356 onMouseEnter={() => setHovered(true)}
357 onMouseLeave={() => setHovered(false)}
358 >
359 <path
360 fill={hovered() ? highlightColor : defaultColor}
361 d="M2 20h20v3H2zM20 8v2h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-2v-1h-1v-1H9v-1H8v-1H7v-1H6v-1H5v-1H4V8h1V7h2v1h1v1h1v1h1V1h4v9h1V9h1V8h1V7h2v1z"
362 />
363 </svg>
364 );
365}
366
367export function SyncSVG() {
368 const [hovered, setHovered] = createSignal();
369
370 return (
371 <svg
372 xmlns="http://www.w3.org/2000/svg"
373 width="24"
374 height="24"
375 viewBox="0 0 24 24"
376 onMouseEnter={() => setHovered(true)}
377 onMouseLeave={() => setHovered(false)}
378 >
379 <path
380 fill={hovered() ? highlightColor : defaultColor}
381 d="M22 12v-1h-2V9h-1V8h-1V7h-3v1h-1V6h-1V5H8v1H7v1H6v1H5v3H2v1H1v5h1v1h1v1h2v1h14v-1h2v-1h1v-1h1v-5zM9 17v-1H8v-1H7v-1H6v-1h3V9h3v4h3v1h-1v1h-1v1h-1v1h-1v1h-1v-1z"
382 />
383 </svg>
384 );
385}
386
387export function UploadSVG() {
388 const [hovered, setHovered] = createSignal();
389
390 return (
391 <svg
392 xmlns="http://www.w3.org/2000/svg"
393 width="24"
394 height="24"
395 viewBox="0 0 24 24"
396 onMouseEnter={() => setHovered(true)}
397 onMouseLeave={() => setHovered(false)}
398 >
399 <path
400 fill={hovered() ? highlightColor : defaultColor}
401 d="M5 10H4V8h1V7h1V6h1V5h1V4h1V3h1V2h1V1h2v1h1v1h1v1h1v1h1v1h1v1h1v1h1v2h-1v1h-2v-1h-1V9h-1V8h-1v9h-4V8H9v1H8v1H7v1H5zM2 20h20v3H2z"
402 />
403 </svg>
404 );
405}
406
407export function SpinnerSVG() {
408 return (
409 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
410 <path fill={defaultColor} d="M23 9v6h-1v2h-3v-2h1V9h-1V7h-1V6h-1V5h-2V4h-2V3h-1V1h3v1h2v1h2v1h1v1h1v2h1v2z" />
411 </svg>
412 );
413}
414
415export function PlaylistSVG() {
416 const [hovered, setHovered] = createSignal();
417
418 return (
419 <svg
420 xmlns="http://www.w3.org/2000/svg"
421 width="24"
422 height="24"
423 viewBox="0 0 24 24"
424 onMouseEnter={() => setHovered(true)}
425 onMouseLeave={() => setHovered(false)}
426 >
427 <path fill={hovered() ? highlightColor : defaultColor} d="M1 3h12v3H1zm0 6h12v3H1zm0 6h6v3H1z" />
428 <path
429 fill={hovered() ? highlightColor : defaultColor}
430 d="M23 1v6h-2v1h-2v13h-1v1h-1v1h-5v-1h-2v-1H9v-3h1v-1h2v-1h4V4h1V3h2V2h2V1z"
431 />
432 </svg>
433 );
434}
435
436export function SaveSVG() {
437 const [hovered, setHovered] = createSignal();
438
439 return (
440 <svg
441 xmlns="http://www.w3.org/2000/svg"
442 width="24"
443 height="24"
444 viewBox="0 0 24 24"
445 onMouseEnter={() => setHovered(true)}
446 onMouseLeave={() => setHovered(false)}
447 >
448 <path
449 fill={hovered() ? highlightColor : defaultColor}
450 d="M22 7V6h-1V5h-1V4h-1V3h-1V2h-1V1H2v1H1v20h1v1h20v-1h1V7zM9 19v-4h1v-1h4v1h1v4h-1v1h-4v-1zm7-9H4V4h12z"
451 />
452 </svg>
453 );
454}
455
456export function DownSVG() {
457 const [hovered, setHovered] = createSignal();
458 return (
459 <svg
460 xmlns="http://www.w3.org/2000/svg"
461 width="24"
462 height="24"
463 viewBox="0 0 24 24"
464 onMouseEnter={() => setHovered(true)}
465 onMouseLeave={() => setHovered(false)}
466 >
467 <path
468 fill={hovered() ? highlightColor : defaultColor}
469 d="M23 8v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-2v-1h-1v-1H9v-1H8v-1H7v-1H6v-1H5v-1H4v-1H3v-1H2V9H1V8h1V7h1V6h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h2v-1h1v-1h1v-1h1v-1h1V9h1V8h1V7h1V6h1v1h1v1z"
470 />
471 </svg>
472 );
473}
474
475export function UpSVG() {
476 const [hovered, setHovered] = createSignal();
477 return (
478 <svg
479 xmlns="http://www.w3.org/2000/svg"
480 width="24"
481 height="24"
482 viewBox="0 0 24 24"
483 onMouseEnter={() => setHovered(true)}
484 onMouseLeave={() => setHovered(false)}
485 >
486 <path
487 fill={hovered() ? highlightColor : defaultColor}
488 d="M23 16v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1H9v1H8v1H7v1H6v1H5v1H4v1H3v-1H2v-1H1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1V9h1V8h1V7h1V6h2v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1z"
489 />
490 </svg>
491 );
492}
493
494export function DownloadManagerSVG() {
495 const [hovered, setHovered] = createSignal();
496
497 return (
498 <svg
499 xmlns="http://www.w3.org/2000/svg"
500 width="24"
501 height="24"
502 viewBox="0 0 24 24"
503 onMouseEnter={() => setHovered(true)}
504 onMouseLeave={() => setHovered(false)}
505 >
506 <path
507 fill={hovered() ? highlightColor : defaultColor}
508 d="M2 5h3v3H2zm0 12h3v3H2zm0-6h3v3H2zm21-5v1h-1v1H10V7H9V6h1V5h12v1zm-1 6h1v1h-1v1H10v-1H9v-1h1v-1h12zm0 6h1v1h-1v1H10v-1H9v-1h1v-1h12z"
509 />
510 <path fill="none" d="M0 0h24v24H0z" />
511 </svg>
512 );
513}
514
515export function StopSVG() {
516 const [hovered, setHovered] = createSignal();
517
518 return (
519 <svg
520 xmlns="http://www.w3.org/2000/svg"
521 width="24"
522 height="24"
523 viewBox="0 0 24 24"
524 onMouseEnter={() => setHovered(true)}
525 onMouseLeave={() => setHovered(false)}
526 >
527 <path
528 fill={hovered() ? highlightColor : defaultColor}
529 d="M22 8V7h-1V6h-1V5h-1V4h-1V3h-1V2h-1V1H8v1H7v1H6v1H5v1H4v1H3v1H2v1H1v8h1v1h1v1h1v1h1v1h1v1h1v1h1v1h8v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1V8zm-6 9h-2v-1h-1v-1h-2v1h-1v1H8v-1H7v-2h1v-1h1v-2H8v-1H7V8h1V7h2v1h1v1h2V8h1V7h2v1h1v2h-1v1h-1v2h1v1h1v2h-1z"
530 />
531 </svg>
532 );
533}
534
535export function SquareSVG(props: Partial<StateProps> = {}) {
536 const [hovered, setHovered] = createSignal();
537
538 return (
539 <svg
540 xmlns="http://www.w3.org/2000/svg"
541 width="24"
542 height="24"
543 viewBox="0 0 24 24"
544 onMouseEnter={() => setHovered(true)}
545 onMouseLeave={() => setHovered(false)}
546 >
547 <path fill={hovered() && !(props?.disabled?.() ?? false) ? highlightColor : defaultColor} d="M4 4h16v16H4z" />
548 </svg>
549 );
550}
551
552export function FilterSVG() {
553 const [hovered, setHovered] = createSignal();
554
555 return (
556 <svg
557 xmlns="http://www.w3.org/2000/svg"
558 width="24"
559 height="24"
560 viewBox="0 0 24 24"
561 onMouseEnter={() => setHovered(true)}
562 onMouseLeave={() => setHovered(false)}
563 >
564 <path
565 fill={hovered() ? highlightColor : defaultColor}
566 d="M22 20v-1h-1v-1h-1v-1h-1v-1h-2v-1h1v-2h1V7h-1V5h-1V4h-1V3h-1V2h-2V1H7v1H5v1H4v1H3v1H2v2H1v6h1v2h1v1h1v1h1v1h2v1h6v-1h2v-1h1v2h1v1h1v1h1v1h1v1h2v-1h1v-2zm-10-5v1H8v-1H6v-1H5v-2H4V8h1V6h1V5h2V4h4v1h2v1h1v2h1v4h-1v2h-1v1z"
567 />
568 </svg>
569 );
570}
571
572export function InfoSVG() {
573 const [hovered, setHovered] = createSignal();
574
575 return (
576 <svg
577 xmlns="http://www.w3.org/2000/svg"
578 width="24"
579 height="24"
580 viewBox="0 0 24 24"
581 onMouseEnter={() => setHovered(true)}
582 onMouseLeave={() => setHovered(false)}
583 >
584 <path
585 fill={hovered() ? highlightColor : defaultColor}
586 d="M22 9V7h-1V5h-1V4h-1V3h-2V2h-2V1H9v1H7v1H5v1H4v1H3v2H2v2H1v6h1v2h1v2h1v1h1v1h2v1h2v1h6v-1h2v-1h2v-1h1v-1h1v-2h1v-2h1V9zM11 6h2v2h-2zm-1 9h1v-5h-1V9h3v6h1v2h-4z"
587 />
588 <path fill="none" d="M0 0h24v24H0z" />
589 </svg>
590 );
591}
592
593export function LoginSVG() {
594 const [hovered, setHovered] = createSignal();
595
596 return (
597 <svg
598 xmlns="http://www.w3.org/2000/svg"
599 width="24"
600 height="24"
601 viewBox="0 0 24 24"
602 onMouseEnter={() => setHovered(true)}
603 onMouseLeave={() => setHovered(false)}
604 >
605 <path
606 fill={hovered() ? highlightColor : defaultColor}
607 d="M20 2h3v20h-3zM8 4h2v1h1v1h1v1h1v1h1v1h1v1h1v1h1v2h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1H8v-1H7v-2h1v-1h1v-1h1v-1H1v-4h9V9H9V8H8V7H7V5h1z"
608 />
609 </svg>
610 );
611}
612
613export function LogoutSVG() {
614 const [hovered, setHovered] = createSignal();
615
616 return (
617 <svg
618 xmlns="http://www.w3.org/2000/svg"
619 width="24"
620 height="24"
621 viewBox="0 0 24 24"
622 onMouseEnter={() => setHovered(true)}
623 onMouseLeave={() => setHovered(false)}
624 >
625 <path
626 transform="scale(-1,1) translate(-24,0)"
627 fill={hovered() ? highlightColor : defaultColor}
628 d="M20 2h3v20h-3zM8 4h2v1h1v1h1v1h1v1h1v1h1v1h1v1h1v2h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1H8v-1H7v-2h1v-1h1v-1h1v-1H1v-4h9V9H9V8H8V7H7V5h1z"
629 />
630 </svg>
631 );
632}
633