feat: 第三方登录离线图标

apps/web-antd/src/views/_core/authentication/oauth-login.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
 import { Col, Row, Tooltip } from 'ant-design-vue';
@@ -31,7 +30,7 @@ const clientList = accountBindList.filter((item) => item.action);
         <Tooltip :title="`${item.title}登录`">
           <span class="flex cursor-pointer items-center justify-center">
             <component
-              :is="createIconifyIcon(item.avatar)"
+              :is="item.avatar"
               v-if="item.avatar"
               :style="{ color: item.color }"
               class="size-[24px]"

apps/web-antd/src/views/_core/oauth-common.ts

@@ -1,3 +1,13 @@
+import type { Component } from 'vue';
+
+import {
+  AlipayIcon,
+  DingdingIcon,
+  GiteeIcon,
+  GithubOAuthIcon,
+  TaobaoIcon,
+} from '@vben/icons';
+
 import { authBinding } from '#/api/core/auth';
 /**
  * @description: 菜单
@@ -13,7 +23,7 @@ export interface ListItem {
   title: string;
   description: string;
   extra?: string;
-  avatar?: string;
+  avatar?: Component;
   color?: string;
 }
 
@@ -50,7 +60,7 @@ async function handleAuthBinding(source: string) {
  */
 export const accountBindList: BindItem[] = [
   {
-    avatar: 'ri:taobao-fill',
+    avatar: TaobaoIcon,
     color: '#ff4000',
     description: '绑定淘宝账号',
     key: '1',
@@ -58,7 +68,7 @@ export const accountBindList: BindItem[] = [
     title: '淘宝',
   },
   {
-    avatar: 'fa-brands:alipay',
+    avatar: AlipayIcon,
     color: '#2eabff',
     description: '绑定支付宝账号',
     key: '2',
@@ -66,7 +76,7 @@ export const accountBindList: BindItem[] = [
     title: '支付宝',
   },
   {
-    avatar: 'ri:dingding-fill',
+    avatar: DingdingIcon,
     color: '#2eabff',
     description: '绑定钉钉账号',
     key: '3',
@@ -75,7 +85,7 @@ export const accountBindList: BindItem[] = [
   },
   {
     action: () => handleAuthBinding('gitee'),
-    avatar: 'simple-icons:gitee',
+    avatar: GiteeIcon,
     color: '#c71d23',
     description: '绑定GITEE账号',
     key: '4',
@@ -84,7 +94,7 @@ export const accountBindList: BindItem[] = [
   },
   {
     action: () => handleAuthBinding('github'),
-    avatar: 'uiw:github',
+    avatar: GithubOAuthIcon,
     color: '',
     description: '绑定GITHUB账号',
     key: '5',

apps/web-antd/src/views/_core/profile/components/account-bind.vue

@@ -5,8 +5,6 @@ import type { SocialInfo } from '#/api/system/social/model';
 
 import { computed, onMounted, ref, unref } from 'vue';
 
-import { createIconifyIcon } from '@vben/icons';
-
 import {
   Alert,
   Avatar,
@@ -127,7 +125,7 @@ onMounted(reload);
               <div class="flex w-full items-center gap-4">
                 <div>
                   <component
-                    :is="createIconifyIcon(item.avatar)"
+                    :is="item.avatar"
                     v-if="item.avatar"
                     :style="{ color: item.color }"
                     class="size-[40px]"

packages/icons/package.json

@@ -21,9 +21,13 @@
   },
   "devDependencies": {
     "@iconify/icons-ant-design": "^1.2.7",
+    "@iconify/icons-fa-brands": "^1.2.4",
     "@iconify/icons-flat-color-icons": "^1.2.5",
     "@iconify/icons-la": "^1.2.3",
     "@iconify/icons-logos": "^1.2.36",
+    "@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"
   }
 }

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

@@ -3,9 +3,14 @@ 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 alipayIcon from '@iconify/icons-fa-brands/alipay';
 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 dingdingFill from '@iconify/icons-ri/dingding-fill';
+import taobaoIconFill from '@iconify/icons-ri/taobao-fill';
+import giteeIcon from '@iconify/icons-simple-icons/gitee';
+import githubOAuthIcon from '@iconify/icons-uiw/github';
 import excelIcon from '@iconify/icons-vscode-icons/file-type-excel';
 
 // 用户 下拉菜单
@@ -38,3 +43,25 @@ export const InBoxIcon = createIconifyOfflineIcon(
   'ant-design:inbox-outlined',
   inboxIcon,
 );
+
+// 第三方登录相关图标
+export const TaobaoIcon = createIconifyOfflineIcon(
+  'ri:taobao-fill',
+  taobaoIconFill,
+);
+export const AlipayIcon = createIconifyOfflineIcon(
+  'fa-brands:alipay',
+  alipayIcon,
+);
+export const DingdingIcon = createIconifyOfflineIcon(
+  'ri:dingding-fill',
+  dingdingFill,
+);
+export const GiteeIcon = createIconifyOfflineIcon(
+  'simple-icons:gitee',
+  giteeIcon,
+);
+export const GithubOAuthIcon = createIconifyOfflineIcon(
+  'uiw:github',
+  githubOAuthIcon,
+);

packages/icons/src/iconify/index.ts

@@ -14,6 +14,5 @@ export const MdiQqchat = createIconifyIcon('mdi:qqchat');
 
 export const EosSystem = createIconifyIcon('eos-icons:system-group');
 
-export const GiteeIcon = createIconifyIcon('simple-icons:gitee');
 // 个人中心
 export const ProfileIcon = createIconifyIcon('mingcute:profile-line');