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

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

* 优化自定义icon功能

Author: 奇淼（piexlmax

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,42 +3,29 @@ 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,
     })
   },
 })
 
 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"

web/vite.config.js

@@ -11,6 +11,7 @@ import vuePlugin from '@vitejs/plugin-vue'
 import GvaPosition from './vitePlugin/gvaPosition'
 import GvaPositionServer from './vitePlugin/codeServer'
 import fullImportPlugin from './vitePlugin/fullImport/fullImport.js'
+import { svgBuilder } from './vitePlugin/svgIcon/svgIcon.js'
 // @see https://cn.vitejs.dev/config/
 export default ({
   command,
@@ -87,6 +88,7 @@ export default ({
         targets: ['Android > 39', 'Chrome >= 60', 'Safari >= 10.1', 'iOS >= 10.3', 'Firefox >= 54', 'Edge >= 15'],
       }),
       vuePlugin(),
+      svgBuilder('./src/assets/icons/'),
       [Banner(`\n Build based on gin-vue-admin \n Time : ${timestamp}`)]
     ],
     css: {

web/vitePlugin/svgIcon/svgIcon.js

@@ -0,0 +1,61 @@
+import { readFileSync, readdirSync } from 'fs'
+const svgTitle = /<svg([^>+].*?)>/
+const clearHeightWidth = /(width|height)="([^>+].*?)"/g
+const hasViewBox = /(viewBox="[^>+].*?")/g
+const clearReturn = /(\r)|(\n)/g
+function findSvgFile(dir) {
+  const svgRes = []
+  const dirents = readdirSync(dir, {
+    withFileTypes: true
+  })
+  for (const dirent of dirents) {
+    if (dirent.isDirectory()) {
+      svgRes.push(...findSvgFile(dir + dirent.name + '/'))
+    } else {
+      const svg = readFileSync(dir + dirent.name)
+        .toString()
+        .replace(clearReturn, '')
+        .replace(svgTitle, ($1, $2) => {
+          // console.log(++i)
+          // console.log(dirent.name)
+          let width = 0
+          let height = 0
+          let content = $2.replace(clearHeightWidth, (s1, s2, s3) => {
+            if (s2 === 'width') {
+              width = s3
+            } else if (s2 === 'height') {
+              height = s3
+            }
+            return ''
+          })
+          if (!hasViewBox.test($2)) {
+            content += `viewBox="0 0 ${width} ${height}"`
+          }
+          return `<symbol id="${dirent.name.replace('.svg', '')}" ${content}>`
+        })
+        .replace('</svg>', '</symbol>')
+      svgRes.push(svg)
+    }
+  }
+  return svgRes
+}
+export const svgBuilder = (path) => {
+  if (path === '') return
+  const res = findSvgFile(path)
+  // console.log(res.length)
+  // const res = []
+  return {
+    name: 'svg-transform',
+    transformIndexHtml(html) {
+      return html.replace(
+        '<body>',
+        `
+          <body>
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">
+              ${res.join('')}
+            </svg>
+        `
+      )
+    }
+  }
+}