From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 4 Jul 2025 15:15:37 +0000 (+0000)
Subject: frontend: Import FontAwesome icons
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=95f04afc76d7bb024c338f989285cf3fc88f154a;p=pbs.git

frontend: Import FontAwesome icons

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 59510068..7bb21116 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,9 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+        "@fortawesome/vue-fontawesome": "^3.0.8",
         "axios": "^1.10.0",
         "bulma": "^1.0.4",
         "pinia": "^3.0.3",
@@ -871,6 +874,45 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.8.tgz",
+      "integrity": "sha512-yyHHAj4G8pQIDfaIsMvQpwKMboIZtcHTUvPqXjOHyldh1O1vZfH4W03VDPv5RvI9P6DLTzJQlmVgj9wCf7c2Fw==",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
     "node_modules/@intlify/core-base": {
       "version": "11.1.6",
       "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.6.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9e57f9ea..d2d52f4f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,9 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
     "axios": "^1.10.0",
     "bulma": "^1.0.4",
     "pinia": "^3.0.3",
diff --git a/frontend/src/icons.ts b/frontend/src/icons.ts
new file mode 100644
index 00000000..03f8f539
--- /dev/null
+++ b/frontend/src/icons.ts
@@ -0,0 +1,14 @@
+// Import the icon library
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+// Only import the icons we actually need
+import {
+	faLock,
+	faUser,
+} from "@fortawesome/free-solid-svg-icons";
+
+// Add them all to the library
+library.add(
+	faLock,
+	faUser,
+)
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 3f61ded6..e379be3f 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -37,11 +37,19 @@ app.use(
 	})
 )
 
+// Import icons
+import "./icons"
+
+// Import FontAwesome
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
 // Authentication
 import { useAuthStore } from '@/stores/auth';
 const auth = useAuthStore();
 
 // Fetch authentication credentials and the mount the app
 auth.restore().finally(() => {
+	// Add the component to show FontAwesome Icons
+	app.component("FontAwesomeIcon", FontAwesomeIcon);
 	app.mount("#app")
 });