feat: 系统/浏览器离线图标

apps/web-antd/src/utils/render.tsx

@@ -1,7 +1,29 @@
 import type { DictData } from '#/api/system/dict/dict-data-model';
 
+import { type Component as ComponentType, h } from 'vue';
+
 import { JsonPreview } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
+import {
+  AndroidIcon,
+  BaiduIcon,
+  ChromeIcon,
+  DefaultBrowserIcon,
+  DefaultOsIcon,
+  DingtalkIcon,
+  EdgeIcon,
+  FirefoxIcon,
+  IconifyIcon,
+  IPhoneIcon,
+  LinuxIcon,
+  MicromessengerIcon,
+  OperaIcon,
+  OSXIcon,
+  QQIcon,
+  QuarkIcon,
+  SafariIcon,
+  UcIcon,
+  WindowsIcon,
+} from '@vben/icons';
 
 import { Tag } from 'ant-design-vue';
 
@@ -129,28 +151,28 @@ export function renderDict(value: string, dictName: string) {
   const dictInfo = getDict(dictName);
   return renderDictTag(value, dictInfo);
 }
-
 export function renderIconSpan(
-  icon: string,
+  icon: ComponentType,
   value: string,
   center = false,
   marginLeft = '2px',
 ) {
   const justifyCenter = center ? 'justify-center' : '';
+
   return (
     <span class={['flex', 'items-center', justifyCenter]}>
-      {renderIcon(icon)}
+      {h(icon)}
       <span style={{ marginLeft }}>{value}</span>
     </span>
   );
 }
 
 const osOptions = [
-  { icon: 'devicon:windows8', value: 'windows' },
-  { icon: 'devicon:linux', value: 'linux' },
-  { icon: 'wpf:macos', value: 'osx' },
-  { icon: 'flat-color-icons:android-os', value: 'android' },
-  { icon: 'majesticons:iphone-x-apps-line', value: 'iphone' },
+  { icon: WindowsIcon, value: 'windows' },
+  { icon: LinuxIcon, value: 'linux' },
+  { icon: OSXIcon, value: 'osx' },
+  { icon: AndroidIcon, value: 'android' },
+  { icon: IPhoneIcon, value: 'iphone' },
 ];
 
 /**
@@ -158,18 +180,18 @@ const osOptions = [
  * cn.hutool.http.useragent -> browers
  */
 const browserOptions = [
-  { icon: 'logos:chrome', value: 'chrome' },
-  { icon: 'logos:microsoft-edge', value: 'edge' },
-  { icon: 'logos:firefox', value: 'firefox' },
-  { icon: 'logos:opera', value: 'opera' },
-  { icon: 'logos:safari', value: 'safari' },
-  { icon: 'mdi:wechat', value: 'micromessenger' },
-  { icon: 'logos:quarkus-icon', value: 'quark' },
-  { icon: 'mdi:wechat', value: 'wxwork' },
-  { icon: 'simple-icons:tencentqq', value: 'qq' },
-  { icon: 'ri:dingding-line', value: 'dingtalk' },
-  { icon: 'arcticons:uc-browser', value: 'uc' },
-  { icon: 'ri:baidu-fill', value: 'baidu' },
+  { icon: ChromeIcon, value: 'chrome' },
+  { icon: EdgeIcon, value: 'edge' },
+  { icon: FirefoxIcon, value: 'firefox' },
+  { icon: OperaIcon, value: 'opera' },
+  { icon: SafariIcon, value: 'safari' },
+  { icon: MicromessengerIcon, value: 'micromessenger' },
+  { icon: QuarkIcon, value: 'quark' },
+  { icon: MicromessengerIcon, value: 'wxwork' },
+  { icon: QQIcon, value: 'qq' },
+  { icon: DingtalkIcon, value: 'dingtalk' },
+  { icon: UcIcon, value: 'uc' },
+  { icon: BaiduIcon, value: 'baidu' },
 ];
 
 export function renderOsIcon(os: string, center = false) {
@@ -187,7 +209,7 @@ export function renderOsIcon(os: string, center = false) {
     return renderIconSpan(current.icon, os, center, '5px');
   }
   // 返回默认
-  const defaultIcon = 'ic:outline-computer';
+  const defaultIcon = DefaultOsIcon;
   return renderIconSpan(defaultIcon, os, center, '5px');
 }
 
@@ -202,6 +224,6 @@ export function renderBrowserIcon(browser: string, center = false) {
     return renderIconSpan(current.icon, browser, center, '5px');
   }
   // 返回默认
-  const defaultIcon = 'ph:browser-duotone';
+  const defaultIcon = DefaultBrowserIcon;
   return renderIconSpan(defaultIcon, browser, center, '5px');
 }

packages/icons/package.json

