refactor: use @iconify-icons/ep

src/components/ReIcon/index.ts

@@ -1,7 +1,8 @@
 import { App, defineComponent } from "vue";
 import icon from "./src/Icon.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { iconComponents } from "/@/plugins/element-plus";
+import iconifyIconOffline from "./src/iconifyIconOffline";
+import iconifyIconOnline from "./src/iconifyIconOnline";
 
 /**
  * find icon component
@@ -67,21 +68,20 @@ export function findIcon(icon: String, type = "EL", property?: string) {
     });
   } else if (type === "RI") {
     return defineComponent({
-      name: "RIIcon",
+      name: "RiIcon",
       data() {
         return { icon: `ri-${icon}` };
       },
       template: `<i :class="icon" />`
     });
   } else if (type === "EL") {
-    const components = iconComponents.filter(
-      component => component.name === icon
-    );
-    if (components.length > 0) {
-      return components[0];
-    } else {
-      return null;
-    }
+    return defineComponent({
+      name: "ElIcon",
+      data() {
+        return { icon };
+      },
+      template: `<IconifyIconOffline :icon="icon" />`
+    });
   } else if (type === "SVG") {
     return icon;
   }
@@ -93,6 +93,11 @@ export const Icon = Object.assign(icon, {
   }
 });
 
+export const IconifyIconOffline = iconifyIconOffline;
+export const IconifyIconOnline = iconifyIconOnline;
+
 export default {
-  Icon
+  Icon,
+  IconifyIconOffline,
+  IconifyIconOnline
 };

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -0,0 +1,70 @@
+import { h, defineComponent } from "vue";
+import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
+import Check from "@iconify-icons/ep/check";
+import Menu from "@iconify-icons/ep/menu";
+import HomeFilled from "@iconify-icons/ep/home-filled";
+import SetUp from "@iconify-icons/ep/set-up";
+import Edit from "@iconify-icons/ep/edit";
+import Setting from "@iconify-icons/ep/setting";
+import Lollipop from "@iconify-icons/ep/lollipop";
+import Link from "@iconify-icons/ep/link";
+import Position from "@iconify-icons/ep/position";
+import Histogram from "@iconify-icons/ep/histogram";
+import RefreshRight from "@iconify-icons/ep/refresh-right";
+import ArrowDown from "@iconify-icons/ep/arrow-down";
+import Close from "@iconify-icons/ep/close";
+import CloseBold from "@iconify-icons/ep/close-bold";
+import Bell from "@iconify-icons/ep/bell";
+import Guide from "@iconify-icons/ep/guide";
+import User from "@iconify-icons/ep/user";
+import Iphone from "@iconify-icons/ep/iphone";
+import Location from "@iconify-icons/ep/location";
+import Tickets from "@iconify-icons/ep/tickets";
+import OfficeBuilding from "@iconify-icons/ep/office-building";
+import Notebook from "@iconify-icons/ep/notebook";
+addIcon("check", Check);
+addIcon("menu", Menu);
+addIcon("home-filled", HomeFilled);
+addIcon("set-up", SetUp);
+addIcon("edit", Edit);
+addIcon("setting", Setting);
+addIcon("lollipop", Lollipop);
+addIcon("link", Link);
+addIcon("position", Position);
+addIcon("histogram", Histogram);
+addIcon("refresh-right", RefreshRight);
+addIcon("arrow-down", ArrowDown);
+addIcon("close", Close);
+addIcon("close-bold", CloseBold);
+addIcon("bell", Bell);
+addIcon("guide", Guide);
+addIcon("user", User);
+addIcon("iphone", Iphone);
+addIcon("location", Location);
+addIcon("tickets", Tickets);
+addIcon("office-building", OfficeBuilding);
+addIcon("notebook", Notebook);
+
+// Iconify Icon在Vue里离线使用（用于内网环境）
+// https://docs.iconify.design/icon-components/vue/offline.html
+export default defineComponent({
+  name: "IconifyIcon",
+  components: { IconifyIcon },
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    }
+  },
+  render() {
+    return h(
+      IconifyIcon,
+      {
+        icon: `${this.icon}`
+      },
+      {
+        default: () => []
+      }
+    );
+  }
+});

src/components/ReIcon/src/iconifyIconOnline.ts

@@ -0,0 +1,30 @@
+import { h, defineComponent } from "vue";
+import { Icon as IconifyIcon } from "@iconify/vue";
+
+// Iconify Icon在Vue里在线使用（用于外网环境）
+// https://docs.iconify.design/icon-components/vue/offline.html
+export default defineComponent({
+  name: "IconifyIcon",
+  components: { IconifyIcon },
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "ep:"
+    }
+  },
+  render() {
+    return h(
+      IconifyIcon,
+      {
+        icon: `${this.type}${this.icon}`
+      },
+      {
+        default: () => []
+      }
+    );
+  }
+});