feat: optimized icons

src/components/icon/Icon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClIcon' });
-import { computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import useIcon from '@/components/icon/icon';
 
 const props = withDefaults(
@@ -15,7 +15,7 @@ const props = withDefaults(
   }
 );
 
-const { isFaIcon: _isFaIcon, getFontSize } = useIcon();
+const { isFaIcon: _isFaIcon, isAzure: _isAzure, getFontSize } = useIcon();
 
 const fontSize = computed(() => {
   const { size } = props;
@@ -27,6 +27,27 @@ const isFaIcon = computed<boolean>(() => {
   if (!icon) return false;
   return _isFaIcon(icon);
 });
+
+const isAzure = computed<boolean>(() => {
+  const { icon } = props;
+  if (!icon) return false;
+  return _isAzure(icon);
+});
+
+const iconComponent = ref<any>(null);
+
+onMounted(async () => {
+  if (isAzure.value) {
+    const azureIcons = import.meta.glob('@/assets/svg/icons/azure/*.svg');
+    const azureIconPath = `@/assets/svg/icons/azure/${props.icon[1]}.svg`;
+    if (azureIcons[azureIconPath]) {
+      azureIcons[azureIconPath]().then((module: any) => {
+        iconComponent.value = module.default;
+        console.debug(module, iconComponent.value);
+      });
+    }
+  }
+});
 </script>
 
 <template>
@@ -38,6 +59,7 @@ const isFaIcon = computed<boolean>(() => {
       :style="{ fontSize, color }"
       class="icon"
     />
+    <component v-else-if="isAzure" :is="iconComponent"></component>
     <i
       v-else
       :class="[spinning ? 'fa-spin' : '', icon, 'icon']"

src/components/icon/icon.ts

@@ -1,10 +1,17 @@
 const useIcon = () => {
-  // implementation
   const isFaIcon = (icon: Icon) => {
     if (Array.isArray(icon)) {
-      return icon.length > 0 && icon[0].substr(0, 2) === 'fa';
+      return icon.length > 0 && icon[0].substring(0, 2) === 'fa';
     } else {
-      return icon?.substr(0, 2) === 'fa';
+      return icon?.substring(0, 2) === 'fa';
+    }
+  };
+
+  const isAzure = (icon: Icon) => {
+    if (Array.isArray(icon)) {
+      return icon.length > 0 && icon[0] === 'azure';
+    } else {
+      return icon?.startsWith('azure');
     }
   };
 
@@ -26,6 +33,7 @@ const useIcon = () => {
   return {
     // public variables and methods
     isFaIcon,
+    isAzure,
     getFontSize,
   };
 };

src/views/git/list/useGitList.ts

@@ -22,6 +22,7 @@ import {
 import NavLink from '@/components/nav/NavLink.vue';
 import GitStatus from '@/components/git/GitStatus.vue';
 import ClTag from '@/components/tag/Tag.vue';
+import ClIcon from '@/components/icon/Icon.vue';
 
 const useGitList = () => {
   // router
@@ -92,10 +93,26 @@ const useGitList = () => {
           icon: ['fa', 'font'],
           width: '240',
           value: (row: Git) =>
-            h(NavLink, {
-              path: `/gits/${row._id}`,
-              label: row.name,
-            }),
+            h(
+              'div',
+              {
+                style: {
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'start',
+                  gap: '8px',
+                },
+              },
+              [
+                h(ClIcon, {
+                  icon: ['fab', 'git'],
+                }),
+                h(NavLink, {
+                  path: `/gits/${row._id}`,
+                  label: row.name,
+                }),
+              ]
+            ),
           hasSort: true,
           hasFilter: true,
           allowFilterSearch: true,
@@ -131,6 +148,7 @@ const useGitList = () => {
                   ? h(ClTag, {
                       type: 'info',
                       icon: ['fa', 'file-alt'],
+                      tooltip: t('components.git.form.cloneLogs'),
                       clickable: true,
                       onClick: () => {
                         store.commit(`${ns}/showDialog`, 'logs');