99 lines
1.3 KiB
React
99 lines
1.3 KiB
React
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;
|