修复第三方图标大小、垂直居中存在轻微偏移问题,统一其与el-icon一致

Web/src/components/iconSelector/list.vue

@@ -60,7 +60,9 @@ const onColClick = (v: unknown | string) => {
 		border-radius: 5px;
 		margin-bottom: 10px;
 		height: 30px;
+        width: 30px;
 		i {
+            display: inline-flex;
 			font-size: 20px;
 			color: var(--el-text-color-regular);
 		}

Web/src/layout/navBars/tagsView/tagsView.vue

@@ -18,24 +18,24 @@
 					"
 				>
 					<i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont" v-if="isActive(v)"></i>
-					<SvgIcon :name="v.meta.icon" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon" size="14" class="mr5" />
+					<SvgIcon :name="v.meta.icon" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon" :size="14" class="mr5 el-icon" />
 					<span>{{ setTagsViewNameI18n(v) }}</span>
 					<template v-if="isActive(v)">
 						<SvgIcon
 							name="ele-RefreshRight"
-							class="ml5 layout-navbars-tagsview-ul-li-refresh"
+							class="ml5 layout-navbars-tagsview-ul-li-refresh el-icon"
 							@click.stop="refreshCurrentTagsView($route.fullPath)"
 						/>
 						<SvgIcon
 							name="ele-Close"
-							class="layout-navbars-tagsview-ul-li-icon layout-icon-active"
+							class="layout-navbars-tagsview-ul-li-icon layout-icon-active el-icon"
 							v-if="!v.meta.isAffix"
 							@click.stop="closeCurrentTagsView(getThemeConfig.isShareTagsView ? v.path : v.url)"
 						/>
 					</template>
 					<SvgIcon
 						name="ele-Close"
-						class="layout-navbars-tagsview-ul-li-icon layout-icon-three"
+						class="layout-navbars-tagsview-ul-li-icon layout-icon-three el-icon"
 						v-if="!v.meta.isAffix"
 						@click.stop="closeCurrentTagsView(getThemeConfig.isShareTagsView ? v.path : v.url)"
 					/>

Web/src/layout/navMenu/subItem.vue

@@ -2,7 +2,7 @@
 	<template v-for="val in chils">
 		<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
 			<template #title>
-				<SvgIcon :name="val.meta.icon" style="font-size: 16px" />
+				<SvgIcon :name="val.meta.icon" class="el-icon" />
 				<span>{{ $t(val.meta.title) }}</span>
 			</template>
 			<sub-item :chil="val.children" />
@@ -10,12 +10,12 @@
 		<template v-else>
 			<el-menu-item :index="val.path" :key="val.path">
 				<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-					<SvgIcon :name="val.meta.icon" style="font-size: 16px" />
+					<SvgIcon :name="val.meta.icon" class="el-icon" />
 					<span>{{ $t(val.meta.title) }}</span>
 				</template>
 				<template v-else>
 					<a class="w100" @click.prevent="onALinkClick(val)">
-						<SvgIcon :name="val.meta.icon" style="font-size: 16px" />
+						<SvgIcon :name="val.meta.icon" class="el-icon" />
 						{{ $t(val.meta.title) }}
 					</a>
 				</template>

Web/src/layout/navMenu/vertical.vue

@@ -10,14 +10,14 @@
 		<template v-for="val in menuLists">
 			<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 				<template #title>
-					<SvgIcon :name="val.meta.icon" />
+					<SvgIcon :name="val.meta.icon" class="el-icon" />
 					<span>{{ $t(val.meta.title) }}</span>
 				</template>
 				<SubItem :chil="val.children" />
 			</el-sub-menu>
 			<template v-else>
 				<el-menu-item :index="val.path" :key="val.path">
-					<SvgIcon :name="val.meta.icon" />
+					<SvgIcon :name="val.meta.icon" class="el-icon" />
 					<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 						<span>{{ $t(val.meta.title) }}</span>
 					</template>

Web/src/theme/element.scss

@@ -10,21 +10,13 @@
         font-size: var(--el-font-size-medium);
     }
 }
-// 第三方字体图标大小
-// .el-button:not(.is-circle) i.el-icon,
-// .el-button i.iconfont,
-// .el-button i.fa,
-// .el-button--default i.iconfont,
-// .el-button--default i.fa {
-// 	font-size: 14px !important;
-// 	margin-right: 5px;
-// }
 
-// .el-button--small i.iconfont,
-// .el-button--small i.fa {
-// 	font-size: 12px !important;
-// 	margin-right: 5px;
-// }
+// 按钮使用第三方字体图标正确用法
+// <el-button>
+//     <SvgIcon name="iconfont icon-yunshangchuan_o" class="el-icon" />
+//     <span>笑笑</span>
+// </el-button>
+
 
 /* Input 输入框、InputNumber 计数器
 ------------------------------- */
