chore(swiper): use icons-vue component (#1937)

* chore(swiper): use icon-vue component

* chore(swiper): update demo in mobile-taro

src/packages/__VUE/swiper/demo.vue

@@ -61,10 +61,10 @@
       </nut-swiper>
       <view class="nut-swiper-btns">
         <span class="nut-swiper-btns__left" @click="handlePrev">
-          <nut-icon name="left"></nut-icon>
+          <Left></Left>
         </span>
         <span class="nut-swiper-btns__left" @click="handleNext">
-          <nut-icon name="right"></nut-icon>
+          <Right></Right>
         </span>
       </view>
     </view>
@@ -115,6 +115,7 @@ import { reactive, toRefs, onMounted, ref, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('swiper');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Left, Right } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -180,7 +181,6 @@ export default createDemo({
     const handleNext = () => {
       swiper.value.next();
     };
-
     onMounted(() => {
       setTimeout(() => {
         state.list1 = state.list.slice();
@@ -196,7 +196,8 @@ export default createDemo({
       handleNext,
       translate
     };
-  }
+  },
+  components: { Left, Right }
 });
 </script>
 

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

@@ -283,7 +283,7 @@ You can manually switch through `api` (`prev`, `next`)
 
 :::demo
 
-```html
+```vue
 <template>
   <view class="demo-box">
     <nut-swiper :init-page="page" :loop="true" ref="swiper">
@@ -293,10 +293,10 @@ You can manually switch through `api` (`prev`, `next`)
     </nut-swiper>
     <view class="nut-swiper-btns">
       <span class="nut-swiper-btns__left" @click="handlePrev">
-        <nut-icon name='left'></nut-icon>
+        <Left></Left>
       </span>
       <span class="nut-swiper-btns__left" @click="handleNext">
-        <nut-icon name='right'></nut-icon>
+        <Right></Right>
       </span>
     </view>
   </view>
@@ -304,6 +304,10 @@ You can manually switch through `api` (`prev`, `next`)
 <script lang="ts">
   import { reactive, toRefs, ref, Ref } from 'vue';
   export default {
+    components: { 
+      Left, 
+      Right 
+    },
     setup() {
       const swiper = ref(null) as Ref;
       const state = reactive({

src/packages/__VUE/swiper/doc.md

@@ -283,7 +283,7 @@ app.use(SwiperItem);
 
 :::demo
 
-```html
+```vue
 <template>
   <view class="demo-box">
     <nut-swiper :init-page="page" :loop="true" ref="swiper">
@@ -293,17 +293,22 @@ app.use(SwiperItem);
     </nut-swiper>
     <view class="nut-swiper-btns">
       <span class="nut-swiper-btns__left" @click="handlePrev">
-        <nut-icon name='left'></nut-icon>
+        <Left></Left>
       </span>
       <span class="nut-swiper-btns__left" @click="handleNext">
-        <nut-icon name='right'></nut-icon>
+        <Right></Right>
       </span>
     </view>
   </view>
 </template>
 <script lang="ts">
   import { reactive, toRefs, ref, Ref } from 'vue';
+  import { Left, Right } from '@nutui/icons-vue';
   export default {
+    components: { 
+      Left, 
+      Right 
+    },
     setup() {
       const swiper = ref(null) as Ref;
       const state = reactive({

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

@@ -63,10 +63,10 @@
       </nut-swiper>
       <view class="nut-swiper-btns">
         <span class="nut-swiper-btns__left" @click="handlePrev">
-          <nut-icon name="left"></nut-icon>
+          <Left></Left>
         </span>
         <span class="nut-swiper-btns__left" @click="handleNext">
-          <nut-icon name="right"></nut-icon>
+          <Right></Right>
         </span>
       </view>
     </view>
@@ -114,6 +114,7 @@
 
 <script lang="ts">
 import { reactive, toRefs, onMounted, ref, Ref } from 'vue';
+import { Left, Right } from '@nutui/icons-vue';
 
 export default {
   props: {},
@@ -166,7 +167,8 @@ export default {
       handlePrev,
       handleNext
     };
-  }
+  },
+  components: { Left, Right }
 };
 </script>