添加 SvgIcon 组件

components.d.ts

@@ -9,5 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SvgIcon: typeof import('./src/components/SvgIcon/src/index.vue')['default']
   }
 }

package.json

@@ -48,6 +48,7 @@
     "unplugin-vue-components": "^0.25.1",
     "vite": "^4.4.6",
     "vite-plugin-style-import": "^2.0.0",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^1.8.6"
   }
 }

src/components/SvgIcon/index.ts

+import SvgIcon from './src/index.vue'
+
+export { SvgIcon }

src/components/SvgIcon/src/index.vue

+<template>
+  <svg aria-hidden="true" class="svg-icon" :style="getStyle">
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'SvgIcon',
+  props: {
+    prefix: {
+      type: String,
+      default: 'icon'
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      default: '#333'
+    },
+    size: {
+      type: String,
+      default: '1em'
+    }
+  },
+  setup(props) {
+    const symbolId = computed(() => `#${props.prefix}-${props.name}`)
+
+    const getStyle = computed(() => {
+      return {
+        width: props.size,
+        height: props.size
+      }
+    })
+    return {
+      symbolId,
+      getStyle
+    }
+  }
+})
+</script>
+<style lang="scss" scoped>
+.svg-icon {
+  display: inline-block;
+  overflow: hidden;
+  fill: currentcolor;
+  vertical-align: -0.15em;
+}
+</style>

src/components/registerGlobalComponents.ts

+import type { App } from 'vue';
+
+import { Input, Form } from 'ant-design-vue'
+import VXETable from 'vxe-table';
+
+export function setupGlobalComponents(app: App) {
+    app.use(Input).use(Form).use(VXETable)
+}
\ No newline at end of file

src/layouts/page/PageTitle.vue

 <template>
+  <SvgIcon name="home"></SvgIcon>
   <h1 class="page-title">{{ title }}</h1>
 </template>
 
-<script lang='ts'>
-import { defineComponent } from 'vue';
+<script lang="ts">
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   props: {
@@ -14,10 +15,10 @@ export default defineComponent({
   }
 })
 </script>
-<style lang='less'>
+<style lang="less">
 .page-title {
-    font-size: 20px;
-    font-weight: 600;
-    margin-bottom: 20px;
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 20px;
 }
 </style>

src/main.ts

 import { createApp } from 'vue'
 import '@/assets/main.css'
+import 'vxe-table/lib/style.css'
+// register svgIcon
+import 'virtual:svg-icons-register'
 
 import { router, setupRouter } from './router'
 import { setupStore } from './stores'
-import VXETable from 'vxe-table'
-import 'vxe-table/lib/style.css'
-// import  setVxeTable from './plugins/vxe-table/index'
-import App from './App.vue'
 import { setupRouterGuard } from './router/guard'
+import { setupGlobalComponents } from './components/registerGlobalComponents'
+
+
+import App from './App.vue'
 
 function bootstrap() {
   const app = createApp(App)
@@ -22,7 +25,7 @@ function bootstrap() {
   // 路由守卫
   setupRouterGuard(router)
 
-  app.use(VXETable)
+  setupGlobalComponents(app)
 
   app.mount('#app')
 }

tsconfig.app.json

 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts", "scr/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,

vite.config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from 'vite'
 import Components from 'unplugin-vue-components/vite'
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
 import { createStyleImportPlugin, VxeTableResolve } from 'vite-plugin-style-import'
-
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import path from 'node:path'
 
 // https://vitejs.dev/config/
@@ -21,6 +21,10 @@ export default defineConfig({
     }),
     createStyleImportPlugin({
       resolves: [VxeTableResolve()]
+    }),
+    createSvgIconsPlugin({
+      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
+      symbolId: 'icon-[name]'
     })
   ],
   server: {