feat(侧边栏图标组件): 新增侧边栏图标组件，兼容svg图标

public/img/navbarIcon/playerManage.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749201768551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6732" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M448 247.04m-224 0a224 224 0 1 0 448 0 224 224 0 1 0-448 0Z" p-id="6733" fill="#515151"></path><path d="M600.32 977.28c-14.72-8.96-25.6-23.04-30.08-39.68s-1.28-34.56 7.68-49.28c0-1.92-0.64-2.56-1.28-3.2H576c-35.2 0-64-28.8-64-64v-125.44c0-18.56 7.68-35.84 21.12-48 13.44-12.16 32-17.92 49.92-16 1.28 0 1.92-0.64 1.92-1.92-5.76-8.96-8.96-19.84-9.6-30.72H192c-105.6 0-192 86.4-192 192s86.4 192 192 192h417.92l-9.6-5.76z" p-id="6734" fill="#515151"></path><path d="M800 759.68m-69.76 0a69.76 69.76 0 1 0 139.52 0 69.76 69.76 0 1 0-139.52 0Z" p-id="6735" fill="#515151"></path><path d="M1013.76 703.36a65.856 65.856 0 0 1-51.2-107.52l-104.96-60.8c-10.88 21.12-33.28 35.84-58.88 35.84s-47.36-14.08-58.24-35.2l-101.76 58.88c6.4 10.24 10.24 22.4 10.24 35.84 0 36.48-29.44 65.92-65.92 65.92-2.56 0-5.12 0-7.68-0.64v125.44H576c36.48 0 65.92 29.44 65.92 65.92 0 12.8-3.84 24.96-10.24 34.56l106.88 61.44c10.88-22.4 33.28-37.76 59.52-37.76 26.88 0 49.28 16 60.16 38.4l101.76-58.88c-7.68-10.88-12.8-24.32-12.8-38.4a65.856 65.856 0 0 1 75.52-65.28v-119.68c-1.92 1.28-5.12 1.92-8.96 1.92z m-213.76 167.68a111.424 111.424 0 0 1 0-222.72 111.424 111.424 0 0 1 0 222.72z" p-id="6736" fill="#515151"></path></svg>

src/components/common/DynamicIcon.vue

@@ -0,0 +1,61 @@
+<!-- DynamicIcon.vue -->
+<template>
+  <el-icon>
+    <!-- 判断是否为 Element Plus 图标 -->
+    <component :is="elementPlusIcon" v-if="isElementPlusIcon" />
+
+    <!-- 判断是否为本地 SVG 图标 -->
+    <img v-else :src="localIconPath" :alt="alt" class="local-icon" />
+  </el-icon>
+
+  <!--  <div class="icon-container">-->
+  <!--    &lt;!&ndash; 判断是否为 Element Plus 图标 &ndash;&gt;-->
+  <!--    <component :is="elementPlusIcon" v-if="isElementPlusIcon" />-->
+
+  <!--    &lt;!&ndash; 判断是否为本地 SVG 图标 &ndash;&gt;-->
+  <!--    <img v-else :src="localIconPath" :alt="alt" class="local-icon" />-->
+  <!--  </div>-->
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  icon: string
+  alt?: string
+}
+
+const props = defineProps<Props>()
+
+// 判断是否为 Element Plus 图标（首字母大写，且不包含斜杠或 .svg）
+const isElementPlusIcon = computed(() => {
+  return /^[A-Z]/.test(props.icon) && !props.icon.includes('/') && !props.icon.endsWith('.svg')
+})
+
+// 动态映射 Element Plus 图标
+const elementPlusIcon = computed(() => {
+  return props.icon
+})
+
+// 本地 SVG 图标路径
+const localIconPath = computed(() => {
+  // if (!isElementPlusIcon && props.icon.startsWith('@/')) {
+  //   return new URL(`../${props.icon.replace('@/assets/', '')}`, import.meta.url).href
+  // }
+  console.log('----')
+  return props.icon
+})
+</script>
+
+<style scoped>
+/*.icon-container {*/
+/*  display: inline-block;*/
+/*  vertical-align: middle;*/
+/*}*/
+
+.local-icon {
+  width: 1em;
+  height: 1em;
+  object-fit: contain;
+}
+</style>