Add icon to ThemeSwitcher.jsx

src/components/ui/themeSwitcher/ThemeSwitcher.jsx

@@ -1,19 +1,30 @@
 import Button from "../button/button.jsx";
-import React from "react";
+import { useState, useEffect } from "react";
+import styles from "./ThemeSwitcher.module.css";
+
 
 export default function ThemeSwitcher() {
 
+    const [theme, setTheme] = useState("");
+
+    useEffect(() => {
+        setTheme(localStorage.getItem("theme"));
+    }, []);
+
     const switchTheme = () => {
 
-        const currentTheme = localStorage.getItem("theme");
-        let newTheme = currentTheme === "light" ? "dark" : "light";
+        let newTheme = theme === "light" ? "dark" : "light";
 
-        if(currentTheme === null) newTheme = "dark";
+        if(theme === null || theme === "") newTheme = "dark";
 
         localStorage.setItem("theme", newTheme);
+        setTheme(newTheme);
 
         window.dispatchEvent(new Event("theme-changed"));
     };
 
-    return <Button variant={"default"} onClick={switchTheme}> Changer de thème </Button>
+    return <Button variant={"default"} onClick={switchTheme} className={styles.themeBtn}>
+            <img src={`/public/icons/theme/${theme}.svg`} alt={`${theme} icon`} className={styles.themeIcon} />
+            <p>Changer de thème </p>
+    </Button>
 }

src/components/ui/themeSwitcher/ThemeSwitcher.module.css

@@ -0,0 +1,12 @@
+.themeBtn {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+}
+
+.themeIcon {
+    height: 20px;
+    width: 20px;
+}