refactor: icon优化

Former-commit-id: efc04bf33433c06d7dea1f84c41ef83b06ff16f1

src/components/IconSelect/index.vue

@@ -109,7 +109,7 @@ onMounted(() => {
             @click="onIconSelect(iconName)"
           >
             <el-tooltip :content="iconName" placement="bottom" effect="light">
-              <svg-icon color="#999" :icon-name="iconName" />
+              <svg-icon color="#999" :icon-class="iconName" />
             </el-tooltip>
           </li>
         </ul>

src/components/LangSelect/index.vue

@@ -23,8 +23,10 @@ function handleLanguageChange(lang: string) {
     trigger="click"
     @command="handleLanguageChange"
   >
-    <div class="cursor-pointer w-[40px] h-[50px] leading-[50px] text-center">
-      <svg-icon icon-name="language" />
+    <div
+      class="cursor-pointer h-[50px] leading-[50px] text-center px-2.5 hover:bg-gray-50"
+    >
+      <svg-icon icon-class="language" />
     </div>
     <template #dropdown>
       <el-dropdown-menu>

src/components/Screenfull/index.vue

@@ -1,15 +1,14 @@
 <template>
-  <div class="cursor-pointer w-[40px] h-[50px] leading-[50px] text-center">
+  <div
+    class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50"
+  >
     <svg-icon
-      :icon-name="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
+      :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
       @click="toggle"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useFullscreen } from '@vueuse/core';
-import SvgIcon from '@/components/SvgIcon/index.vue';
-
 const { isFullscreen, toggle } = useFullscreen();
 </script>

src/components/SizeSelect/index.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-
 import { useAppStore } from '@/store/modules/app';
-import SvgIcon from '@/components/SvgIcon/index.vue';
 
 const appStore = useAppStore();
 
@@ -20,8 +17,10 @@ function handleSizeChange(size: string) {
 
 <template>
   <el-dropdown trigger="click" @command="handleSizeChange">
-    <div class="cursor-pointerw-[40px] h-[50px] leading-[50px] text-center">
-      <svg-icon icon-name="size" />
+    <div
+      class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50"
+    >
+      <svg-icon icon-class="size" />
     </div>
     <template #dropdown>
       <el-dropdown-menu>

src/components/SvgIcon/index.vue

@@ -14,7 +14,7 @@ const props = defineProps({
     type: String,
     default: 'icon'
   },
-  iconName: {
+  iconClass: {
     type: String,
     required: false
   },
@@ -27,7 +27,7 @@ const props = defineProps({
   }
 });
 
-const symbolId = computed(() => `#${props.prefix}-${props.iconName}`);
+const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
 </script>
 
 <style scoped>