@@ -21,13 +21,20 @@
   },
   "devDependencies": {
     "@iconify/icons-ant-design": "^1.2.7",
+    "@iconify/icons-arcticons": "^1.2.77",
+    "@iconify/icons-devicon": "^1.2.17",
     "@iconify/icons-fa-brands": "^1.2.4",
     "@iconify/icons-flat-color-icons": "^1.2.5",
+    "@iconify/icons-ic": "^1.2.13",
     "@iconify/icons-la": "^1.2.3",
     "@iconify/icons-logos": "^1.2.36",
+    "@iconify/icons-majesticons": "^1.2.6",
+    "@iconify/icons-mdi": "^1.2.48",
+    "@iconify/icons-ph": "^1.2.5",
     "@iconify/icons-ri": "^1.2.10",
     "@iconify/icons-simple-icons": "^1.2.74",
     "@iconify/icons-uiw": "^1.2.6",
-    "@iconify/icons-vscode-icons": "^1.2.29"
+    "@iconify/icons-vscode-icons": "^1.2.29",
+    "@iconify/icons-wpf": "^1.2.3"
   }
 }

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

@@ -3,15 +3,33 @@ 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 ucIcon from '@iconify/icons-arcticons/uc-browser';
+import linuxIcon from '@iconify/icons-devicon/linux';
+import windowsIcon from '@iconify/icons-devicon/windows8';
 import alipayIcon from '@iconify/icons-fa-brands/alipay';
+import androidIcon from '@iconify/icons-flat-color-icons/android-os';
 import comandLine from '@iconify/icons-flat-color-icons/command-line';
+import defaultOsIcon from '@iconify/icons-ic/outline-computer';
 import memoryIcon from '@iconify/icons-la/memory';
+import chromeIcon from '@iconify/icons-logos/chrome';
+import firefoxIcon from '@iconify/icons-logos/firefox';
+import edgeIcon from '@iconify/icons-logos/microsoft-edge';
+import operaIcon from '@iconify/icons-logos/opera';
+import quarkIcon from '@iconify/icons-logos/quarkus-icon';
 import redisIcon from '@iconify/icons-logos/redis';
+import safariIcon from '@iconify/icons-logos/safari';
+import iphoneIcon from '@iconify/icons-majesticons/iphone-x-apps-line';
+import micromessengerIcon from '@iconify/icons-mdi/wechat';
+import defaultBrowserIcon from '@iconify/icons-ph/browser-duotone';
+import baiduIcon from '@iconify/icons-ri/baidu-fill';
 import dingdingFill from '@iconify/icons-ri/dingding-fill';
+import dingtalkIcon from '@iconify/icons-ri/dingding-line';
 import taobaoIconFill from '@iconify/icons-ri/taobao-fill';
 import giteeIcon from '@iconify/icons-simple-icons/gitee';
+import qqIcon from '@iconify/icons-simple-icons/tencentqq';
 import githubOAuthIcon from '@iconify/icons-uiw/github';
 import excelIcon from '@iconify/icons-vscode-icons/file-type-excel';
+import osxIcon from '@iconify/icons-wpf/macos';
 
 // 用户 下拉菜单
 export const GitHubOutlined = createIconifyOfflineIcon(
@@ -65,3 +83,60 @@ export const GithubOAuthIcon = createIconifyOfflineIcon(
   'uiw:github',
   githubOAuthIcon,
 );
+
+// 系统相关图标
+export const WindowsIcon = createIconifyOfflineIcon(
+  'devicon:windows8',
+  windowsIcon,
+);
+export const LinuxIcon = createIconifyOfflineIcon('devicon:linux', linuxIcon);
+export const OSXIcon = createIconifyOfflineIcon('wpf:macos', osxIcon);
+export const AndroidIcon = createIconifyOfflineIcon(
+  'flat-color-icons:android-os',
+  androidIcon,
+);
+export const IPhoneIcon = createIconifyOfflineIcon(
+  'majesticons:iphone-x-apps-line',
+  iphoneIcon,
+);
+// 上面图标没找到 默认图标
+export const DefaultOsIcon = createIconifyOfflineIcon(
+  'ic:outline-computer',
+  defaultOsIcon,
+);
+
+// 浏览器相关图标
+export const ChromeIcon = createIconifyOfflineIcon('logos:chrome', chromeIcon);
+export const EdgeIcon = createIconifyOfflineIcon(
+  'logos:microsoft-edge',
+  edgeIcon,
+);
+export const FirefoxIcon = createIconifyOfflineIcon(
+  'logos:firefox',
+  firefoxIcon,
+);
+export const OperaIcon = createIconifyOfflineIcon('logos:opera', operaIcon);
+export const SafariIcon = createIconifyOfflineIcon('logos:safari', safariIcon);
+export const MicromessengerIcon = createIconifyOfflineIcon(
+  'mdi:wechat',
+  micromessengerIcon,
+);
+export const QuarkIcon = createIconifyOfflineIcon(
+  'logos:quarkus-icon',
+  quarkIcon,
+);
+export const QQIcon = createIconifyOfflineIcon(
+  'simple-icons:tencentqq',
+  qqIcon,
+);
+export const DingtalkIcon = createIconifyOfflineIcon(
+  'ri:dingding-line',
+  dingtalkIcon,
+);
+export const UcIcon = createIconifyOfflineIcon('arcticons:uc-browser', ucIcon);
+export const BaiduIcon = createIconifyOfflineIcon('ri:baidu-fill', baiduIcon);
+// 未知浏览器图标
+export const DefaultBrowserIcon = createIconifyOfflineIcon(
+  'ph:browser-duotone',
+  defaultBrowserIcon,
+);