chore(sidenavbar): use icons-vue component (#1931)

src/packages/__VUE/sidenavbar/__tests__/index.spec.ts

@@ -3,7 +3,7 @@ import SideNavBar from '../index.vue';
 import SideNavBarItem from '../../sidenavbaritem/index.vue';
 import SubSideNavBar from '../../subsidenavbar/index.vue';
 import { nextTick } from 'vue';
-import NutIcon from '../../icon/index.vue';
+import { ArrowDown2, ArrowUp2 } from '@nutui/icons-vue';
 
 function sleep(delay = 0): Promise<void> {
   return new Promise((resolve) => {
@@ -13,7 +13,8 @@ function sleep(delay = 0): Promise<void> {
 
 beforeAll(() => {
   config.global.components = {
-    NutIcon
+    ArrowDown2,
+    ArrowUp2
   };
 });
 

src/packages/__VUE/sidenavbar/demo.vue

@@ -186,7 +186,4 @@ export default createDemo({
 });
 </script>
 
-<style lang="scss" scoped>
-.demo {
-}
-</style>
+<style lang="scss" scoped></style>

src/packages/__VUE/sidenavbar/index.vue

@@ -8,7 +8,7 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, onMounted, reactive, ref, toRefs, Ref, watch } from 'vue';
+import { computed, onMounted, reactive, ref, toRefs, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('side-navbar');
 export default create({

src/packages/__VUE/subsidenavbar/index.vue

@@ -2,7 +2,10 @@
   <view :class="classes" :ikey="ikey">
     <view class="nut-sub-side-navbar__title" @click.stop="handleClick">
       <span class="nut-sub-side-navbar__title__text">{{ title }}</span>
-      <span class="nut-sub-side-navbar__title__icon"><nut-icon name="down-arrow" :class="direction"></nut-icon></span>
+      <span class="nut-sub-side-navbar__title__icon">
+        <ArrowDown2 v-if="!direction"></ArrowDown2>
+        <ArrowUp2 v-else></ArrowUp2>
+      </span>
     </view>
     <view class="nut-sub-side-navbar__list" :class="!direction ? 'nutFadeIn' : 'nutFadeOut'" :style="style">
       <slot></slot>
@@ -12,6 +15,7 @@
 <script lang="ts">
 import { computed, onMounted, reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { ArrowDown2, ArrowUp2 } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('sub-side-navbar');
 export default create({
   props: {
@@ -28,34 +32,30 @@ export default create({
       default: true
     }
   },
+  components: { ArrowDown2, ArrowUp2 },
   emits: ['title-click'],
   setup: (props: any, context: any) => {
     const state = reactive({
       direction: ''
     });
-
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true
       };
     });
-
     const style = computed(() => {
       return {
         height: !state.direction ? 'auto' : '0px'
       };
     });
-
     const handleClick = () => {
       context.emit('title-click');
       state.direction = !state.direction ? 'up' : '';
     };
-
     onMounted(() => {
       state.direction = props.open ? '' : 'up';
     });
-
     return {
       ...toRefs(state),
       classes,