refactor(footer): trocando imagens de lugar e usando componente Icon no Footer Bottom

src/components/Footer/FooterBottom.tsx

@@ -1,14 +1,15 @@
-import MasterCard from "../../assets/imgs/Master.svg";
-import Visa from "../../assets/imgs/Visa.svg";
-import Diners from "../../assets/imgs/Diners.svg";
-import Elo from "../../assets/imgs/Elo.svg";
-import HiperCard from "../../assets/imgs/Hiper.svg";
-import Pagseguro from "../../assets/imgs/Pagseguro.svg";
-import Boleto from "../../assets/imgs/Boleto.svg";
-import VtexPci from "../../assets/imgs/vtex-pci-200.svg";
-import M3 from "../../assets/imgs/m3.svg";
-import Vtex from "../../assets/imgs/vtex.svg"
+import MasterCard from "../../components/Footer/assets/icons/Master.svg";
+import Visa from "../../components/Footer/assets/icons/Visa.svg";
+import Diners from "../../components/Footer/assets/icons/Diners.svg";
+import Elo from "../../components/Footer/assets/icons/Elo.svg";
+import HiperCard from "../../components/Footer/assets/icons/Hiper.svg";
+import Pagseguro from "../../components/Footer/assets/icons/Pagseguro.svg";
+import Boleto from "../../components/Footer/assets/icons/Boleto.svg";
+import VtexPci from "../../components/Footer/assets/icons/vtex-pci-200.svg";
+import M3 from "../../components/Footer/assets/icons/m3.svg";
+import Vtex from "../../components/Footer/assets/icons/vtex.svg";
 import styles from "./Footer.module.scss";
+import { Icon } from "../ImageList/ImageList";
 
 const FooterBottom = () => {
   return (
@@ -18,19 +19,26 @@ const FooterBottom = () => {
         tempor
       </span>
       <ul className={styles["Metodos__de__Pagamento"]}>
-        <li className={styles["MasterCard"]}><img src={MasterCard} alt="ícone do cartão master card"/></li>
-        <li className={styles["Visa"]}><img src={Visa} alt="ícone do cartão visa"/></li>
-        <li className={styles["Diners"]}><img src={Diners} alt="ícone do cartão diners"/></li>
-        <li className={styles["Elo"]}><img src={Elo} alt="ícone do cartão elo"/></li>
-        <li className={styles["HiperCard"]}><img src={HiperCard} alt="ícone do cartão hipercard"/></li>
-        <li className={styles["Pagseguro"]}><img src={Pagseguro} alt="ícone do meio de pagamento pagseguro"/></li>
-        <li className={styles["Boleto"]}><img src={Boleto} alt="ícone do meio de pagamento boleto"/></li>
-        <li className={styles["Line"]}><span></span></li>
-        <li className={styles["VtexPci"]}><img src={VtexPci} alt="ícone do vtex pci"/></li>
+        <Icon src={MasterCard} className={styles["MasterCard"]} alt="ícone do cartão master card"/>
+        <Icon src={Visa} className={styles["Visa"]} alt="ícone do cartão visa"/>
+        <Icon src={Diners} className={styles["Diners"]} alt="ícone do cartão diners"/>
+        <Icon src={Elo} className={styles["Elo"]} alt="ícone do cartão elo"/>
+        <Icon src={HiperCard} className={styles["HiperCard"]} alt="ícone do cartão hipercard"/>
+        <Icon src={Pagseguro} className={styles["Pagseguro"]} alt="ícone do meio de pagamento pagseguro"/>
+        <Icon src={Boleto} className={styles["Boleto"]} alt="ícone do meio de pagamento boleto"/>
+        <li className={styles["Line"]}>
+          <span></span>
+        </li>
+        <Icon src={VtexPci} className={styles["VtexPci"]} alt="ícone do vtex pci"/>
       </ul>
       <ul className={styles["Autores"]}>
-        <li>Developed by <img src={Vtex} className={styles["Vtex"]} alt="ícone da Vtex"/></li>
-        <li>Powered by <img src={M3} className={styles["M3"]} alt="ícone do M3"/></li>
+        <li>
+          Developed by
+          <img src={Vtex} className={styles["Vtex"]} alt="ícone da Vtex" />
+        </li>
+        <li>
+          Powered by <img src={M3} className={styles["M3"]} alt="ícone do M3" />
+        </li>
       </ul>
     </>
   );