fix(fixednav、tabs): demo icon edit

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

@@ -99,46 +99,37 @@ export default {
         </ul>
     </template>
 <template v-slot:btn>
-    <nut-icon name="retweet" color="#fff">
-    </nut-icon>
+    <Retweet color="#fff" />
     <span class="text">{{ myActive ? 'Open' : 'Close' }}</span>
 </template>
 </nut-fixed-nav>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { ref,reactive } from 'vue';
-export default {
- setup() {
-    const myActive = ref(false);
-    const navList = reactive([
-      {
-        id: 1,
-        text: 'Index',
-        icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
-      },
-      {
-        id: 2,
-        text: 'Category',
-        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
-      },
-      {
-        id: 3,
-        text: 'Cart',
-        num: 2,
-        icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
-      },
-      {
-        id: 4,
-        text: 'My',
-        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
-      }
-    ]);
-    return {
-      myActive,
-      navList
-    };
- }
-}
+const myActive = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: 'Index',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: 'Category',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: 'Cart',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: 'My',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
 </script>
 ```
 :::

src/packages/__VUE/fixednav/doc.md

@@ -99,46 +99,38 @@ export default {
         </ul>
     </template>
 <template v-slot:btn>
-    <nut-icon name="retweet" color="#fff">
-    </nut-icon>
+    <Retweet color="#fff" />
     <span class="text">{{ myActive ? '自定义开' : '自定义关' }}</span>
 </template>
 </nut-fixed-nav>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { ref,reactive } from 'vue';
-export default {
- setup() {
-    const myActive = ref(false);
-    const navList = reactive([
-      {
-        id: 1,
-        text: '首页',
-        icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
-      },
-      {
-        id: 2,
-        text: '分类',
-        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
-      },
-      {
-        id: 3,
-        text: '购物车',
-        num: 2,
-        icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
-      },
-      {
-        id: 4,
-        text: '我的',
-        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
-      }
-    ]);
-    return {
-      myActive,
-      navList
-    };
- }
-}
+import { Retweet } from '@nutui/icons-vue';
+const myActive = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: '首页',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: '分类',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: '购物车',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: '我的',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
 </script>
 ```
 :::

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

@@ -99,46 +99,42 @@ export default {
         </ul>
     </template>
 <template v-slot:btn>
-    <nut-icon name="retweet" color="#fff">
-    </nut-icon>
+    <Retweet color="#fff" />
     <span class="text">{{ myActive ? '自定义开' : '自定义关' }}</span>
 </template>
 </nut-fixed-nav>
 </template>
 <script lang="ts">
 import { ref,reactive } from 'vue';
-export default {
- setup() {
-    const myActive = ref(false);
-    const navList = reactive([
-      {
-        id: 1,
-        text: '首页',
-        icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
-      },
-      {
-        id: 2,
-        text: '分类',
-        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
-      },
-      {
-        id: 3,
-        text: '购物车',
-        num: 2,
-        icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
-      },
-      {
-        id: 4,
-        text: '我的',
-        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
-      }
-    ]);
-    return {
-      myActive,
-      navList
-    };
- }
-}
+import { Retweet } from '@nutui/icons-vue-taro';
+const myActive = ref(false);
+const navList = reactive([
+  {
+    id: 1,
+    text: '首页',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+  },
+  {
+    id: 2,
+    text: '分类',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+  },
+  {
+    id: 3,
+    text: '购物车',
+    num: 2,
+    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+  },
+  {
+    id: 4,
+    text: '我的',
+    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+  }
+]);
+return {
+  myActive,
+  navList
+};
 </script>
 ```
 :::

src/packages/__VUE/tabs/demo.vue

@@ -72,7 +72,7 @@
           :key="item.paneKey"
           v-for="item in state.list6"
         >
-          <nut-icon v-if="item.icon" :name="item.icon" />
+          <Dongdong />
           <span class="nut-tabs__titles-item__text">{{ item.title }}</span>
           <span class="nut-tabs__titles-item__line"></span>
         </div>
@@ -88,7 +88,7 @@
 import { reactive, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('tabs');
-
+import { Dongdong } from '@nutui/icons-vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
   useTranslate({
@@ -121,6 +121,7 @@ const initTranslate = () =>
   });
 export default createDemo({
   props: {},
+  components: { Dongdong },
   setup() {
     initTranslate();
     const state = reactive({

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

@@ -159,7 +159,6 @@ export default {
     });
     setTimeout(() => {
       state.list3.push(999);
-      state.tab3value = '2';
     }, 3000);
     return { state };
   }
@@ -288,7 +287,7 @@ export default {
   <template v-slot:titles>
     <div class="nut-tabs__titles-item" @click="state.tab7value=item.paneKey"
       :class="{active:state.tab7value==item.paneKey}" :key="item.paneKey" v-for="item in state.list6">
-      <nut-icon v-if="item.icon" :name="item.icon" />
+      <Dongdong />
       <span class="nut-tabs__titles-item__text">{{item.title}}</span>
       <span class="nut-tabs__titles-item__line"></span>
     </div>
@@ -300,20 +299,20 @@ export default {
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
+import { Dongdong } from '@nutui/icons-vue';
 export default {
+  components: { Dongdong },
   setup() {
     const state = reactive({
       tab7value: 'c1',
        list6: [
         {
           title: 'custom 1',
-          paneKey: 'c1',
-          icon: 'dongdong'
+          paneKey: 'c1'
         },
         {
           title: 'custom 2',
-          paneKey: 'c2',
-          icon: 'JD'
+          paneKey: 'c2'
         },
         {
           title: 'custom 3',

src/packages/__VUE/tabs/doc.md

@@ -159,7 +159,6 @@ export default {
     });
     setTimeout(() => {
       state.list3.push(999);
-      state.tab3value = '2';
     }, 3000);
     return { state };
   }
@@ -288,7 +287,7 @@ export default {
   <template v-slot:titles>
     <div class="nut-tabs__titles-item" @click="state.tab7value=item.paneKey"
       :class="{active:state.tab7value==item.paneKey}" :key="item.paneKey" v-for="item in state.list6">
-      <nut-icon v-if="item.icon" :name="item.icon" />
+      <Dongdong />
       <span class="nut-tabs__titles-item__text">{{item.title}}</span>
       <span class="nut-tabs__titles-item__line"></span>
     </div>
@@ -300,20 +299,20 @@ export default {
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
+import { Dongdong } from '@nutui/icons-vue';
 export default {
+  components: { Dongdong },
   setup() {
     const state = reactive({
       tab7value: 'c1',
        list6: [
         {
           title: '自定义 1',
-          paneKey: 'c1',
-          icon: 'dongdong'
+          paneKey: 'c1'
         },
         {
           title: '自定义 2',
-          paneKey: 'c2',
-          icon: 'JD'
+          paneKey: 'c2'
         },
         {
           title: '自定义 3',

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

@@ -159,7 +159,6 @@ export default {
     });
     setTimeout(() => {
       state.list3.push(999);
-      state.tab3value = '2';
     }, 3000);
     return { state };
   }
@@ -288,7 +287,7 @@ export default {
   <template v-slot:titles>
     <div class="nut-tabs__titles-item" @click="state.tab7value=item.paneKey"
       :class="{active:state.tab7value==item.paneKey}" :key="item.paneKey" v-for="item in state.list6">
-      <nut-icon v-if="item.icon" :name="item.icon" />
+      <Dongdong />
       <span class="nut-tabs__titles-item__text">{{item.title}}</span>
       <span class="nut-tabs__titles-item__line"></span>
     </div>
@@ -300,20 +299,20 @@ export default {
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
+import { Dongdong } from '@nutui/icons-vue-taro';
 export default {
+  components: { Dongdong },
   setup() {
     const state = reactive({
       tab7value: 'c1',
        list6: [
         {
           title: '自定义 1',
-          paneKey: 'c1',
-          icon: 'dongdong'
+          paneKey: 'c1'
         },
         {
           title: '自定义 2',
-          paneKey: 'c2',
-          icon: 'JD'
+          paneKey: 'c2'
         },
         {
           title: '自定义 3',

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

@@ -72,7 +72,7 @@
           :key="item.paneKey"
           v-for="item in state.list6"
         >
-          <nut-icon v-if="item.icon" :name="item.icon" />
+          <Dongdong />
           <span class="nut-tabs__titles-item__text">{{ item.title }}</span>
           <span class="nut-tabs__titles-item__line"></span>
         </div>
@@ -85,9 +85,11 @@
 </template>
 
 <script lang="ts">
+import { Dongdong } from '@nutui/icons-vue-taro';
 import { reactive } from 'vue';
 export default {
   props: {},
+  components: { Dongdong },
   setup() {
     const state = reactive({
       tab1value: '0',
@@ -120,9 +122,7 @@ export default {
     });
     setTimeout(() => {
       state.list3.push(999);
-      state.tab3value = '2';
     }, 3000);
-
     return { state };
   }
 };