Checkmate/client/src/Components/v1/ThemeSwitch/SunAndMoonIcon.jsx at d88c73bb2089d1fd87420542772950732fb89fbb · bluewave-labs/Checkmate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { useTheme } from "@mui/material";
import "./index.css";

const SunAndMoonIcon = () => {
	const theme = useTheme();

	return (
		<svg
			className="sun-and-moon"
			aria-hidden="true"
			width="24"
			height="24"
			viewBox="0 0 24 24"
		>
			<mask
				className="moon"
				id="moon-mask"
			>
				<rect
					x="0"
					y="0"
					width="100%"
					height="100%"
					fill="#fff"
				/>
				<circle
					cx="24"
					cy="10"
					r="6"
					fill="#000"
				/>
			</mask>
			<circle
				className="sun"
				cx="12"
				cy="12"
				r="6"
				fill={theme.palette.primary.contrastTextSecondary}
				mask="url(#moon-mask)"
			/>
			<g
				className="sun-beams"
				stroke={theme.palette.primary.contrastTextSecondary}
			>
				<line
					x1="12"
					y1="1"
					x2="12"
					y2="3"
				/>
				<line
					x1="12"
					y1="21"
					x2="12"
					y2="23"
				/>
				<line
					x1="4.22"
					y1="4.22"
					x2="5.64"
					y2="5.64"
				/>
				<line
					x1="18.36"
					y1="18.36"
					x2="19.78"
					y2="19.78"
				/>
				<line
					x1="1"
					y1="12"
					x2="3"
					y2="12"
				/>
				<line
					x1="21"
					y1="12"
					x2="23"
					y2="12"
				/>
				<line
					x1="4.22"
					y1="19.78"
					x2="5.64"
					y2="18.36"
				/>
				<line
					x1="18.36"
					y1="5.64"
					x2="19.78"
					y2="4.22"
				/>
			</g>
		</svg>
	);
};

export default SunAndMoonIcon;