diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue index 81d1cdfa..c7aba31c 100644 --- a/apps/web-antd/src/layouts/basic.vue +++ b/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', }, { diff --git a/packages/@core/base/icons/src/create-icon.ts b/packages/@core/base/icons/src/create-icon.ts index 2c40045b..4ad206de 100644 --- a/packages/@core/base/icons/src/create-icon.ts +++ b/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 }; diff --git a/packages/@core/base/icons/src/index.ts b/packages/@core/base/icons/src/index.ts index 1e0fe564..bb5cdd8d 100644 --- a/packages/@core/base/icons/src/index.ts +++ b/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'; diff --git a/packages/icons/package.json b/packages/icons/package.json index d2730031..e70a1dc5 100644 --- a/packages/icons/package.json +++ b/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" } } diff --git a/packages/icons/src/iconify-offline/index.ts b/packages/icons/src/iconify-offline/index.ts new file mode 100644 index 00000000..31cbccf4 --- /dev/null +++ b/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, +); diff --git a/packages/icons/src/iconify/index.ts b/packages/icons/src/iconify/index.ts index ad5f767e..989ca89b 100644 --- a/packages/icons/src/iconify/index.ts +++ b/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'); diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts index 3645c36b..945160b2 100644 --- a/packages/icons/src/index.ts +++ b/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';