feat(components): [switch] (in)active icon slot

[xing403]

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow contributing guide English | (中文 | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer to relative issues for your PR.

Description

Add custom activeActionIcon and inactiveActionIcon slots to switch component

🤖[deprecated] Generated by Copilot at 83c3e9e

This pull request adds two new slots activeActionIcon and inactiveActionIcon to the switch component, which enable users to customize the icons with any component. It also updates the template and the documentation of the component to use the slots.

Related Issue

Fixes #___.

Explanation of Changes

🤖[deprecated] Generated by Copilot at 83c3e9e

• Add slots for active and inactive icons to switch component (link, link)

tips: 这是 #15013 的重新 fork，不清楚为什么会出现校验不通过 :(

[pull-request-triage]

👋 @xing403, seems like this is your first time contribution to element-plus.

• Please make sure that you have read our guidelines and code of conduct before making a contribution.
• You can comment with /label Components:[component_name] to add a label for which component you are working on.
• You may join our for staying tuned.

[github-actions]

Hello @xing403, thank you for contributing to element-plus, please see our guideline to see how to make contribution

[github-actions]

[github-actions]

🧪 Playground Preview: https://element-plus.run/?pr=15078
Please comment the example via this playground if needed.

[xing403]

I can't think of a better example to demonstrate this functionality in documentation.
This is an example of my test:

<template>
  <div class="play-container">
    <el-switch v-model="value">
      <template #active-action>
        <div>T</div>
      </template>
      <template #inactive-action>
        <div>F</div>
      </template>
    </el-switch>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(true)
</script>

[kooriookami]

I can't think of a better example to demonstrate this functionality in documentation. This is an example of my test:

<template>
  <div class="play-container">
    <el-switch v-model="value">
      <template #active-action>
        <div>T</div>
      </template>
      <template #inactive-action>
        <div>F</div>
      </template>
    </el-switch>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(true)
</script>

Yes, it's a case. Since we design a component, we should consider more details.

[xing403]

Why did the check not successful?

[btea]

@xing403 Could you add a test case?

[xing403]

A test case was added and the documentation was updated