change filter svg by img tag

src/components/Filter/Filter.jsx

@@ -20,38 +20,28 @@ function Filter({isFilterVisible, filters, setFilters}){
             <abbr title="Tri alphabétique croissant (A à Z)">
                 <button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
                         onClick={() => setAlphabeticalOrder("asc")}>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
-                        <path d="m80-280 150-400h86l150 400h-82l-34-96H196l-32 96H80Zm140-164h104l-48-150h-6l-50 150Zm328 164v-76l202-252H556v-72h282v76L638-352h202v72H548ZM360-760l120-120 120 120H360ZM480-80 360-200h240L480-80Z"/>
-                    </svg>
+                    <img src={"sortByAlpha.svg"} alt="Tri alphabétique croissant (A à Z)"/>
                 </button>
             </abbr>
 
             <abbr title="Tri alphabétique décroissant (Z à A)">
                 <button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
                         onClick={() => setAlphabeticalOrder("desc")}>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
-                        <path d="M 480,-880 360,-760 H 600 Z M 360,-200 480,-80 600,-200 Z" />
-                        <path d="M 71.679924,-674.40094 H 398.50264 v 60.67705 l -208.59362,252.3436 h 214.5832 v 75.7812 H 65.690344 v -60.67705 L 274.28397,-598.61973 H 71.679924 Z" />
-                        <path d="M 769.04932,-356.43238 H 612.27858 l -24.73957,70.83329 H 486.75782 l 144.01033,-388.80185 h 119.53118 l 144.01033,388.80185 H 793.52847 Z m -131.77076,-72.13537 h 106.51035 l -53.12496,-154.68741 z" />
-                    </svg>
+                    <img src={"sortByAntiAlpha.svg"} alt="Tri alphabétique décroissant (Z à A)"/>
                 </button>
             </abbr>
 
             <abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
                 <button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
                         onClick={() => setYearOrder("desc")}>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
-                        <path d="M340-160q-125 0-212.5-87.5T40-460q0-125 87.5-212.5T340-760q52 0 98 16.5t84 45.5l42-42 56 56-42 42q29 38 45.5 84.5T640-460q0 125-87.5 212.5T340-160Zm400 0v-488l-44 44-56-56 140-140 140 140-57 56-43-43v487h-80ZM240-800v-80h200v80H240Zm100 560q92 0 156-64t64-156q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 92 64 156t156 64Zm-40-180h80v-200h-80v200Zm40-40Z"/>
-                    </svg>
+                    <img src={"timerArrowUp.svg"} alt="Tri chronologique décroissant (du plus récent au plus ancien)"/>
                 </button>
             </abbr>
 
             <abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
                 <button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
                         onClick={() => setYearOrder("asc")}>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
-                        <path d="M340-160q-125 0-212.5-87.5T40-460q0-125 87.5-212.5T340-760q52 0 98 16.5t84 45.5l42-42 56 56-42 42q29 38 45.5 84.5T640-460q0 125-87.5 212.5T340-160Zm440 0L640-300l56-56 44 44v-488h80v487l43-43 57 56-140 140ZM240-800v-80h200v80H240Zm100 560q92 0 156-64t64-156q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 92 64 156t156 64Zm-40-180h80v-200h-80v200Zm40-40Z"/>
-                    </svg>
+                    <img src={"timerArrowDown.svg"} alt="Tri chronologique croissant (du plus ancien au plus récent)"/>
                 </button>
             </abbr>
         </div>

src/components/Filter/Filter.module.css

@@ -35,31 +35,14 @@
 .filterTag:focus {
     outline: none;
 }
-.filterTag:focus-visible {
-    outline: 2px solid black;
-}
 
 .filterTag:hover {
     cursor: pointer;
-    svg{
-        fill: #019AFF;
-    }
-}
-
-
-.filterTag svg {
-    transform: scale(0.7);
-    color: black;
 }
 
 
 .active {
-    border: 1px solid #019AFF;
-}
-
-.active svg {
-    fill: #019AFF;
-    transform: scale(0.8);
+    border: 2px solid #019AFF;
 }
 
 @media screen and (max-width: 768px){

src/components/ToolBar/ToolBar.module.css

@@ -16,6 +16,9 @@
     padding: 0;
     border-radius: 30px;
     overflow: visible;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
 }
 
 .filterMenu{
@@ -93,8 +96,8 @@
     }
 
     .filterContainer{
-        display: flex;
         width: fit-content;
+        flex-direction: row;
     }
 
     .filterMenu{