图标本地化处理

Squashed commit of the following:

commit 67023d0ce494b46460729cf39a45af8c9fd10124
Author: Sun <[email protected]>
Date:   Fri Dec 8 12:17:45 2023 +0800

    修改原图标组件为在线图标组件

commit 379441c869489fdf44cb92a0cace75f9e5318915
Author: Sun <[email protected]>
Date:   Fri Dec 8 12:14:59 2023 +0800

    适配本地化图标

commit da6feaa655e792d176f56777e089393f7658eda2
Author: Sun <[email protected]>
Date:   Fri Dec 8 12:14:07 2023 +0800

    图标本地化

commit 02d84f66069653dedfc35578b1b26dad6edac0e3
Author: Sun <[email protected]>
Date:   Thu Dec 7 23:09:41 2023 +0800

    增加离线图标库（源svgicon组件）的兼容并增加在线图标库组件

src/components/common/ItemIcon/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { NAvatar, NImage } from 'naive-ui'
 import { computed, ref, withDefaults } from 'vue'
-import { SvgIcon } from '@/components/common'
+import { SvgIconOnline } from '@/components/common'
 
 interface Prop {
   itemIcon?: Panel.ItemIcon | null
@@ -39,7 +39,7 @@ const iconExt = computed(() => {
 
         <div v-else-if="itemIcon?.itemType === 3">
           <NAvatar :size="props.size" :style="{ backgroundColor: (forceBackground ?? itemIcon?.backgroundColor) || defaultBackground }">
-            <SvgIcon style="font-size: 35px;" :icon="itemIcon.text" />
+            <SvgIconOnline style="font-size: 35px;" :icon="itemIcon.text" />
           </NAvatar>
         </div>
       </div>

src/components/common/SvgIcon/index.vue

@@ -1,21 +1,53 @@
-<script setup lang='ts'>
-import { computed, useAttrs } from 'vue'
-import { Icon } from '@iconify/vue'
+<script setup lang="ts">
+import { computed, onMounted, ref, useAttrs } from 'vue'
 
-interface Props {
+const props = defineProps<{
   icon?: string
-}
-
-defineProps<Props>()
+}>()
 
 const attrs = useAttrs()
-
+const iconName = ref(compatibleName(props.icon || ''))
+const iconContent = ref<string | null>(null)
 const bindAttrs = computed<{ class: string; style: string }>(() => ({
   class: (attrs.class as string) || '',
   style: (attrs.style as string) || '',
 }))
+
+const loadIcon = async () => {
+  try {
+    const iconPath = import.meta.glob('@/assets/svg-icons/*.svg')
+    const iconModule = await iconPath[`/src/assets/svg-icons/${iconName.value}.svg`]()
+    const moduleDefault = iconModule as { default: string }
+    const response = await fetch(moduleDefault.default)
+    const content = await response.text()
+
+    if (isValidSvg(content))
+      iconContent.value = content
+    else
+      console.error(`Invalid SVG format for icon ${iconName.value}`)
+  }
+  catch (error) {
+    console.error(`Error loading icon ${iconName.value}:`, error)
+  }
+}
+
+function isValidSvg(content: string): boolean {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(content, 'image/svg+xml')
+  return doc.documentElement.tagName.toLowerCase() === 'svg'
+}
+
+function compatibleName(inputString: string): string {
+  // 使用正则表达式替换所有的冒号
+  const resultString = inputString.replace(/:/g, '-')
+  return resultString
+}
+
+onMounted(() => {
+  loadIcon()
+})
 </script>
 
 <template>
-  <Icon :icon="icon ?? ''" v-bind="bindAttrs" />
+  <div v-if="iconContent" v-bind="bindAttrs" v-html="iconContent" />
 </template>

src/components/common/SvgIconOnline/index.vue

@@ -0,0 +1,21 @@
+<script setup lang='ts'>
+import { computed, useAttrs } from 'vue'
+import { Icon } from '@iconify/vue'
+
+interface Props {
+  icon?: string
+}
+
+defineProps<Props>()
+
+const attrs = useAttrs()
+
+const bindAttrs = computed<{ class: string; style: string }>(() => ({
+  class: (attrs.class as string) || '',
+  style: (attrs.style as string) || '',
+}))
+</script>
+
+<template>
+  <Icon :icon="icon ?? ''" v-bind="bindAttrs" />
+</template>

src/components/common/index.ts

@@ -6,6 +6,7 @@ import Verification from './Verification/index.vue'
 import ItemIcon from './ItemIcon/index.vue'
 import NaiveProvider from './NaiveProvider/index.vue'
 import RoundCardModal from './RoundCardModal/index.vue'
+import SvgIconOnline from './SvgIconOnline/index.vue'
 
 export {
   Verification,
@@ -16,4 +17,5 @@ export {
   ItemIcon,
   NaiveProvider,
   RoundCardModal,
+  SvgIconOnline,
 }

src/views/home/components/Setting/tabs/ItemGroupManage.vue

@@ -149,7 +149,7 @@ onMounted(() => {
             <div class="flex" :class="sortStatus ? 'cursor-move' : ''">
               <div class="flex items-center">
                 <span class="mr-[10px]">
-                  <SvgIcon class="text-[20px]" icon="material-symbols:ad-group-outline" />
+                  <SvgIcon class="text-[20px]" icon="material-symbols:ad-group-outline-rounded" />
                   <!-- <SvgIcon class="text-[20px]" :icon="item.icon" /> -->
                 </span>
                 <span>

src/views/home/index.vue

@@ -468,7 +468,7 @@ function itemFrontEndSearch(keyword?: string) {
           title="当前:局域网模式，点击切换成互联网模式" @click="handleChangeNetwork(PanelStateNetworkModeEnum.wan)"
         >
           <template #icon>
-            <SvgIcon class="text-white font-xl" icon="material-symbols:lan-outline" />
+            <SvgIcon class="text-white font-xl" icon="material-symbols:lan-outline-rounded" />
           </template>
         </NButton>
 
@@ -495,7 +495,7 @@ function itemFrontEndSearch(keyword?: string) {
 
         <NButton v-if="authStore.visitMode === VisitMode.VISIT_MODE_PUBLIC" color="#2a2a2a6b" title="登录" @click="router.push('/login')">
           <template #icon>
-            <SvgIcon class="text-white font-xl" icon="mdi:user" />
+            <SvgIcon class="text-white font-xl" icon="material-symbols:account-circle" />
           </template>
         </NButton>
       </NButtonGroup>