feat: 离线图标功能 & 一些改造

apps/web-antd/src/layouts/basic.vue

@@ -5,7 +5,12 @@ import { useRouter } from 'vue-router';
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
 import { useWatermark } from '@vben/hooks';
-import { BookOpenText, CircleHelp, MdiGithub, ProfileIcon } from '@vben/icons';
+import {
+  BookOpenText,
+  CircleHelp,
+  GitHubOutlined,
+  UserOutlined,
+} from '@vben/icons';
 import {
   BasicLayout,
   LockScreen,
@@ -47,7 +52,7 @@ const menus = computed(() => {
       handler: () => {
         router.push('/profile');
       },
-      icon: ProfileIcon,
+      icon: UserOutlined,
       text: $t('ui.widgets.profile'),
     },
     {
@@ -56,7 +61,7 @@ const menus = computed(() => {
           target: '_blank',
         });
       },
-      icon: MdiGithub,
+      icon: GitHubOutlined,
       text: 'GitHub',
     },
     {

packages/@core/base/icons/src/create-icon.ts

@@ -1,6 +1,10 @@
 import { defineComponent, h } from 'vue';
 
-import { Icon } from '@iconify/vue';
+import { Icon, type IconifyIcon } from '@iconify/vue';
+import {
+  addIcon as addOfflineIcon,
+  Icon as OfflineIcon,
+} from '@iconify/vue/dist/offline';
 
 function createIconifyIcon(icon: string) {
   return defineComponent({
@@ -11,4 +15,20 @@ function createIconifyIcon(icon: string) {
   });
 }
 
-export { createIconifyIcon };
+/**
+ * 创建离线图标
+ * @param icon 图标名称 建议与iconify的名称保持一致
+ * @param iconComponent 从@iconify/icon-xxx/xxx导入的图标
+ * @returns IconComponent
+ */
+function createIconifyOfflineIcon(icon: string, iconComponent: IconifyIcon) {
+  return defineComponent({
+    name: `Icon-${icon}`,
+    setup(props, { attrs }) {
+      addOfflineIcon(icon, iconComponent);
+      return () => h(OfflineIcon, { icon, ...props, ...attrs });
+    },
+  });
+}
+
+export { createIconifyIcon, createIconifyOfflineIcon };

packages/@core/base/icons/src/index.ts

@@ -5,3 +5,9 @@ export * from './lucide';
 
 export type { IconifyIcon as IconifyIconStructure } from '@iconify/vue';
 export { addCollection, addIcon, Icon as IconifyIcon } from '@iconify/vue';
+// 离线图标使用
+export {
+  addCollection as addOfflineCollection,
+  addIcon as addOfflineIcon,
+  Icon as IconifyOfflineIcon,
+} from '@iconify/vue/dist/offline';

packages/icons/package.json

@@ -18,5 +18,12 @@
   },
   "dependencies": {
     "@vben-core/icons": "workspace:*"
+  },
+  "devDependencies": {
+    "@iconify/icons-ant-design": "^1.2.7",
+    "@iconify/icons-flat-color-icons": "^1.2.5",
+    "@iconify/icons-la": "^1.2.3",
+    "@iconify/icons-logos": "^1.2.36",
+    "@iconify/icons-vscode-icons": "^1.2.29"
   }
 }

packages/icons/src/iconify-offline/index.ts

@@ -0,0 +1,40 @@
+import { createIconifyOfflineIcon } from '@vben-core/icons';
+
+import githubOutlined from '@iconify/icons-ant-design/github-outlined';
+import inboxIcon from '@iconify/icons-ant-design/inbox-outlined';
+import userOutlined from '@iconify/icons-ant-design/user-outlined';
+import comandLine from '@iconify/icons-flat-color-icons/command-line';
+import memoryIcon from '@iconify/icons-la/memory';
+import redisIcon from '@iconify/icons-logos/redis';
+import excelIcon from '@iconify/icons-vscode-icons/file-type-excel';
+
+// 用户 下拉菜单
+export const GitHubOutlined = createIconifyOfflineIcon(
+  'ant-design:github-outlined',
+  githubOutlined,
+);
+
+export const UserOutlined = createIconifyOfflineIcon(
+  'ant-design:user-outlined',
+  userOutlined,
+);
+
+// 缓存监控使用
+export const RedisIcon = createIconifyOfflineIcon('logos:redis', redisIcon);
+export const CommandLineIcon = createIconifyOfflineIcon(
+  'flat-color-icons:command-line',
+  comandLine,
+);
+export const MemoryIcon = createIconifyOfflineIcon('la:memory', memoryIcon);
+
+// 用户管理 导入
+// Excel图标
+export const ExcelIcon = createIconifyOfflineIcon(
+  'vscode-icons:file-type-excel',
+  excelIcon,
+);
+// 拖拽上传图标
+export const InBoxIcon = createIconifyOfflineIcon(
+  'ant-design:inbox-outlined',
+  inboxIcon,
+);

packages/icons/src/iconify/index.ts

@@ -13,18 +13,7 @@ export const MdiGoogle = createIconifyIcon('mdi:google');
 export const MdiQqchat = createIconifyIcon('mdi:qqchat');
 
 export const EosSystem = createIconifyIcon('eos-icons:system-group');
-// 缓存监控使用
-export const RedisIcon = createIconifyIcon('logos:redis');
-export const CommandLineIcon = createIconifyIcon(
-  'flat-color-icons:command-line',
-);
-export const MemoryIcon = createIconifyIcon('la:memory');
 
 export const GiteeIcon = createIconifyIcon('simple-icons:gitee');
 // 个人中心
 export const ProfileIcon = createIconifyIcon('mingcute:profile-line');
-
-// Excel图标
-export const ExcelIcon = createIconifyIcon('vscode-icons:file-type-excel');
-// 拖拽上传图标
-export const InBoxIcon = createIconifyIcon('ant-design:inbox-outlined');

packages/icons/src/index.ts

@@ -1,2 +1,3 @@
 export * from './iconify/index.js';
+export * from './iconify-offline/index.js';
 export * from './svg/index.js';