feat: 兼容fontawesome4和5版本

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,