chore(switch): use icons-vue component

src/packages/__VUE/skeleton/demo.vue

@@ -25,7 +25,7 @@
     <h2>{{ translate('title4') }}</h2>
 
     <view class="content">
-      <nut-switch v-model="checked" size="15px" />
+      <nut-switch v-model="checked" />
 
       <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
         <view class="container">

src/packages/__VUE/skeleton/doc.en-US.md

@@ -90,7 +90,7 @@ app.use(Skeleton);
 ```html
 <template>
   <div class="content">
-    <nut-switch v-model="checked" size="15px" />
+    <nut-switch v-model="checked" />
     <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
       <div class="container">
         <nut-avatar size="50">

src/packages/__VUE/skeleton/doc.md

@@ -91,7 +91,7 @@ app.use(Skeleton);
 ```html
 <template>
   <div class="content">
-    <nut-switch v-model="checked" size="15px" />
+    <nut-switch v-model="checked" />
     <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
       <div class="container">
         <nut-avatar size="50">

src/packages/__VUE/skeleton/doc.taro.md

@@ -91,7 +91,7 @@ app.use(Skeleton);
 ```html
 <template>
   <div class="content">
-    <nut-switch v-model="checked" size="15px" />
+    <nut-switch v-model="checked" />
     <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
       <div class="container">
         <nut-avatar size="50">

src/packages/__VUE/switch/__tests__/switch.spec.ts

@@ -1,12 +1,8 @@
 import { mount, config } from '@vue/test-utils';
 import Switch from '../index.vue';
 
-import NutIcon from '../../icon/index.vue';
-
 beforeAll(() => {
-  config.global.components = {
-    NutIcon
-  };
+  config.global.components = {};
 });
 
 afterAll(() => {
@@ -46,19 +42,6 @@ test('prop loading test', () => {
   expect(wrapper.find('.nut-icon-loading1')).toBeTruthy();
 });
 
-test('prop  color and size on loading mode', () => {
-  const wrapper = mount(Switch, {
-    props: {
-      loading: true,
-      color: 'blue',
-      size: '16px'
-    }
-  });
-  const style = wrapper.find('.nut-switch-button').findAll('i')[0].element.style;
-  expect(style.color).toEqual('blue');
-  expect(style.fontSize).toEqual('16px');
-});
-
 test('prop activeText test', () => {
   const wrapper = mount(Switch, {
     props: {

src/packages/__VUE/switch/demo.vue

@@ -50,12 +50,20 @@
         class="switch-demo1"
       />
     </nut-cell>
+
+    <h2>{{ translate('title8') }}</h2>
+    <nut-cell>
+      <nut-switch v-model="checked" @change="change" loading>
+        <template #icon><Loading /></template>
+      </nut-switch>
+    </nut-cell>
   </div>
 </template>
 
 <script lang="ts">
 import { ref, getCurrentInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { Loading } from '@nutui/icons-vue';
 const { createDemo, translate } = createComponent('switch');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
@@ -69,6 +77,7 @@ const initTranslate = () =>
       title5: '异步控制',
       title6: '自定义颜色',
       title7: '支持文字',
+      title8: '自定义加载图标',
       text1: '开',
       text2: '关'
     },
@@ -81,11 +90,13 @@ const initTranslate = () =>
       title5: 'Async Control',
       title6: 'Custom Color',
       title7: 'Support Text',
+      title8: 'Custom loading icon',
       text1: 'Open',
       text2: 'Closed'
     }
   });
 export default createDemo({
+  components: { Loading },
   setup() {
     initTranslate();
     let { proxy } = getCurrentInstance() as any;

src/packages/__VUE/switch/doc.en-US.md

@@ -56,7 +56,7 @@ app.use(Switch);
 :::demo
 ``` html
 <template>
-  <nut-switch v-model="checked" loading color="red" />
+  <nut-switch v-model="checked" loading />
 </template>
 <script lang="ts">
   import { ref } from 'vue';
