fix(components): [tabs] slot name use kebab-case style (#15733)

* fix(components): [tabs] slot name use kebab-case style

* fix(components): [tabs] slot name use kebab-case style

* fix(components): [tabs] slot name use kebab-case style

* docs(components): [tabs] use deprecated tag

docs/en-US/component/tabs.md

@@ -108,10 +108,11 @@ tabs/customized-trigger
 
 ## Tabs Slots
 
-| Name             | Description               | Subtags  |
-| ---------------- | ------------------------- | -------- |
-| -                | customize default content | Tab-pane |
-| addIcon ^(2.4.0) | customize add button icon | -        |
+| Name                           | Description               | Subtags  |
+| ------------------------------ | ------------------------- | -------- |
+| -                              | customize default content | Tab-pane |
+| addIcon ^(2.4.0) ^(deprecated) | customize add button icon | -        |
+| add-icon ^(2.5.4)              | customize add button icon | -        |
 
 ## Tab-pane Attributes
 

docs/examples/tabs/customized-add-button-icon.vue

@@ -7,7 +7,7 @@ addIcon
     editable
     @edit="handleTabsEdit"
   >
-    <template #addIcon>
+    <template #add-icon>
       <el-icon><Select /></el-icon>
     </template>
     <el-tab-pane

packages/components/tabs/src/tabs.tsx

@@ -151,6 +151,18 @@ const Tabs = defineComponent({
       computed(() => !!props.activeName)
     )
 
+    useDeprecated(
+      {
+        from: '"addIcon"',
+        replacement: '"add-icon"',
+        scope: 'ElTabs',
+        version: '2.6.0',
+        ref: 'https://element-plus.org/en-US/component/tabs.html#slots',
+        type: 'Slot',
+      },
+      computed(() => !!slots.addIcon)
+    )
+
     watch(
       () => props.activeName,
       (modelValue) => setCurrentName(modelValue)
@@ -178,7 +190,8 @@ const Tabs = defineComponent({
     })
 
     return () => {
-      const addSlot = slots.addIcon
+      const addSlot = slots['add-icon'] || slots['addIcon']
+      const isCamelCase = addSlot && slots['addIcon']
       const newButton =
         props.editable || props.addable ? (
           <span
@@ -190,7 +203,7 @@ const Tabs = defineComponent({
             }}
           >
             {addSlot ? (
-              renderSlot(slots, 'addIcon')
+              renderSlot(slots, isCamelCase ? 'addIcon' : 'add-icon')
             ) : (
               <ElIcon class={ns.is('icon-plus')}>
                 <Plus />