chore(pagination): use icons-vue component

src/packages/__VUE/pagination/demo.vue

@@ -9,10 +9,10 @@
     <h2>{{ translate('customButton') }}</h2>
     <nut-pagination v-model="currentPage3" :total-items="500" :show-page-size="5" @change="pageChange">
       <template #prev-text>
-        <nut-icon name="left" size="10px" />
+        <Left width="10px" height="10px" />
       </template>
       <template #next-text>
-        <nut-icon name="right" size="10px" />
+        <Right width="10px" height="10px" />
       </template>
       <template #page="{ item }">
         {{ item.number == 3 ? 'hot' : item.text }}
@@ -26,6 +26,7 @@ import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('pagination');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Left, Right } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -42,6 +43,7 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: { Left, Right },
   setup() {
     initTranslate();
     const state = reactive({

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

@@ -117,10 +117,10 @@ Custom pagination button content with pre-text slot、next-text slot and so on.
 <template>
   <nut-pagination v-model="currentPage3" :total-items="500"  @change="pageChange"  :show-page-size="5">
       <template #prev-text>
-          <nut-icon name="left" size="10px" />
+        <Left width="10px" height="10px" />
       </template>
       <template #next-text>
-          <nut-icon name="right" size="10px" />
+        <Right width="10px" height="10px" />
       </template>
       <template #page="{ item }">
           {{ item.number == 3 ? 'hot' : item.text }}
@@ -128,8 +128,10 @@ Custom pagination button content with pre-text slot、next-text slot and so on.
   </nut-pagination>
 </template>
 <script lang="ts">
+import { Left, Right } from '@nutui/icons-vue-taro';
 import { ref, reactive, toRefs } from 'vue';
 export default {
+  components: { Left, Right },
   setup() {
     const state = reactive({
       currentPage3: 1,

src/packages/__VUE/pagination/doc.md

@@ -117,10 +117,10 @@ export default {
 <template>
   <nut-pagination v-model="currentPage3" :total-items="500"  @change="pageChange"  :show-page-size="5">
       <template #prev-text>
-          <nut-icon name="left" size="10px" />
+        <Left width="10px" height="10px" />
       </template>
       <template #next-text>
-          <nut-icon name="right" size="10px" />
+        <Right width="10px" height="10px" />
       </template>
       <template #page="{ item }">
           {{ item.number == 3 ? 'hot' : item.text }}
@@ -128,8 +128,10 @@ export default {
   </nut-pagination>
 </template>
 <script lang="ts">
+import { Left, Right } from '@nutui/icons-vue';
 import { ref, reactive, toRefs } from 'vue';
 export default {
+  components: { Left, Right },
   setup() {
     const state = reactive({
       currentPage3: 1,

src/sites/mobile-taro/vue/src/nav/pages/pagination/index.vue

@@ -9,10 +9,10 @@
     <h2>自定义按钮</h2>
     <nut-pagination v-model="currentPage3" :total-items="500" :show-page-size="5" @change="pageChange">
       <template #prev-text>
-        <nut-icon name="left" size="10px" />
+        <Left width="10px" height="10px" />
       </template>
       <template #next-text>
-        <nut-icon name="right" size="10px" />
+        <Right width="10px" height="10px" />
       </template>
       <template #page="{ item }">
         {{ item.number == 3 ? 'hot' : item.text }}
@@ -22,8 +22,10 @@
 </template>
 
 <script lang="ts">
-import { ref, reactive, toRefs, defineComponent } from 'vue';
+import { Left, Right } from '@nutui/icons-vue-taro';
+import { reactive, toRefs, defineComponent } from 'vue';
 export default defineComponent({
+  components: { Left, Right },
   setup() {
     const state = reactive({
       currentPage: 1,