fix(components): [tabs] optimize new icon style (#6327)

docs/examples/tabs/basic.vue

@@ -18,7 +18,6 @@ const handleClick = (tab: string, event: Event) => {
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
-  background-color: #f4f5f7;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;

docs/examples/tabs/card-style.vue

@@ -23,7 +23,6 @@ const handleClick = (tab: string, event: Event) => {
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
-  background-color: #f4f5f7;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;

docs/examples/tabs/custom-tab.vue

@@ -2,8 +2,9 @@
   <el-tabs type="border-card" class="demo-tabs">
     <el-tab-pane>
       <template #label>
-        <span>
-          <el-icon><calendar /></el-icon>Route
+        <span class="custom-tabs-label">
+          <el-icon><calendar /></el-icon>
+          <span>Route</span>
         </span>
       </template>
       Route
@@ -20,9 +21,15 @@ import { Calendar } from '@element-plus/icons-vue'
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
-  background-color: #f4f5f7;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;
 }
+.demo-tabs .custom-tabs-label .el-icon {
+  vertical-align: middle;
+}
+.demo-tabs .custom-tabs-label span {
+  vertical-align: middle;
+  margin-left: 4px;
+}
 </style>

docs/examples/tabs/customized-trigger.vue

@@ -69,7 +69,6 @@ const removeTab = (targetName: string) => {
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
-  background-color: #f4f5f7;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;

docs/examples/tabs/dynamic-tabs.vue

@@ -65,7 +65,6 @@ const handleTabsEdit = (targetName: string, action: 'remove' | 'add') => {
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
-  background-color: #f4f5f7;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;

docs/examples/tabs/tab-position.vue

@@ -21,7 +21,6 @@ const tabPosition = ref('left')
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
-  background-color: #f4f5f7;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;

packages/theme-chalk/src/tabs.scss

@@ -21,16 +21,19 @@
     list-style: none;
   }
   @include e(new-tab) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     float: right;
     border: 1px solid #d3dce6;
-    height: 18px;
-    width: 18px;
-    line-height: 18px;
-    margin: 10px;
+    height: 20px;
+    width: 20px;
+    line-height: 20px;
+    margin: 10px 0 10px 10px;
     border-radius: 3px;
     text-align: center;
     font-size: 12px;
-    color: #d3dce6;
+    color: var(--el-text-color-primary);
     cursor: pointer;
     transition: all 0.15s;