Migrate to FontAwesome v6

src/bootstrap/NumberInput.js

@@ -7,6 +7,8 @@
 
 import React from "react";
 
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 
 import Input from "./Input";
@@ -60,7 +62,7 @@ function NumberInput({ onChange, inlineText, value, ...props }) {
                 onMouseUp={() => enableIncrease(false)}
                 aria-label="Increase"
             >
-                <i className="fas fa-plus" />
+                <FontAwesomeIcon icon={faPlus} />
             </button>
             <button
                 type="button"
@@ -69,7 +71,7 @@ function NumberInput({ onChange, inlineText, value, ...props }) {
                 onMouseUp={() => enableDecrease(false)}
                 aria-label="Decrease"
             >
-                <i className="fas fa-minus" />
+                <FontAwesomeIcon icon={faMinus} />
             </button>
         </Input>
     );

src/bootstrap/PasswordInput.js

@@ -7,6 +7,8 @@
 
 import React, { useState } from "react";
 
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 
 import Input from "./Input";
@@ -44,8 +46,10 @@ function PasswordInput({ withEye, newPass, ...props }) {
                         setHidden((shouldBeHidden) => !shouldBeHidden);
                     }}
                 >
-                    <i
-                        className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`}
+                    <FontAwesomeIcon
+                        icon={isHidden ? faEye : faEyeSlash}
+                        style={{ width: "1.25rem" }}
+                        className="text-dark"
                     />
                 </button>
             )}

src/common/WiFiSettings/WiFiQRCode.js

@@ -7,6 +7,7 @@
 
 import React, { useState } from "react";
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 import QRCode from "qrcode.react";
 
@@ -37,10 +38,11 @@ export default function WiFiQRCode({ SSID, password }) {
                     setModal(true);
                 }}
             >
-                <i
-                    className="fa-solid fa-qrcode"
+                <FontAwesomeIcon
+                    icon="fa-solid fa-qrcode"
                     title={_("Show QR code")}
                     aria-label={_("Show QR code")}
+                    className="text-dark"
                 />
             </button>
             {modal ? (
@@ -84,7 +86,10 @@ function QRCodeModal({ shown, setShown, SSID, password }) {
                         createAndDownloadPdf(SSID, password);
                     }}
                 >
-                    <i className="fas fa-file-download me-2" />
+                    <FontAwesomeIcon
+                        icon="fa-solid fa-file-download"
+                        className="me-2"
+                    />
                     {_("Download PDF")}
                 </Button>
             </ModalFooter>

src/testUtils/setup.js

@@ -1,10 +1,10 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
-
+import React from "react";
 import mockAxios from "jest-mock-axios";
 import moment from "moment-timezone";
 import "./mockGlobals";
@@ -26,3 +26,8 @@ jest.doMock("moment", () => {
     return moment;
 });
 Date.now = jest.fn(() => new Date(Date.UTC(2019, 1, 1, 12, 13, 14)).valueOf());
+
+// Mock Font Awesome v6 library
+jest.mock("@fortawesome/react-fontawesome", () => ({
+    FontAwesomeIcon: () => <i className="fa" />,
+}));