feat: 兼容fontawesome4和5版本

package.json

@@ -30,6 +30,9 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons": "^0.0.11",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^3.0.0-5",
     "@logicflow/core": "0.7.1",
     "@logicflow/extension": "0.7.1",
     "@vueuse/core": "^6.7.1",

pnpm-lock.yaml

@@ -5,6 +5,9 @@ specifiers:
   "@commitlint/cli": 13.1.0
   "@commitlint/config-conventional": 13.1.0
   "@element-plus/icons": ^0.0.11
+  "@fortawesome/fontawesome-svg-core": ^1.2.36
+  "@fortawesome/free-solid-svg-icons": ^5.15.4
+  "@fortawesome/vue-fontawesome": ^3.0.0-5
   "@logicflow/core": 0.7.1
   "@logicflow/extension": 0.7.1
   "@types/element-resize-detector": 1.1.3
@@ -85,6 +88,9 @@ specifiers:
 dependencies:
   "@amap/amap-jsapi-loader": 1.0.1
   "@element-plus/icons": 0.0.11
+  "@fortawesome/fontawesome-svg-core": 1.2.36
+  "@fortawesome/free-solid-svg-icons": 5.15.4
+  "@fortawesome/vue-fontawesome": 3.0.0-5_a4ef6aa86ab1c63b266771040e7bf2c7
   "@logicflow/core": 0.7.1
   "@logicflow/extension": 0.7.1
   "@vueuse/core": 6.7.5_vue@3.2.21
@@ -812,6 +818,50 @@ packages:
       - supports-color
     dev: true
 
+  /@fortawesome/fontawesome-common-types/0.2.36:
+    resolution:
+      {
+        integrity: sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+      }
+    engines: { node: ">=6" }
+    requiresBuild: true
+    dev: false
+
+  /@fortawesome/fontawesome-svg-core/1.2.36:
+    resolution:
+      {
+        integrity: sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
+      }
+    engines: { node: ">=6" }
+    requiresBuild: true
+    dependencies:
+      "@fortawesome/fontawesome-common-types": 0.2.36
+    dev: false
+
+  /@fortawesome/free-solid-svg-icons/5.15.4:
+    resolution:
+      {
+        integrity: sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
+      }
+    engines: { node: ">=6" }
+    requiresBuild: true
+    dependencies:
+      "@fortawesome/fontawesome-common-types": 0.2.36
+    dev: false
+
+  /@fortawesome/vue-fontawesome/3.0.0-5_a4ef6aa86ab1c63b266771040e7bf2c7:
+    resolution:
+      {
+        integrity: sha512-aNmBT4bOecrFsZTog1l6AJDQHPP3ocXV+WQ3Ogy8WZCqstB/ahfhH4CPu5i4N9Hw0MBKXqE+LX+NbUxcj8cVTw==
+      }
+    peerDependencies:
+      "@fortawesome/fontawesome-svg-core": ~1 || >=1.3.0-beta1
+      vue: ">= 3.0.0 < 4"
+    dependencies:
+      "@fortawesome/fontawesome-svg-core": 1.2.36
+      vue: 3.2.21
+    dev: false
+
   /@humanwhocodes/config-array/0.5.0:
     resolution:
       {

src/main.ts

@@ -6,6 +6,7 @@ import { createApp, Directive } from "vue";
 import { usI18n } from "../src/plugins/i18n";
 import { MotionPlugin } from "@vueuse/motion";
 import { useTable } from "../src/plugins/vxe-table";
+import { useFontawesome } from "../src/plugins/fontawesome";
 import { useElementPlus } from "../src/plugins/element-plus";
 import { injectResponsiveStorage } from "/@/utils/storage/responsive";
 
@@ -33,7 +34,8 @@ getServerConfig(app).then(async config => {
     .use(MotionPlugin)
     .use(useElementPlus)
     .use(useTable)
-    .use(usI18n);
+    .use(usI18n)
+    .use(useFontawesome);
   await router.isReady();
   app.mount("#app");
 });

src/plugins/fontawesome/index.ts

@@ -0,0 +1,15 @@
+/** 兼容fontawesome4和5版本
+ * 4版本: www.fontawesome.com.cn/faicons/
+ * 5版本：https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free
+ * https://github.com/FortAwesome/vue-fontawesome
+ */
+import { App } from "vue";
+import "font-awesome/css/font-awesome.css";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faUserSecret } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+export function useFontawesome(app: App) {
+  library.add(faUserSecret);
+  app.component("font-awesome-icon", FontAwesomeIcon);
+}

src/plugins/vxe-table/index.ts

@@ -1,7 +1,6 @@
 import "xe-utils";
 import { App } from "vue";
 import { i18n } from "../i18n/index";
-import "font-awesome/css/font-awesome.css";
 import {
   // 核心
   VXETable,