change tool bar svg by img tag

public/filter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/></svg>

src/components/ToolBar/ToolBar.jsx

@@ -43,16 +43,12 @@ function ToolBar({setFilters, filters}) {
                 </Link>
 
                 <button className={`${styles.searchButton} glassCard`} onClick={() => setIsSearchVisible(true)}>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#currentColor">
-                        <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
-                    </svg>
+                    <img src="search.svg" alt="Rechercher"/>
                 </button>
 
                 <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
                     <button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
-                            <path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
-                        </svg>
+                        <img src="filter.svg" alt="Filtrer"/>
                     </button>
                     <div className={styles.filterMenu}>
                         <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>

src/components/ToolBar/ToolBar.module.css

@@ -39,7 +39,7 @@
 
 .createButton {
     font-size: 2rem;
-    color: #019AFF;
+    color: black;
 }
 
 .createButton:hover, .searchButton:hover, .mobileFilter:hover {
@@ -63,11 +63,6 @@
     justify-content: center;
 }
 
-.sortButton svg, .searchButton svg {
-    transform: scale(0.5);
-    fill: #019AFF;
-}
-
 
 .sortButton:focus, .searchButton:focus {
     outline: none;