@@ -116,7 +108,6 @@
 
     .el-icon {
         font-size: var(--el-font-size-medium);
-        margin-top: -1px; //由于svg图标源未按标准设计制作,存在错位误差,向上位移1px,以抵消其存在的1px高度差
     }
 
     .el-sub-menu__icon-arrow {
@@ -128,9 +119,8 @@
 .el-menu-item,
 .el-sub-menu__title {
 	color: var(--next-bg-menuBarColor);
-	height: 45px !important;
-	line-height: 45px !important;
-	// margin: 0 0 1px 0;
+	height: 44px !important;
+	line-height: 44px !important;
 }
 
 // 修复点击左侧菜单折叠再展开时，宽度不跟随问题
@@ -152,7 +142,7 @@
 .el-sub-menu .iconfont,
 .el-menu-item .fa,
 .el-sub-menu .fa {
-	@include generalIcon;
+	@include generalIcon(var(--el-font-size-medium), var(--el-menu-icon-width));
 }
 
 // 水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色
@@ -460,11 +450,13 @@
     .el-button [class*=el-icon]+span{
         margin-left: 4px;
     }
+
+    .iconfont {
+        font-size: unset !important;
+    }
 }
 .el-table [class*=el-table__row--level] .el-table__expand-icon {
-    height: 14px;
-    line-height: 14px;
-    width: 14px;
+    vertical-align: middle;
 }
 
 $--el-table-text-color: #fb6d49;
@@ -519,11 +511,6 @@ $--el-table-text-color: #fb6d49;
 	max-height: 274px !important;
 }
 
-/*修复Cascader 级联选择器高度问题 -- Tips: 官方已修复该问题 */
-// .el-cascader-menu__wrap.el-scrollbar__wrap {
-// 	height: 204px !important;
-// }
-
 /*用于界面高度自适应（main.vue），区分 scrollbar__view，防止其它使用 scrollbar 的地方出现滚动条消失*/
 .layout-container-view .el-scrollbar__view {
 	height: 100%;
@@ -557,25 +544,6 @@ $--el-table-text-color: #fb6d49;
 	color: var(--el-color-danger) !important;
 }
 
-// 级联选择-点击文本也生效 -- Tips: 官方已支持,设置 el-cascader 的 checkOnClickNode=true 即可
-// .el-cascader-panel .el-radio {
-// 	width: 100%;
-// 	height: 100%;
-// 	z-index: 10;
-// 	position: absolute;
-// 	top: 0px;
-// 	right: -8px;
-// }
-
-// .el-cascader-panel .el-checkbox {
-// 	width: 100%;
-// 	height: 100%;
-// 	z-index: 10;
-// 	position: absolute;
-// 	top: 0px;
-// 	right: 0px;
-// }
-
 .el-tree {
     --el-tree-node-content-height: 30px;
 

Web/src/theme/iconfont/font_2298093_rnp72ifj3ba.scss

@@ -6,7 +6,7 @@
 
 .iconfont {
 	font-family: 'iconfont' !important;
-	font-size: 16px;
+	font-size: inherit;
 	font-style: normal;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;

Web/src/theme/mixins/index.scss

@@ -1,11 +1,10 @@
 /* 第三方图标字体间距/大小设置
 ------------------------------- */
-@mixin generalIcon {
-	font-size: 14px !important;
-	display: inline-block;
+@mixin generalIcon($fontSize: 16px, $width: 16px) {
+	font-size: $fontSize; 
 	vertical-align: middle;
 	margin-right: 5px;
-	width: 24px;
+	width: $width;
 	text-align: center;
 	justify-content: center;
 }

Web/src/views/system/menu/index.vue

@@ -34,9 +34,9 @@
 				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border>
 				<el-table-column label="菜单名称" header-align="center">
 					<template #default="scope">
-                        <div style="display: inline-block;">
-                            <SvgIcon :name="scope.row.icon" size="12" />
-                            <span class="ml10">{{ $t(scope.row.title) }}</span>
+                        <div class="menu-icon-box">
+                            <span class="vertical-center"><SvgIcon :name="scope.row.icon" class="el-icon" /></span>
+                            <span class="ml10 vertical-center">{{ $t(scope.row.title) }}</span>
                         </div>
 					</template>
 				</el-table-column>
@@ -192,4 +192,16 @@ const changeStatus = async (row: any) => {
     display: inline-flex;
     align-items: center;
 }
+.menu-icon-box {
+    display: inline-block;
+
+    .vertical-center { 
+        display: inline-flex;
+        align-items: center;
+        vertical-align: middle;
+        line-height: 1em;
+        height: 1em;
+    }
+    //.el-icon { vertical-align: middle; }
+}
 </style>