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 59510068146666e112f0b3a4b4e2491fa60071ac..7bb211168d337844be72c43cda8515834f3de238 100644 (file)
--- 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 9e57f9ea085ca0029603dd1259cb596337ad5373..d2d52f4ff126d8bbd81e8b73dd00d4c8e97e0418 100644 (file)
--- 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 (file)
index 0000000..03f8f53
--- /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 3f61ded6236bbda86e12fe34c2ed96f3f2f9628e..e379be3f522ceab5db924139b11f52c79276c49f 100644 (file)
--- 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")
 });