优化自定义图标功能，修复上线后无法展示自定义图标的问题。 (#1625)

* 修改自定义图标使用方式

* 优化自定义icon功能

web/src/components/svgIcon/svgIcon.vue

@@ -0,0 +1,39 @@
+<template>
+  <svg
+    :class="svgClass"
+    v-bind="$attrs"
+    :color="color"
+  >
+    <use
+      :xlink:href="'#'+name"
+      rel="external nofollow"
+    />
+  </svg>
+</template>
+<script setup>
+import { defineProps, computed } from 'vue'
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
+  }
+})
+
+const svgClass = computed(() => {
+  if (props.name) {
+    return `svg-icon ${props.name}`
+  }
+  return 'svg-icon'
+})
+</script>
+<style scoped>
+.svg-icon {
+  @apply w-4 h-4;
+  fill: currentColor;
+  vertical-align: middle;
+}
+</style>

web/src/core/global.js

@@ -3,26 +3,14 @@ import { h } from 'vue'
 
 // 统一导入el-icon图标
 import * as ElIconModules from '@element-plus/icons-vue'
+import svgIcon from '@/components/svgIcon/svgIcon.vue'
 // 导入转换图标名称的函数
 
-const createIconComponent = (svgContent) => ({
+const createIconComponent = (name) => ({
   name: 'SvgIcon',
-  props: {
-    iconClass: {
-      type: String,
-      default: '',
-    },
-    className: {
-      type: String,
-      default: '',
-    },
-  },
   render() {
-    const { className } = this
-    return h('span', {
-      class: className,
-      ariaHidden: true,
-      innerHTML: svgContent,
+    return h(svgIcon, {
+      name: name,
     })
   },
 })
@@ -30,15 +18,14 @@ const createIconComponent = (svgContent) => ({
 const registerIcons = async(app) => {
   const iconModules = import.meta.glob('@/assets/icons/**/*.svg')
   for (const path in iconModules) {
-    const response = await fetch(path)
-    const svgContent = await response.text()
     const iconName = path.split('/').pop().replace(/\.svg$/, '')
     // 如果iconName带空格则不加入到图标库中并且提示名称不合法
+    console.log(iconName)
     if (iconName.indexOf(' ') !== -1) {
       console.error(`icon ${iconName}.svg includes whitespace`)
       continue
     }
-    const iconComponent = createIconComponent(svgContent)
+    const iconComponent = createIconComponent(iconName)
     config.logs.push({
       'key': iconName,
       'label': iconName,
@@ -52,6 +39,7 @@ export const register = (app) => {
   for (const iconName in ElIconModules) {
     app.component(iconName, ElIconModules[iconName])
   }
+  app.component('SvgIcon', svgIcon)
   registerIcons(app)
   app.config.globalProperties.$GIN_VUE_ADMIN = config
 }

web/src/style/main.scss

@@ -688,3 +688,6 @@ li {
 #nprogress .bar {
     background: #29d !important;
 }
+.gva-customer-icon{
+    @apply w-4 h-4;
+}

web/src/view/login/index.vue

@@ -12,6 +12,7 @@
         <div class="z-[999] pt-12 pb-10 md:w-96 w-full  rounded-lg flex flex-col justify-between box-border">
           <div>
             <div class="flex items-center justify-center">
+
               <img
                 class="w-24"
                 :src="$GIN_VUE_ADMIN.appLogo"