@@ -166,9 +166,6 @@ app.use(Switch);
 | v-model        | Status of Switch       | Boolean ｜ String ｜ Number | `false`  |
 | disable        | Disable status         | Boolean | `false`               |
 | loading        | Loading status         | Boolean | `false`               |
-| name           | [Name of icon](#/en-US/component/icon) | String | `loading`               |
-| color          | [Color of icon](#/en-US/component/icon)，only takes effect in `loading` state | String | -     |
-| size           | [Size of icon](#/en-US/component/icon)，only takes effect in `loading` state  | String ｜ Number | `12px`   |
 | active-color   | Background color when active | String  | `#fa2c19`    |
 | inactive-color | Background color when inactive | String  | `#ebebeb` | 
 | active-text    | Word description when active   | String  | -         |
@@ -176,6 +173,11 @@ app.use(Switch);
 | active-value   | Value when active   | Boolean ｜ String ｜ Number  | `true`  |
 | inactive-value | Value when inactive   | Boolean ｜ String ｜ Number  | `false`  |
 
+### Slots
+
+|Name|Description|
+|-|-|
+|icon| loading icon slot |
 
 ### Events
 

src/packages/__VUE/switch/doc.md

@@ -56,7 +56,7 @@ app.use(Switch);
 :::demo
 ``` html
 <template>
-  <nut-switch v-model="checked" loading color="red" />
+  <nut-switch v-model="checked" loading />
 </template>
 <script lang="ts">
   import { ref } from 'vue';
@@ -166,9 +166,6 @@ app.use(Switch);
 | v-model        | 开关状态         | Boolean ｜ String ｜ Number | `false`               |
 | disable        | 禁用状态         | Boolean | `false`               |
 | loading        | 加载状态         | Boolean | `false`               |
-| name        | [图标名称](#/zh-CN/component/icon)         | String | `loading`               |
-| color        | [图标颜色](#/zh-CN/component/icon)，仅在`loading`状态下生效          | String | -               |
-| size        | [图标尺寸](#/zh-CN/component/icon)，仅在`loading`状态下生效          | String ｜ Number | `12px`               |
 | active-color   | 打开时的背景颜色 | String  | `#fa2c19`    |
 | inactive-color | 关闭时的背景颜色 | String  | `#ebebeb` |
 | active-text    | 打开时文字描述   | String  | -                     |
@@ -176,6 +173,11 @@ app.use(Switch);
 | active-value  | 打开时组件的值   | Boolean ｜ String ｜ Number  | `true`  |
 | inactive-value  | 关闭组件的值   | Boolean ｜ String ｜ Number  | `false`  |
 
+### Slots
+
+|名称|描述|
+|-|-|
+|icon|loading 状态图标|
 
 ### Events
 

src/packages/__VUE/switch/doc.taro.md

@@ -56,7 +56,7 @@ app.use(Switch);
 :::demo
 ``` html
 <template>
-  <nut-switch v-model="checked" loading color="red" />
+  <nut-switch v-model="checked" loading />
 </template>
 <script lang="ts">
   import { ref } from 'vue';
@@ -166,9 +166,6 @@ app.use(Switch);
 | v-model        | 开关状态         | Boolean ｜ String ｜ Number | `false`               |
 | disable        | 禁用状态         | Boolean | `false`               |
 | loading        | 加载状态         | Boolean | `false`               |
-| name        | [图标名称](#/zh-CN/component/icon)         | String | `loading`               |
-| color        | [图标颜色](#/zh-CN/component/icon)，仅在`loading`状态下生效          | String | -               |
-| size        | [图标尺寸](#/zh-CN/component/icon)，仅在`loading`状态下生效          | String ｜ Number | `12px`               |
 | active-color   | 打开时的背景颜色 | String  | `#fa2c19`    |
 | inactive-color | 关闭时的背景颜色 | String  | `#ebebeb` |
 | active-text    | 打开时文字描述   | String  | -                     |
@@ -176,6 +173,11 @@ app.use(Switch);
 | active-value  | 打开时组件的值   | Boolean ｜ String ｜ Number  | `true`  |
 | inactive-value  | 关闭组件的值   | Boolean ｜ String ｜ Number  | `false`  |
 
+### Slots
+
+|名称|描述|
+|-|-|
+|icon|loading 状态图标|
 
 ### Events
 

src/packages/__VUE/switch/index.taro.vue

@@ -1,7 +1,9 @@
 <template>
   <view :class="classes" @click="onClick" :style="style">
     <view class="nut-switch-button">
-      <nut-icon v-if="loading" v-bind="$attrs" :name="name" :size="size" :color="color"></nut-icon>
+      <slot name="icon" v-if="loading">
+        <Loading1 />
+      </slot>
       <template v-if="activeText">
         <view class="nut-switch-label open" v-show="modelValue">{{ activeText }}</view>
         <view class="nut-switch-label close" v-show="!modelValue">{{ inactiveText }}</view>
@@ -13,9 +15,11 @@
 <script lang="ts">
 import { computed, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { Loading1 } from '@nutui/icons-vue-taro';
 const { componentName, create } = createComponent('switch');
 
 export default create({
+  components: { Loading1 },
   props: {
     modelValue: {
       type: [String, Number, Boolean],
@@ -52,18 +56,6 @@ export default create({
     loading: {
       type: Boolean,
       default: false
-    },
-    name: {
-      type: String,
-      default: 'loading1'
-    },
-    size: {
-      type: [String, Number],
-      default: '12px'
-    },
-    color: {
-      type: String,
-      default: ''
     }
   },
   emits: ['change', 'update:modelValue', 'update:loading'],

src/packages/__VUE/switch/index.vue

@@ -1,7 +1,9 @@
 <template>
   <view :class="classes" @click="onClick" :style="style">
     <view class="nut-switch-button">
-      <nut-icon v-if="loading" :name="name" v-bind="$attrs" :size="size" :color="color"></nut-icon>
+      <slot name="icon" v-if="loading">
+        <Loading1 />
+      </slot>
       <template v-if="activeText">
         <view class="nut-switch-label open" v-show="modelValue">{{ activeText }}</view>
         <view class="nut-switch-label close" v-show="!modelValue">{{ inactiveText }}</view>
@@ -13,9 +15,11 @@
 <script lang="ts">
 import { computed, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { Loading1 } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('switch');
 
 export default create({
+  components: { Loading1 },
   props: {
     modelValue: {
       type: [String, Number, Boolean],
@@ -52,18 +56,6 @@ export default create({
     loading: {
       type: Boolean,
       default: false
-    },
-    name: {
-      type: String,
-      default: 'loading1'
-    },
-    size: {
-      type: [String, Number],
-      default: '12px'
-    },
-    color: {
-      type: String,
-      default: ''
     }
   },
   emits: ['change', 'update:modelValue', 'update:loading'],

src/sites/mobile-taro/vue/src/exhibition/pages/skeleton/index.vue

@@ -21,7 +21,7 @@
 
     <h2>显示子组件</h2>
     <view class="content">
-      <nut-switch v-model="checked" size="15px" />
+      <nut-switch v-model="checked" />
       <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
         <view class="container">
           <nut-avatar size="50">

src/sites/mobile-taro/vue/src/feedback/pages/switch/index.vue

@@ -12,7 +12,7 @@
 
     <h2>加载状态</h2>
     <nut-cell>
-      <nut-switch v-model="checked" loading color="red" />
+      <nut-switch v-model="checked" loading />
     </nut-cell>
 
     <h2>change事件</h2>
@@ -34,12 +34,19 @@
     <nut-cell>
       <nut-switch v-model="checked" @change="switchChange" active-text="开" inactive-text="关" />
     </nut-cell>
+
+    <h2>自定义加载图标</h2>
+    <nut-cell>
+      <nut-switch v-model="checked" @change="switchChange"><Loading /></nut-switch>
+    </nut-cell>
   </div>
 </template>
 
 <script lang="ts">
 import { ref, getCurrentInstance } from 'vue';
+import { Loading } from '@nutui/icons-vue-taro';
 export default {
+  components: { Loading },
   setup() {
     let { proxy } = getCurrentInstance() as any;
     const checked = ref(true);