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">
+    <div
-      <svg-icon icon-name="language" />
+      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">
+    <div
-      <svg-icon icon-name="size" />
+      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>

src/layout/components/Navbar.vue

@@ -65,7 +65,7 @@ function logout() {
       </div>
       <!-- 头像 -->
       <el-dropdown trigger="click">
-        <div class="flex justify-center items-center pr-[20px]">
+        <div class="flex justify-center items-center mx-2">
           <img
             :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
             class="w-[40px] h-[40px] rounded-lg"

src/layout/components/Sidebar/SidebarItem.vue

@@ -78,7 +78,7 @@ function resolvePath(routePath: string) {
         >
           <svg-icon
             v-if="onlyOneChild.meta && onlyOneChild.meta.icon"
-            :icon-name="onlyOneChild.meta.icon"
+            :icon-class="onlyOneChild.meta.icon"
           />
           <template #title>
             {{ translateRouteTitleI18n(onlyOneChild.meta.title) }}
@@ -92,7 +92,7 @@ function resolvePath(routePath: string) {
       <template #title>
         <svg-icon
           v-if="item.meta && item.meta.icon"
-          :icon-name="item.meta.icon"
+          :icon-class="item.meta.icon"
         />
         <span v-if="item.meta && item.meta.title">{{
           translateRouteTitleI18n(item.meta.title)

src/layout/components/TagsView/index.vue

@@ -271,27 +271,27 @@ onMounted(() => {
     :style="{ left: left + 'px', top: top + 'px' }"
   >
     <li @click="refreshSelectedTag(selectedTag)">
-      <svg-icon icon-name="refresh" />
+      <svg-icon icon-class="refresh" />
       刷新
     </li>
     <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
-      <svg-icon icon-name="close" />
+      <svg-icon icon-class="close" />
       关闭
     </li>
     <li @click="closeOtherTags">
-      <svg-icon icon-name="close_other" />
+      <svg-icon icon-class="close_other" />
       关闭其它
     </li>
     <li v-if="!isFirstView()" @click="closeLeftTags">
-      <svg-icon icon-name="close_left" />
+      <svg-icon icon-class="close_left" />
       关闭左侧
     </li>
     <li v-if="!isLastView()" @click="closeRightTags">
-      <svg-icon icon-name="close_right" />
+      <svg-icon icon-class="close_right" />
       关闭右侧
     </li>
     <li @click="closeAllTags(selectedTag)">
-      <svg-icon icon-name="close_all" />
+      <svg-icon icon-class="close_all" />
       关闭所有
     </li>
   </ul>

src/views/dashboard/index.vue

@@ -23,7 +23,7 @@ import Team from './components/Team/index.vue';
       <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-user">
-            <svg-icon icon-name="uv" size="4em" />
+            <svg-icon icon-class="uv" size="4em" />
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">访问数</div>
@@ -35,7 +35,7 @@ import Team from './components/Team/index.vue';
       <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-message">
-            <svg-icon icon-name="message" size="4em" />
+            <svg-icon icon-class="message" size="4em" />
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">消息数</div>
@@ -47,7 +47,7 @@ import Team from './components/Team/index.vue';
       <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-money">
-            <svg-icon icon-name="money" size="4em" />
+            <svg-icon icon-class="money" size="4em" />
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">收入金额</div>
@@ -58,7 +58,7 @@ import Team from './components/Team/index.vue';
       <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-shopping">
-            <svg-icon icon-name="shopping" size="4em" />
+            <svg-icon icon-class="shopping" size="4em" />
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">订单数</div>

src/views/login/index.vue

@@ -15,7 +15,7 @@
 
       <el-form-item prop="username">
         <span class="svg-container">
-          <svg-icon icon-name="user" />
+          <svg-icon icon-class="user" />
         </span>
         <el-input
           ref="username"
@@ -35,7 +35,7 @@
       >
         <el-form-item prop="password">
           <span class="svg-container">
-            <svg-icon icon-name="password" />
+            <svg-icon icon-class="password" />
           </span>
           <el-input
             ref="passwordRef"
@@ -52,7 +52,7 @@
           />
           <span class="show-pwd" @click="showPwd">
             <svg-icon
-              :icon-name="passwordType === 'password' ? 'eye' : 'eye-open'"
+              :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
             />
           </span>
         </el-form-item>

src/views/system/dict/index.vue

@@ -29,7 +29,7 @@ const handleDictTypeClick = (row: any) => {
       <el-col :span="10" :xs="24">
         <el-card class="box-card">
           <template #header>
-            <svg-icon icon-name="dict" />
+            <svg-icon icon-class="dict" />
             字典类型
           </template>
           <dict-type @dictClick="handleDictTypeClick" />
@@ -39,7 +39,7 @@ const handleDictTypeClick = (row: any) => {
       <el-col :span="14" :xs="24">
         <el-card class="box-card">
           <template #header>
-            <svg-icon icon-name="dict_item" />
+            <svg-icon icon-class="dict_item" />
             <span style="margin: 0 5px">字典数据项</span>
             <el-tag type="success" v-if="typeCode" size="small">{{
               typeName

src/views/system/menu/index.vue

@@ -40,7 +40,7 @@
         <el-table-column label="菜单名称">
           <template #default="scope">
             <svg-icon
-              :icon-name="
+              :icon-class="
                 scope.row.type === 'BUTTON' ? 'button' : scope.row.icon
               "
             />