refactor: 重构图标模块，使用@iconify/json替换不再维护更新的@iconify-icons/*依赖，优化使用体验，确保图标库可持续更新并支持Tree-shaking (#1202)

refactor: 重构图标模块，使用`@iconify/json`替换不再维护更新的`@iconify-icons/*`依赖，优化使用体验，确保图标库可持续更新并支持`Tree-shaking`

src/components/ReDialog/index.vue

@@ -8,8 +8,8 @@ import {
 } from "./index";
 import { ref, computed } from "vue";
 import { isFunction } from "@pureadmin/utils";
-import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
-import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import Fullscreen from "~icons/ri/fullscreen-fill";
+import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
 
 defineOptions({
   name: "ReDialog"

src/components/ReIcon/src/Select.vue

@@ -2,7 +2,7 @@
 import { IconJson } from "@/components/ReIcon/data";
 import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
 import { ref, computed, CSSProperties, watch } from "vue";
-import Search from "@iconify-icons/ri/search-eye-line";
+import Search from "~icons/ri/search-eye-line";
 
 type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;
 

src/components/ReIcon/src/hooks.ts

@@ -1,6 +1,6 @@
 import type { iconType } from "./types";
 import { h, defineComponent, type Component } from "vue";
-import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
+import { FontIcon, IconifyIconOnline, IconifyIconOffline } from "../index";
 
 /**
  * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
@@ -52,7 +52,7 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
         const IconifyIcon =
           icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline;
         return h(IconifyIcon, {
-          icon: icon,
+          icon,
           ...attrs
         });
       }

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -13,19 +13,35 @@ export default defineComponent({
   render() {
     if (typeof this.icon === "object") addIcon(this.icon, this.icon);
     const attrs = this.$attrs;
-    return h(
-      IconifyIcon,
-      {
-        icon: this.icon,
-        "aria-hidden": false,
-        style: attrs?.style
-          ? Object.assign(attrs.style, { outline: "none" })
-          : { outline: "none" },
-        ...attrs
-      },
-      {
-        default: () => []
-      }
-    );
+    if (typeof this.icon === "string") {
+      return h(
+        IconifyIcon,
+        {
+          icon: this.icon,
+          "aria-hidden": false,
+          style: attrs?.style
+            ? Object.assign(attrs.style, { outline: "none" })
+            : { outline: "none" },
+          ...attrs
+        },
+        {
+          default: () => []
+        }
+      );
+    } else {
+      return h(
+        this.icon,
+        {
+          "aria-hidden": false,
+          style: attrs?.style
+            ? Object.assign(attrs.style, { outline: "none" })
+            : { outline: "none" },
+          ...attrs
+        },
+        {
+          default: () => []
+        }
+      );
+    }
   }
 });

src/components/ReIcon/src/offlineIcon.ts

@@ -1,70 +1,87 @@
 // 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
+import { getSvgInfo } from "@pureadmin/utils";
 import { addIcon } from "@iconify/vue/dist/offline";
 
+// https://icon-sets.iconify.design/ep/?keyword=ep
+import EpMenu from "~icons/ep/menu?raw";
+import EpEdit from "~icons/ep/edit?raw";
+import EpGuide from "~icons/ep/guide?raw";
+import EpSetUp from "~icons/ep/set-up?raw";
+import EpMonitor from "~icons/ep/monitor?raw";
+import EpLollipop from "~icons/ep/lollipop?raw";
+import EpHistogram from "~icons/ep/histogram?raw";
+import EpHomeFilled from "~icons/ep/home-filled?raw";
+
+// https://icon-sets.iconify.design/ri/?keyword=ri
+import RiMindMap from "~icons/ri/mind-map?raw";
+import RiAdminFill from "~icons/ri/admin-fill?raw";
+import RiTableLine from "~icons/ri/table-line?raw";
+import RiLinksFill from "~icons/ri/links-fill?raw";
+import RiAdminLine from "~icons/ri/admin-line?raw";
+import RiListCheck from "~icons/ri/list-check?raw";
+import RiSearchLine from "~icons/ri/search-line?raw";
+import RiWindowLine from "~icons/ri/window-line?raw";
+import RiUbuntuFill from "~icons/ri/ubuntu-fill?raw";
+import RiHistoryFill from "~icons/ri/history-fill?raw";
+import RiEditBoxLine from "~icons/ri/edit-box-line?raw";
+import RiCodeBoxLine from "~icons/ri/code-box-line?raw";
+import RiArtboardLine from "~icons/ri/artboard-line?raw";
+import RiMarkdownLine from "~icons/ri/markdown-line?raw";
+import RiFileInfoLine from "~icons/ri/file-info-line?raw";
+import RiBankCardLine from "~icons/ri/bank-card-line?raw";
+import RiFilePpt2Line from "~icons/ri/file-ppt-2-line?raw";
+import RiGitBranchLine from "~icons/ri/git-branch-line?raw";
+import RiSettings3Line from "~icons/ri/settings-3-line?raw";
+import RiUserVoiceLine from "~icons/ri/user-voice-line?raw";
+import RiBookmark2Line from "~icons/ri/bookmark-2-line?raw";
+import RiFileSearchLine from "~icons/ri/file-search-line?raw";
+import RiChatSearchLine from "~icons/ri/chat-search-line?raw";
+import RiInformationLine from "~icons/ri/information-line?raw";
+import RiTerminalWindowLine from "~icons/ri/terminal-window-line?raw";
+import RiCheckboxCircleLine from "~icons/ri/checkbox-circle-line?raw";
+import RiBarChartHorizontalLine from "~icons/ri/bar-chart-horizontal-line?raw";
+
+const icons = [
+  // Element Plus Icon: https://github.com/element-plus/element-plus-icons
+  ["ep/menu", EpMenu],
+  ["ep/edit", EpEdit],
+  ["ep/guide", EpGuide],
+  ["ep/set-up", EpSetUp],
+  ["ep/monitor", EpMonitor],
+  ["ep/lollipop", EpLollipop],
+  ["ep/histogram", EpHistogram],
+  ["ep/home-filled", EpHomeFilled],
+  // Remix Icon: https://github.com/Remix-Design/RemixIcon
+  ["ri/mind-map", RiMindMap],
+  ["ri/admin-fill", RiAdminFill],
+  ["ri/links-fill", RiTableLine],
+  ["ri/table-line", RiLinksFill],
+  ["ri/admin-line", RiAdminLine],
+  ["ri/list-check", RiListCheck],
+  ["ri/search-line", RiSearchLine],
+  ["ri/window-line", RiWindowLine],
+  ["ri/ubuntu-fill", RiUbuntuFill],
+  ["ri/history-fill", RiHistoryFill],
+  ["ri/edit-box-line", RiEditBoxLine],
+  ["ri/code-box-line", RiCodeBoxLine],
+  ["ri/artboard-line", RiArtboardLine],
+  ["ri/markdown-line", RiMarkdownLine],
+  ["ri/file-info-line", RiFileInfoLine],
+  ["ri/bank-card-line", RiBankCardLine],
+  ["ri/file-ppt-2-line", RiFilePpt2Line],
+  ["ri/git-branch-line", RiGitBranchLine],
+  ["ri/settings-3-line", RiSettings3Line],
+  ["ri/user-voice-line", RiUserVoiceLine],
+  ["ri/bookmark-2-line", RiBookmark2Line],
+  ["ri/file-search-line", RiFileSearchLine],
+  ["ri/chat-search-line", RiChatSearchLine],
+  ["ri/information-line", RiInformationLine],
+  ["ri/terminal-window-line", RiTerminalWindowLine],
+  ["ri/checkbox-circle-line", RiCheckboxCircleLine],
+  ["ri/bar-chart-horizontal-line", RiBarChartHorizontalLine]
+];
+
 // 本地菜单图标，后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标
-// @iconify-icons/ep
-import Menu from "@iconify-icons/ep/menu";
-import Edit from "@iconify-icons/ep/edit";
-import SetUp from "@iconify-icons/ep/set-up";
-import Guide from "@iconify-icons/ep/guide";
-import Monitor from "@iconify-icons/ep/monitor";
-import Lollipop from "@iconify-icons/ep/lollipop";
-import Histogram from "@iconify-icons/ep/histogram";
-import HomeFilled from "@iconify-icons/ep/home-filled";
-addIcon("ep:menu", Menu);
-addIcon("ep:edit", Edit);
-addIcon("ep:set-up", SetUp);
-addIcon("ep:guide", Guide);
-addIcon("ep:monitor", Monitor);
-addIcon("ep:lollipop", Lollipop);
-addIcon("ep:histogram", Histogram);
-addIcon("ep:home-filled", HomeFilled);
-// @iconify-icons/ri
-import Tag from "@iconify-icons/ri/bookmark-2-line";
-import Ppt from "@iconify-icons/ri/file-ppt-2-line";
-import Card from "@iconify-icons/ri/bank-card-line";
-import Role from "@iconify-icons/ri/admin-fill";
-import Info from "@iconify-icons/ri/file-info-line";
-import Dept from "@iconify-icons/ri/git-branch-line";
-import Table from "@iconify-icons/ri/table-line";
-import Links from "@iconify-icons/ri/links-fill";
-import Search from "@iconify-icons/ri/search-line";
-import FlUser from "@iconify-icons/ri/admin-line";
-import Setting from "@iconify-icons/ri/settings-3-line";
-import MindMap from "@iconify-icons/ri/mind-map";
-import BarChart from "@iconify-icons/ri/bar-chart-horizontal-line";
-import LoginLog from "@iconify-icons/ri/window-line";
-import Artboard from "@iconify-icons/ri/artboard-line";
-import SystemLog from "@iconify-icons/ri/file-search-line";
-import ListCheck from "@iconify-icons/ri/list-check";
-import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
-import OnlineUser from "@iconify-icons/ri/user-voice-line";
-import EditBoxLine from "@iconify-icons/ri/edit-box-line";
-import OperationLog from "@iconify-icons/ri/history-fill";
-import InformationLine from "@iconify-icons/ri/information-line";
-import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
-import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
-addIcon("ri:bookmark-2-line", Tag);
-addIcon("ri:file-ppt-2-line", Ppt);
-addIcon("ri:bank-card-line", Card);
-addIcon("ri:admin-fill", Role);
-addIcon("ri:file-info-line", Info);
-addIcon("ri:git-branch-line", Dept);
-addIcon("ri:links-fill", Links);
-addIcon("ri:table-line", Table);
-addIcon("ri:search-line", Search);
-addIcon("ri:admin-line", FlUser);
-addIcon("ri:settings-3-line", Setting);
-addIcon("ri:mind-map", MindMap);
-addIcon("ri:bar-chart-horizontal-line", BarChart);
-addIcon("ri:window-line", LoginLog);
-addIcon("ri:file-search-line", SystemLog);
-addIcon("ri:artboard-line", Artboard);
-addIcon("ri:list-check", ListCheck);
-addIcon("ri:ubuntu-fill", UbuntuFill);
-addIcon("ri:user-voice-line", OnlineUser);
-addIcon("ri:edit-box-line", EditBoxLine);
-addIcon("ri:history-fill", OperationLog);
-addIcon("ri:information-line", InformationLine);
-addIcon("ri:terminal-window-line", TerminalWindowLine);
-addIcon("ri:checkbox-circle-line", CheckboxCircleLine);
+icons.forEach(([name, icon]) => {
+  addIcon(name as string, getSvgInfo(icon as string));
+});

src/components/RePureTableBar/src/bar.tsx

@@ -18,8 +18,8 @@ import {
   getKeyList
 } from "@pureadmin/utils";
 
-import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
-import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import Fullscreen from "~icons/ri/fullscreen-fill";
+import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
 import DragIcon from "@/assets/table-bar/drag.svg?component";
 import ExpandIcon from "@/assets/table-bar/expand.svg?component";
 import RefreshIcon from "@/assets/table-bar/refresh.svg?component";

src/components/ReQrcode/src/index.tsx

@@ -11,7 +11,7 @@ import "./index.scss";
 import propTypes from "@/utils/propTypes";
 import { isString, cloneDeep } from "@pureadmin/utils";
 import QRCode, { type QRCodeRenderersOptions } from "qrcode";
-import RefreshRight from "@iconify-icons/ep/refresh-right";
+import RefreshRight from "~icons/ep/refresh-right";
 
 interface QrcodeLogo {
   src?: string;

src/components/ReVxeTableBar/src/bar.tsx

@@ -12,8 +12,8 @@ import {
   getCurrentInstance
 } from "vue";
 
-import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
-import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import Fullscreen from "~icons/ri/fullscreen-fill";
+import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
 import DragIcon from "@/assets/table-bar/drag.svg?component";
 import ExpandIcon from "@/assets/table-bar/expand.svg?component";
 import RefreshIcon from "@/assets/table-bar/refresh.svg?component";