perf: 将本地图标全部按需引入，首屏加载减少 61 个图标资源，首屏加载再次变快 (#389)

* perf: 优化图标，将本地图标按需引入，首屏加载减少 `61` 个图标资源，首屏加载再次变快

src/components/ReIcon/src/hooks.ts

@@ -1,5 +1,6 @@
 import { iconType } from "./types";
 import { h, defineComponent, Component } from "vue";
+import { addIcon } from "@iconify/vue/dist/offline";
 import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
 
 /**
@@ -34,6 +35,18 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
   } else if (typeof icon === "function" || typeof icon?.render === "function") {
     // svg
     return icon;
+  } else if (typeof icon === "object") {
+    // iconify 本地图标
+    addIcon(icon, icon);
+    return defineComponent({
+      name: "OfflineIcon",
+      render() {
+        return h(IconifyIconOffline, {
+          icon: icon,
+          ...attrs
+        });
+      }
+    });
   } else {
     // 通过是否存在 : 符号来判断是在线还是本地图标，存在即是在线图标，反之
     return defineComponent({

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -1,192 +1,22 @@
 import { h, defineComponent } from "vue";
 import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
 
-// element-plus icon
-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 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 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 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";
-import Rank from "@iconify-icons/ep/rank";
-import VideoPlay from "@iconify-icons/ep/video-play";
-import Monitor from "@iconify-icons/ep/monitor";
-import Search from "@iconify-icons/ep/search";
-import Refresh from "@iconify-icons/ep/refresh";
-import EditPen from "@iconify-icons/ep/edit-pen";
-import Delete from "@iconify-icons/ep/delete";
-import More from "@iconify-icons/ep/more-filled";
-import EpArrowDown from "@iconify-icons/ep/arrow-down";
-import ArrowUp from "@iconify-icons/ep/arrow-up";
-import ArrowRight from "@iconify-icons/ep/arrow-right";
-import ArrowLeft from "@iconify-icons/ep/arrow-left";
-addIcon("check", Check);
-addIcon("menu", Menu);
-addIcon("home-filled", HomeFilled);
-addIcon("set-up", SetUp);
-addIcon("edit", Edit);
-addIcon("lollipop", Lollipop);
-addIcon("link", Link);
-addIcon("position", Position);
-addIcon("histogram", Histogram);
-addIcon("refresh-right", RefreshRight);
-addIcon("close", Close);
-addIcon("close-bold", CloseBold);
-addIcon("bell", Bell);
-addIcon("guide", Guide);
-addIcon("iphone", Iphone);
-addIcon("location", Location);
-addIcon("tickets", Tickets);
-addIcon("office-building", OfficeBuilding);
-addIcon("notebook", Notebook);
-addIcon("video-play", VideoPlay);
-addIcon("rank", Rank);
-addIcon("monitor", Monitor);
-addIcon("search", Search);
-addIcon("refresh", Refresh);
-addIcon("edits", EditPen);
-addIcon("delete", Delete);
-addIcon("more", More);
-addIcon("ep-arrow-down", EpArrowDown);
-addIcon("ep-arrow-up", ArrowUp);
-addIcon("ep-arrow-right", ArrowRight);
-addIcon("ep-arrow-left", ArrowLeft);
-
-// remixicon
-import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
-import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
-import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
-import NodeTree from "@iconify-icons/ri/node-tree";
-import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
-import QuestionLine from "@iconify-icons/ri/question-line";
-import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
-import InformationLine from "@iconify-icons/ri/information-line";
-import CloseCircleLine from "@iconify-icons/ri/close-circle-line";
-import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
-import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
-import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
-import AddFill from "@iconify-icons/ri/add-circle-line";
-import AddLine from "@iconify-icons/ri/add-line";
-import ListCheck from "@iconify-icons/ri/list-check";
-import More2Fill from "@iconify-icons/ri/more-2-fill";
-import Database from "@iconify-icons/ri/database-2-line";
-import Dict from "@iconify-icons/ri/git-repository-line";
-import Card from "@iconify-icons/ri/bank-card-line";
-import Reset from "@iconify-icons/ri/restart-line";
-import Dept from "@iconify-icons/ri/git-branch-line";
-import Password from "@iconify-icons/ri/lock-password-line";
-import Ppt from "@iconify-icons/ri/file-ppt-2-line";
-import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
-import User from "@iconify-icons/ri/user-3-fill";
-import Lock from "@iconify-icons/ri/lock-fill";
-import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
-import MenuFold from "@iconify-icons/ri/menu-fold-fill";
-import Setting from "@iconify-icons/ri/settings-3-line";
-import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
-import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
-import CloseRightTags from "@iconify-icons/ri/text-direction-l";
-import CloseOtherTags from "@iconify-icons/ri/text-spacing";
-import CloseAllTags from "@iconify-icons/ri/subtract-line";
-import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
-import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
-addIcon("arrow-right-s-line", ArrowRightSLine);
-addIcon("arrow-left-s-line", ArrowLeftSLine);
-addIcon("logout-circle-r-line", LogoutCircleRLine);
-addIcon("node-tree", NodeTree);
-addIcon("ubuntu-fill", UbuntuFill);
-addIcon("question-line", QuestionLine);
-addIcon("checkbox-circle-line", CheckboxCircleLine);
-addIcon("information-line", InformationLine);
-addIcon("close-circle-line", CloseCircleLine);
-addIcon("arrow-up-line", ArrowUpLine);
-addIcon("arrow-down-line", ArrowDownLine);
-addIcon("bookmark-2-line", Bookmark2Line);
-addIcon("add", AddFill);
-addIcon("add-line", AddLine);
-addIcon("list-check", ListCheck);
-addIcon("more-vertical", More2Fill);
-addIcon("database", Database);
-addIcon("dict", Dict);
-addIcon("card", Card);
-addIcon("reset", Reset);
-addIcon("dept", Dept);
-addIcon("password", Password);
-addIcon("ppt", Ppt);
-addIcon("terminal-window-line", TerminalWindowLine);
-addIcon("user", User);
-addIcon("lock", Lock);
-addIcon("menu-unfold", MenuUnfold);
-addIcon("menu-fold", MenuFold);
-addIcon("setting", Setting);
-addIcon("arrow-down", ArrowDown);
-addIcon("close-left-tags", CloseLeftTags);
-addIcon("close-right-tags", CloseRightTags);
-addIcon("close-other-tags", CloseOtherTags);
-addIcon("close-all-tags", CloseAllTags);
-addIcon("fullscreen", Fullscreen);
-addIcon("exit-fullscreen", ExitFullscreen);
-
-// Font Awesome 4
-import FaUser from "@iconify-icons/fa/user";
-import FaLock from "@iconify-icons/fa/lock";
-import FaSignOut from "@iconify-icons/fa/sign-out";
-addIcon("fa-user", FaUser);
-addIcon("fa-lock", FaLock);
-addIcon("fa-sign-out", FaSignOut);
-
-// Unicons
-import Import from "@iconify-icons/uil/import";
-import Export from "@iconify-icons/uil/export";
-import ArrowsShrinkV from "@iconify-icons/uil/arrows-shrink-v";
-addIcon("import", Import);
-addIcon("export", Export);
-addIcon("density", ArrowsShrinkV);
-
-// fluent
-import Role from "@iconify-icons/fluent/people-swap-28-filled";
-import FlUser from "@iconify-icons/fluent/person-12-filled";
-addIcon("role", Role);
-addIcon("flUser", FlUser);
-
-// Material Design Icons
-import Expand from "@iconify-icons/mdi/arrow-expand-down";
-import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
-addIcon("expand", Expand);
-addIcon("unExpand", UnExpand);
-
-// carbon
-import LocationCompany from "@iconify-icons/carbon/location-company";
-addIcon("location-company", LocationCompany);
-
 // Iconify Icon在Vue里本地使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
 export default defineComponent({
   name: "IconifyIconOffline",
   components: { IconifyIcon },
   props: {
     icon: {
-      type: String,
-      default: ""
+      default: null
     }
   },
   render() {
+    if (typeof this.icon === "object") addIcon(this.icon, this.icon);
     const attrs = this.$attrs;
     return h(
       IconifyIcon,
       {
-        icon: `${this.icon}`,
+        icon: this.icon,
         style: attrs?.style
           ? Object.assign(attrs.style, { outline: "none" })
           : { outline: "none" },

src/components/ReQrcode/src/index.tsx

@@ -13,6 +13,7 @@ import { isString } from "@pureadmin/utils";
 import { propTypes } from "@/utils/propTypes";
 import { IconifyIconOffline } from "../../ReIcon";
 import QRCode, { QRCodeRenderersOptions } from "qrcode";
+import RefreshRight from "@iconify-icons/ep/refresh-right";
 
 interface QrcodeLogo {
   src?: string;
@@ -247,7 +248,7 @@ export default defineComponent({
               <div class="absolute top-[50%] left-[50%] font-bold">
                 <IconifyIconOffline
                   class="cursor-pointer"
-                  icon="refresh-right"
+                  icon={RefreshRight}
                   width="30"
                   color="var(--el-color-primary)"
                 />

src/components/ReTable/src/bar.tsx

@@ -1,6 +1,12 @@
 import { defineComponent, ref, computed, PropType } from "vue";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+
+import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
 import { IconifyIconOffline } from "../../ReIcon";
+import Expand from "@iconify-icons/mdi/arrow-expand-down";
+import ArrowCollapse from "@iconify-icons/mdi/arrow-collapse-vertical";
+import Setting from "@iconify-icons/ri/settings-3-line";
+import RefreshRight from "@iconify-icons/ep/refresh-right";
 
 export const loadingSvg = `
   <path class="path" d="
@@ -105,7 +111,7 @@ export default defineComponent({
       reference: () => (
         <IconifyIconOffline
           class="cursor-pointer"
-          icon="setting"
+          icon={Setting}
           width="16"
           color="text_color_regular"
           onMouseover={e => (buttonRef.value = e.currentTarget)}
@@ -135,7 +141,7 @@ export default defineComponent({
                   >
                     <IconifyIconOffline
                       class="cursor-pointer"
-                      icon={isExpandAll.value ? "unExpand" : "expand"}
+                      icon={isExpandAll.value ? UnExpand : Expand}
                       width="16"
                       color="text_color_regular"
                       onClick={() => onExpand()}
@@ -147,7 +153,7 @@ export default defineComponent({
               <el-tooltip effect="dark" content="刷新" placement="top">
                 <IconifyIconOffline
                   class="cursor-pointer"
-                  icon="refresh-right"
+                  icon={RefreshRight}
                   width="16"
                   color="text_color_regular"
                   onClick={() => emit("refresh")}
@@ -159,7 +165,7 @@ export default defineComponent({
                 <el-dropdown v-slots={dropdown} trigger="click">
                   <IconifyIconOffline
                     class="cursor-pointer"
-                    icon="density"
+                    icon={ArrowCollapse}
                     width="16"
                     color="text_color_regular"
                   />