From b589e05beb986414073e70e7bcca2d4f02ca0463 Mon Sep 17 00:00:00 2001
From: huxin <huxin@123.com>
Date: Fri, 25 Jul 2025 22:50:44 +0800
Subject: [PATCH] =?UTF-8?q?=E7=83=AD=E5=8A=9B=E4=B8=8A=E5=9B=BE=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BDBUG=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/SvgIcon/index.vue          | 53 +++++++++++++++++++
 .../src/components/SvgIcon/svgicon.js         | 10 ++++
 2 files changed, 63 insertions(+)
 create mode 100644 Dkl-vue3-ui-DP/src/components/SvgIcon/index.vue
 create mode 100644 Dkl-vue3-ui-DP/src/components/SvgIcon/svgicon.js

diff --git a/Dkl-vue3-ui-DP/src/components/SvgIcon/index.vue b/Dkl-vue3-ui-DP/src/components/SvgIcon/index.vue
new file mode 100644
index 0000000..8c101f6
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/components/SvgIcon/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName" :fill="color" />
+  </svg>
+</template>
+
+<script>
+export default defineComponent({
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: ''
+    },
+  },
+  setup(props) {
+    return {
+      iconName: computed(() => `#icon-${props.iconClass}`),
+      svgClass: computed(() => {
+        if (props.className) {
+          return `svg-icon ${props.className}`
+        }
+        return 'svg-icon'
+      })
+    }
+  }
+})
+</script>
+
+<style scope lang="scss">
+.sub-el-icon,
+.nav-icon {
+  display: inline-block;
+  font-size: 15px;
+  margin-right: 12px;
+  position: relative;
+}
+
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  position: relative;
+  fill: currentColor;
+  vertical-align: -2px;
+}
+</style>
diff --git a/Dkl-vue3-ui-DP/src/components/SvgIcon/svgicon.js b/Dkl-vue3-ui-DP/src/components/SvgIcon/svgicon.js
new file mode 100644
index 0000000..4431719
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/components/SvgIcon/svgicon.js
@@ -0,0 +1,10 @@
+import * as components from '@element-plus/icons-vue'
+
+export default {
+    install: (app) => {
+        for (const key in components) {
+            const componentConfig = components[key];
+            app.component(componentConfig.name, componentConfig);
+        }
+    },
+};