From 3c4619d0713c42b70653ad2924bd8b6603224a67 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 13 Nov 2021 14:39:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=BC=E5=AE=B9fontawesome4=E5=92=8C?=
 =?UTF-8?q?5=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |  3 ++
 pnpm-lock.yaml                   | 50 ++++++++++++++++++++++++++++++++
 src/main.ts                      |  4 ++-
 src/plugins/fontawesome/index.ts | 15 ++++++++++
 src/plugins/vxe-table/index.ts   |  1 -
 5 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 src/plugins/fontawesome/index.ts

diff --git a/package.json b/package.json
index 220e9f14b..4db01ca33 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0ca56bfd5..a8973e89d 100644
--- a/pnpm-lock.yaml
+++ b/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:
       {
diff --git a/src/main.ts b/src/main.ts
index 22d70738a..c5570746d 100644
--- a/src/main.ts
+++ b/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");
 });
diff --git a/src/plugins/fontawesome/index.ts b/src/plugins/fontawesome/index.ts
new file mode 100644
index 000000000..7361bc279
--- /dev/null
+++ b/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);
+}
diff --git a/src/plugins/vxe-table/index.ts b/src/plugins/vxe-table/index.ts
index 35d64e9e3..cc6115f3c 100644
--- a/src/plugins/vxe-table/index.ts
+++ b/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,