From 2d6ad99f6f3bd9f8e800ddba7f16907e35f4cbbc Mon Sep 17 00:00:00 2001
From: hb0730 <1278032416@qq.com>
Date: Mon, 15 Nov 2021 16:41:51 +0800
Subject: [PATCH] feat(icon): findIcon function (#107)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(icon): findIcon function

支持ElementPlus icon组件和 FontAwesomeIcon

* fix(menu): 支持第三方icon组件
---
 src/components/ReIcon/index.ts                | 38 ++++++++++++++++++-
 src/layout/components/sidebar/sidebarItem.vue | 11 ++++--
 src/plugins/element-plus/index.ts             |  8 ++--
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/components/ReIcon/index.ts b/src/components/ReIcon/index.ts
index 441416bed..41bf5192d 100644
--- a/src/components/ReIcon/index.ts
+++ b/src/components/ReIcon/index.ts
@@ -1,5 +1,7 @@
-import { App } from "vue";
+import { App, defineComponent } from "vue";
 import icon from "./src/Icon.vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { iconComponents } from "/@/plugins/element-plus";
 
 export const Icon = Object.assign(icon, {
   install(app: App) {
@@ -10,3 +12,37 @@ export const Icon = Object.assign(icon, {
 export default {
   Icon
 };
+/**
+ * find icon component
+ * @param icon icon图标
+ * @returns component
+ */
+export function findIconReg(icon: string) {
+  const faReg = /^fa-/;
+  if (faReg.test(icon)) {
+    return findIcon(icon.split(faReg)[1]);
+  } else {
+    return findIcon(icon, false);
+  }
+}
+export function findIcon(icon: String, isFa: Boolean = true) {
+  if (isFa) {
+    return defineComponent({
+      name: "FaIcon",
+      data() {
+        return { icon: icon };
+      },
+      components: { FontAwesomeIcon },
+      template: `<font-awesome-icon :icon="icon" />`
+    });
+  } else {
+    const components = iconComponents.filter(
+      component => component.name === icon
+    );
+    if (components.length > 0) {
+      return components[0];
+    } else {
+      return null;
+    }
+  }
+}
diff --git a/src/layout/components/sidebar/sidebarItem.vue b/src/layout/components/sidebar/sidebarItem.vue
index 2f65926df..763614859 100644
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -4,7 +4,7 @@ import { PropType, ref, nextTick, getCurrentInstance } from "vue";
 import { childrenType } from "../../types";
 import { useAppStoreHook } from "/@/store/modules/app";
 import Icon from "/@/components/ReIcon/src/Icon.vue";
-
+import { findIconReg } from "/@/components/ReIcon";
 const instance = getCurrentInstance().appContext.app.config.globalProperties;
 const menuMode = instance.$storage.layout?.layout === "vertical";
 const pureApp = useAppStoreHook();
@@ -92,7 +92,10 @@ function resolvePath(routePath) {
       <el-icon v-show="props.item.meta.icon">
         <component
           :is="
-            onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon)
+            findIconReg(
+              onlyOneChild.meta.icon ||
+                (props.item.meta && props.item.meta.icon)
+            )
           "
         ></component>
       </el-icon>
@@ -144,7 +147,9 @@ function resolvePath(routePath) {
   >
     <template #title>
       <el-icon v-show="props.item.meta.icon" :class="props.item.meta.icon">
-        <component :is="props.item.meta && props.item.meta.icon"></component>
+        <component
+          :is="findIconReg(props.item.meta && props.item.meta.icon)"
+        ></component>
       </el-icon>
       <span v-if="!menuMode">{{ $t(props.item.meta.title) }}</span>
       <el-tooltip
diff --git a/src/plugins/element-plus/index.ts b/src/plugins/element-plus/index.ts
index 29aac0ca5..fbaad0b5c 100644
--- a/src/plugins/element-plus/index.ts
+++ b/src/plugins/element-plus/index.ts
@@ -93,9 +93,10 @@ const components = [
   ElDescriptions,
   ElDescriptionsItem,
   ElBacktop,
-  ElSwitch,
-
-  // icon
+  ElSwitch
+];
+// icon
+export const iconComponents = [
   Check,
   Menu,
   HomeFilled,
@@ -115,6 +116,7 @@ const components = [
 const plugins = [ElLoading];
 
 export function useElementPlus(app: App) {
+  components.push(...iconComponents);
   components.forEach((component: Component) => {
     app.component(component.name, component);
   });