Migrate to FontAwesome v6

package-lock.json

@@ -9,6 +9,10 @@
             "version": "6.0.3",
             "license": "GPL-3.0",
             "dependencies": {
+                "@fortawesome/fontawesome-svg-core": "^6.6.0",
+                "@fortawesome/free-regular-svg-icons": "^6.6.0",
+                "@fortawesome/free-solid-svg-icons": "^6.6.0",
+                "@fortawesome/react-fontawesome": "^0.2.2",
                 "axios": "^1.7.2",
                 "immutability-helper": "^3.1.1",
                 "moment": "^2.30.1",
@@ -22,7 +26,6 @@
                 "@babel/plugin-transform-runtime": "^7.24.7",
                 "@babel/preset-env": "^7.24.7",
                 "@babel/preset-react": "^7.24.7",
-                "@fortawesome/fontawesome-free": "^6.5.2",
                 "@testing-library/react": "^8.0.9",
                 "babel-loader": "^8.1.0",
                 "babel-polyfill": "^6.26.0",
@@ -2085,16 +2088,59 @@
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             }
         },
-        "node_modules/@fortawesome/fontawesome-free": {
+        "node_modules/@fortawesome/fontawesome-common-types": {
-            "version": "6.5.2",
+            "version": "6.6.0",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
-            "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
+            "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
-            "dev": true,
-            "hasInstallScript": true,
             "engines": {
                 "node": ">=6"
             }
         },
+        "node_modules/@fortawesome/fontawesome-svg-core": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+            "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-regular-svg-icons": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz",
+            "integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-solid-svg-icons": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+            "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/react-fontawesome": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+            "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+            "dependencies": {
+                "prop-types": "^15.8.1"
+            },
+            "peerDependencies": {
+                "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+                "react": ">=16.3"
+            }
+        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.14",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -20216,11 +20262,42 @@
             "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
             "dev": true
         },
-        "@fortawesome/fontawesome-free": {
+        "@fortawesome/fontawesome-common-types": {
-            "version": "6.5.2",
+            "version": "6.6.0",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
-            "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
+            "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw=="
-            "dev": true
+        },
+        "@fortawesome/fontawesome-svg-core": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+            "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            }
+        },
+        "@fortawesome/free-regular-svg-icons": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz",
+            "integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            }
+        },
+        "@fortawesome/free-solid-svg-icons": {
+            "version": "6.6.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+            "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "6.6.0"
+            }
+        },
+        "@fortawesome/react-fontawesome": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+            "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+            "requires": {
+                "prop-types": "^15.8.1"
+            }
         },
         "@humanwhocodes/config-array": {
             "version": "0.11.14",

package.json

@@ -14,6 +14,10 @@
     "license": "GPL-3.0",
     "main": "./src/index.js",
     "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
+        "@fortawesome/free-regular-svg-icons": "^6.6.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "axios": "^1.7.2",
         "immutability-helper": "^3.1.1",
         "moment": "^2.30.1",
@@ -34,7 +38,6 @@
         "@babel/plugin-transform-runtime": "^7.24.7",
         "@babel/preset-env": "^7.24.7",
         "@babel/preset-react": "^7.24.7",
-        "@fortawesome/fontawesome-free": "^6.5.2",
         "@testing-library/react": "^8.0.9",
         "babel-loader": "^8.1.0",
         "babel-polyfill": "^6.26.0",

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
+                    <FontAwesomeIcon
-                        className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`}
+                        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
+                <FontAwesomeIcon
-                    className="fa-solid fa-qrcode"
+                    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" />,
+}));