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 ClearSVG() {
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
250 fill={hovered() ? highlightColor : defaultColor}
251 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"
252 />
253 </svg>
254 );
255}
256
257export function DeleteSVG() {
258 const [hovered, setHovered] = createSignal();
259
260 return (
261 <svg
262 xmlns="http://www.w3.org/2000/svg"
263 width="24"
264 height="24"
265 viewBox="0 0 24 24"
266 onMouseEnter={() => setHovered(true)}
267 onMouseLeave={() => setHovered(false)}
268 >
269 <path
270 fill={hovered() ? highlightColor : defaultColor}
271 d="M22 3v2H2V3h6V2h1V1h6v1h1v1zM4 7v15h1v1h14v-2h1V7zm12 12h-2V9h2zm-6 0H8V9h2z"
272 />
273 </svg>
274 );
275}
276
277export function RefreshSVG() {
278 const [hovered, setHovered] = createSignal();
279 return (
280 <svg
281 xmlns="http://www.w3.org/2000/svg"
282 width="24"
283 height="24"
284 viewBox="0 0 24 24"
285 onMouseEnter={() => setHovered(true)}
286 onMouseLeave={() => setHovered(false)}
287 >
288 <path
289 fill={hovered() ? highlightColor : defaultColor}
290 d="M23 14v1h-1v2h-1v2h-1v1h-1v1h-2v1h-2v1H9v-1H7v-1H5v-1H3v1H2v1H1v-8h8v1H8v1H7v2h1v1h2v1h4v-1h2v-1h1v-1h1v-2h1v-1zm0-12v8h-8V9h1V8h1V6h-1V5h-2V4h-4v1H8v1H7v1H6v2H5v1H1V9h1V7h1V5h1V4h1V3h2V2h2V1h6v1h2v1h2v1h2V3h1V2z"
291 />
292 </svg>
293 );
294}
295
296export function DragSVG() {
297 return (
298 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
299 <path
300 fill={defaultColor}
301 d="M22 11h1v2h-1v1H2v-1H1v-2h1v-1h20zm0 8h1v2h-1v1H2v-1H1v-2h1v-1h20zm1-16v2h-1v1H2V5H1V3h1V2h20v1z"
302 />
303 </svg>
304 );
305}
306
307export function LinkSVG() {
308 const [hovered, setHovered] = createSignal();
309
310 return (
311 <svg
312 xmlns="http://www.w3.org/2000/svg"
313 width="24"
314 height="24"
315 viewBox="0 0 24 24"
316 onMouseEnter={() => setHovered(true)}
317 onMouseLeave={() => setHovered(false)}
318 >
319 <path
320 fill={hovered() ? highlightColor : defaultColor}
321 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"
322 />
323 <path
324 fill={hovered() ? highlightColor : defaultColor}
325 d="M23 5v5h-1v1h-1v1h-1v1h-1V9h1V6h-1V5h-1V4h-3v1h-1v1h-1v1h-1v1h-1v1h-1v3h1v1h1v1h-1v1h-1v1H9v-1H8v-1H7V7h1V6h1V5h1V4h1V3h1V2h1V1h6v1h1v1h1v1h1v1z"
326 />
327 </svg>
328 );
329}
330
331export function DownloadSVG() {
332 const [hovered, setHovered] = createSignal();
333
334 return (
335 <svg
336 xmlns="http://www.w3.org/2000/svg"
337 width="24"
338 height="24"
339 viewBox="0 0 24 24"
340 onMouseEnter={() => setHovered(true)}
341 onMouseLeave={() => setHovered(false)}
342 >
343 <path
344 fill={hovered() ? highlightColor : defaultColor}
345 d="M2 20h20v3H2zM20 8v2h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-2v-1h-1v-1H9v-1H8v-1H7v-1H6v-1H5v-1H4V8h1V7h2v1h1v1h1v1h1V1h4v9h1V9h1V8h1V7h2v1z"
346 />
347 </svg>
348 );
349}
350
351export function SyncSVG() {
352 const [hovered, setHovered] = createSignal();
353
354 return (
355 <svg
356 xmlns="http://www.w3.org/2000/svg"
357 width="24"
358 height="24"
359 viewBox="0 0 24 24"
360 onMouseEnter={() => setHovered(true)}
361 onMouseLeave={() => setHovered(false)}
362 >
363 <path
364 fill={hovered() ? highlightColor : defaultColor}
365 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"
366 />
367 </svg>
368 );
369}
370
371export function UploadSVG() {
372 const [hovered, setHovered] = createSignal();
373
374 return (
375 <svg
376 xmlns="http://www.w3.org/2000/svg"
377 width="24"
378 height="24"
379 viewBox="0 0 24 24"
380 onMouseEnter={() => setHovered(true)}
381 onMouseLeave={() => setHovered(false)}
382 >
383 <path
384 fill={hovered() ? highlightColor : defaultColor}
385 d="M5 10H4V8h1V7h1V6h1V5h1V4h1V3h1V2h1V1h2v1h1v1h1v1h1v1h1v1h1v1h1v1h1v2h-1v1h-2v-1h-1V9h-1V8h-1v9h-4V8H9v1H8v1H7v1H5zM2 20h20v3H2z"
386 />
387 </svg>
388 );
389}
390
391export function SpinnerSVG() {
392 return (
393 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
394 <path fill={defaultColor} d="M23 9v6h-1v2h-3v-2h1V9h-1V7h-1V6h-1V5h-2V4h-2V3h-1V1h3v1h2v1h2v1h1v1h1v2h1v2z" />
395 </svg>
396 );
397}
398
399export function PlaylistSVG() {
400 const [hovered, setHovered] = createSignal();
401
402 return (
403 <svg
404 xmlns="http://www.w3.org/2000/svg"
405 width="24"
406 height="24"
407 viewBox="0 0 24 24"
408 onMouseEnter={() => setHovered(true)}
409 onMouseLeave={() => setHovered(false)}
410 >
411 <path fill={hovered() ? highlightColor : defaultColor} d="M1 3h12v3H1zm0 6h12v3H1zm0 6h6v3H1z" />
412 <path
413 fill={hovered() ? highlightColor : defaultColor}
414 d="M23 1v6h-2v1h-2v13h-1v1h-1v1h-5v-1h-2v-1H9v-3h1v-1h2v-1h4V4h1V3h2V2h2V1z"
415 />
416 </svg>
417 );
418}
419
420export function SaveSVG() {
421 const [hovered, setHovered] = createSignal();
422
423 return (
424 <svg
425 xmlns="http://www.w3.org/2000/svg"
426 width="24"
427 height="24"
428 viewBox="0 0 24 24"
429 onMouseEnter={() => setHovered(true)}
430 onMouseLeave={() => setHovered(false)}
431 >
432 <path
433 fill={hovered() ? highlightColor : defaultColor}
434 d="M22 7V6h-1V5h-1V4h-1V3h-1V2h-1V1H2v1H1v20h1v1h20v-1h1V7zM9 19v-4h1v-1h4v1h1v4h-1v1h-4v-1zm7-9H4V4h12z"
435 />
436 </svg>
437 );
438}
439
440export function DownSVG() {
441 const [hovered, setHovered] = createSignal();
442 return (
443 <svg
444 xmlns="http://www.w3.org/2000/svg"
445 width="24"
446 height="24"
447 viewBox="0 0 24 24"
448 onMouseEnter={() => setHovered(true)}
449 onMouseLeave={() => setHovered(false)}
450 >
451 <path
452 fill={hovered() ? highlightColor : defaultColor}
453 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"
454 />
455 </svg>
456 );
457}
458
459export function UpSVG() {
460 const [hovered, setHovered] = createSignal();
461 return (
462 <svg
463 xmlns="http://www.w3.org/2000/svg"
464 width="24"
465 height="24"
466 viewBox="0 0 24 24"
467 onMouseEnter={() => setHovered(true)}
468 onMouseLeave={() => setHovered(false)}
469 >
470 <path
471 fill={hovered() ? highlightColor : defaultColor}
472 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"
473 />
474 </svg>
475 );
476}
477
478export function DownloadManagerSVG() {
479 const [hovered, setHovered] = createSignal();
480
481 return (
482 <svg
483 xmlns="http://www.w3.org/2000/svg"
484 width="24"
485 height="24"
486 viewBox="0 0 24 24"
487 onMouseEnter={() => setHovered(true)}
488 onMouseLeave={() => setHovered(false)}
489 >
490 <path
491 fill={hovered() ? highlightColor : defaultColor}
492 d="M2 5h3v3H2zm0 12h3v3H2zm0-6h3v3H2zm21-5v1h-1v1H10V7H9V6h1V5h12v1zm-1 6h1v1h-1v1H10v-1H9v-1h1v-1h12zm0 6h1v1h-1v1H10v-1H9v-1h1v-1h12z"
493 />
494 <path fill="none" d="M0 0h24v24H0z" />
495 </svg>
496 );
497}
498
499export function StopSVG() {
500 const [hovered, setHovered] = createSignal();
501
502 return (
503 <svg
504 xmlns="http://www.w3.org/2000/svg"
505 width="24"
506 height="24"
507 viewBox="0 0 24 24"
508 onMouseEnter={() => setHovered(true)}
509 onMouseLeave={() => setHovered(false)}
510 >
511 <path
512 fill={hovered() ? highlightColor : defaultColor}
513 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"
514 />
515 </svg>
516 );
517}
518
519export function FilterSVG() {
520 const [hovered, setHovered] = createSignal();
521
522 return (
523 <svg
524 xmlns="http://www.w3.org/2000/svg"
525 width="24"
526 height="24"
527 viewBox="0 0 24 24"
528 onMouseEnter={() => setHovered(true)}
529 onMouseLeave={() => setHovered(false)}
530 >
531 <path
532 fill={hovered() ? highlightColor : defaultColor}
533 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"
534 />
535 </svg>
536 );
537}
538
539export function InfoSVG() {
540 const [hovered, setHovered] = createSignal();
541
542 return (
543 <svg
544 xmlns="http://www.w3.org/2000/svg"
545 width="24"
546 height="24"
547 viewBox="0 0 24 24"
548 onMouseEnter={() => setHovered(true)}
549 onMouseLeave={() => setHovered(false)}
550 >
551 <path
552 fill={hovered() ? highlightColor : defaultColor}
553 d="M22 9V7h-1V5h-1V4h-1V3h-2V2h-2V1H9v1H7v1H5v1H4v1H3v2H2v2H1v6h1v2h1v2h1v1h1v1h2v1h2v1h6v-1h2v-1h2v-1h1v-1h1v-2h1v-2h1V9zM11 6h2v2h-2zm-1 9h1v-5h-1V9h3v6h1v2h-4z"
554 />
555 <path fill="none" d="M0 0h24v24H0z" />
556 </svg>
557 );
558}
559
560export function LoginSVG() {
561 const [hovered, setHovered] = createSignal();
562
563 return (
564 <svg
565 xmlns="http://www.w3.org/2000/svg"
566 width="24"
567 height="24"
568 viewBox="0 0 24 24"
569 onMouseEnter={() => setHovered(true)}
570 onMouseLeave={() => setHovered(false)}
571 >
572 <path
573 fill={hovered() ? highlightColor : defaultColor}
574 d="M20 2h3v20h-3zM8 4h2v1h1v1h1v1h1v1h1v1h1v1h1v1h1v2h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1H8v-1H7v-2h1v-1h1v-1h1v-1H1v-4h9V9H9V8H8V7H7V5h1z"
575 />
576 </svg>
577 );
578}
579
580export function LogoutSVG() {
581 const [hovered, setHovered] = createSignal();
582
583 return (
584 <svg
585 xmlns="http://www.w3.org/2000/svg"
586 width="24"
587 height="24"
588 viewBox="0 0 24 24"
589 onMouseEnter={() => setHovered(true)}
590 onMouseLeave={() => setHovered(false)}
591 >
592 <path
593 transform="scale(-1,1) translate(-24,0)"
594 fill={hovered() ? highlightColor : defaultColor}
595 d="M20 2h3v20h-3zM8 4h2v1h1v1h1v1h1v1h1v1h1v1h1v1h1v2h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1H8v-1H7v-2h1v-1h1v-1h1v-1H1v-4h9V9H9V8H8V7H7V5h1z"
596 />
597 </svg>
598 );
599}
600