Merge branch 'v4' of https://github.com/jdf2e/nutui into v4

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

@@ -17,7 +17,7 @@
             :key="index"
             @click="chooseItem(item, index)"
           >
-            <IconFont v-if="item.loading" name="loading"></IconFont>
+            <Loading v-if="item.loading"></Loading>
             <view v-else> {{ item[optionTag] }}</view>
             <view class="nut-action-sheet__subdesc">{{ item[optionSubTag] }}</view>
           </view>
@@ -36,7 +36,7 @@ import type { PropType } from 'vue';
 const { componentName, create } = createComponent('action-sheet');
 import Popup from '../popup/index.taro.vue';
 import { popupProps } from '../popup/props';
-import { IconFont } from '@nutui/icons-vue';
+import { Loading } from '@nutui/icons-vue-taro';
 export interface menuItems {
   disable: boolean;
   loading: boolean;
@@ -48,7 +48,7 @@ export interface menuItems {
 export default create({
   components: {
     [Popup.name]: Popup,
-    IconFont
+    Loading
   },
   props: {
     ...popupProps,

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

@@ -22,7 +22,7 @@ import { reactive, computed, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import NutScrollView from '../scrollView/index.taro.vue';
 const { componentName, create } = createComponent('backtop');
-import { Top } from '@nutui/icons-vue';
+import { Top } from '@nutui/icons-vue-taro';
 export default create({
   components: {
     NutScrollView,

src/packages/__VUE/cell/demo.vue

@@ -55,7 +55,7 @@
     </nut-cell-group>
 
     <h2>{{ translate('displayIcon') }}</h2>
-    <nut-cell :title="translate('name')" icon="my" :desc="translate('desc')" isLink> </nut-cell>
+    <nut-cell :title="translate('name')" :desc="translate('desc')" isLink> </nut-cell>
     <h2>{{ translate('title6') }}</h2>
     <nut-cell desc-text-align="left" :desc="translate('desc')"></nut-cell>
 

src/packages/__VUE/cell/doc.md

@@ -163,7 +163,7 @@ app.use(CellGroup);
 
 ```html
 <template>
-  <nut-cell title="姓名" icon="my" desc="张三"></nut-cell>
+  <nut-cell title="姓名" desc="张三"></nut-cell>
 </template>
 ```
 

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

@@ -5,7 +5,7 @@ import { computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 const { componentName, create } = createComponent('cell');
-import { Right } from '@nutui/icons-vue';
+import { Right } from '@nutui/icons-vue-taro';
 export default create({
   components: { Right },
   props: {

src/packages/__VUE/collapse/demo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo full">
     <h2>{{ translate('basic1') }}</h2>
-    <nut-collapse v-model:active="active1" icon="down-arrow" @change="change">
+    <nut-collapse v-model:active="active1" @change="change">
       <nut-collapse-item :name="1">
         <template v-slot:mTitle>
           {{ translate('title1') }}
@@ -13,17 +13,17 @@
       </nut-collapse-item>
       <nut-collapse-item :title="translate('title3')" :name="3" disabled> </nut-collapse-item>
     </nut-collapse>
-    <h2>{{ translate('basic2') }}</h2>
+    <!-- <h2>{{ translate('basic2') }}</h2>
     <nut-collapse v-model:active="active4" :accordion="true" @change="change">
       <nut-collapse-item :title="translate('title1')" :name="1">
         {{ translate('desc3') }}
       </nut-collapse-item>
       <nut-collapse-item :title="translate('title2')" :name="2"> {{ translate('desc4') }} </nut-collapse-item>
-    </nut-collapse>
+    </nut-collapse> -->
     <h2>{{ translate('basic3') }}</h2>
-    <nut-collapse v-model:active="active2" :accordion="true" icon="down-arrow">
+    <nut-collapse v-model:active="active2" :accordion="true">
       <nut-collapse-item :title="translate('title1')" :name="1"> {{ translate('desc5') }} </nut-collapse-item>
-      <nut-collapse-item :title="translate('title2')" :name="2" :sub-title="translate('subtitle')">
+      <nut-collapse-item :title="translate('title2')" :name="2" :value="translate('subtitle')">
         {{ translate('desc6') }}
       </nut-collapse-item>
       <nut-collapse-item :title="translate('title3')" :name="3">
@@ -31,32 +31,26 @@
       </nut-collapse-item>
     </nut-collapse>
     <h2>{{ translate('basic4') }}</h2>
-    <nut-collapse v-model:active="active3" :accordion="true" icon="arrow-right2" rotate="90">
-      <nut-collapse-item :title="translate('title1')" :name="1">
-        <template v-slot:sTitle> {{ translate('title4') }} </template>
+    <nut-collapse v-model:active="active3" :accordion="true">
+      <nut-collapse-item :title="translate('title1')" :name="1" :icon="Notice">
+        <template v-slot:value> {{ translate('title4') }} </template>
         {{ translate('desc8') }}
       </nut-collapse-item>
-      <nut-collapse-item :title="translate('title2')" :name="2" :sub-title="translate('title6')">
+      <nut-collapse-item :title="translate('title2')" :name="2" :value="translate('title6')" :icon="Follow">
         {{ translate('desc9') }}
       </nut-collapse-item>
     </nut-collapse>
-    <h2>{{ translate('basic5') }}</h2>
-    <nut-collapse
-      v-model:active="active5"
-      title-icon="issue"
-      title-icon-color="red"
-      title-icon-size="20px"
-      title-icon-position="right"
-      icon="down-arrow"
-      :accordion="true"
-    >
-      <nut-collapse-item :title="translate('title1')" :name="1"> {{ translate('desc10') }} </nut-collapse-item>
+    <!-- <h2>{{ translate('basic5') }}</h2>
+    <nut-collapse v-model:active="active5" :accordion="true">
+      <nut-collapse-item :title="translate('title1')" :name="1" :icon="Comment">
+        {{ translate('desc10') }}
+      </nut-collapse-item>
       <nut-collapse-item :title="translate('title2')" :name="2" :sub-title="translate('title6')">
         {{ translate('desc11') }}
       </nut-collapse-item>
-    </nut-collapse>
+    </nut-collapse> -->
     <h2>{{ translate('basic6') }}</h2>
-    <nut-collapse v-model:active="active6" icon="down-arrow" :accordion="true">
+    <nut-collapse v-model:active="active6" :accordion="true">
       <nut-collapse-item :title="translate('title1')" :name="1">
         <template v-slot:extraRender>{{ translate('title5') }}</template>
         {{ translate('desc1') }}
@@ -68,7 +62,8 @@
   </div>
 </template>
 <script lang="ts">
-import { onMounted, reactive, ref, toRefs } from 'vue';
+import { reactive, toRefs } from 'vue';
+import { Notice, Follow } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('collapse');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -147,6 +142,8 @@ export default createDemo({
       console.log(`点击了name是${name}的面板`);
     };
     return {
+      Notice,
+      Follow,
       translate,
       change,
       ...toRefs(data)

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

@@ -29,7 +29,7 @@ Control the expanded panel list through 'V-model', and 'activenames' is in array
 
 ```html
 <template>
-<nut-collapse v-model:active="activeNames" icon="down-arrow">
+<nut-collapse v-model:active="activeNames">
   <nut-collapse-item :name="1">
     <template v-slot:mTitle>
       {{title1}}
@@ -62,51 +62,18 @@ export default {
 
 ```
 :::
-### No icon style
-:::demo
-
-```html
-<template>
-  <nut-collapse v-model:active="activeName" :accordion="true">
-    <nut-collapse-item :title="title1" :name="1">
-      Introduce new features of vue3, such as composition API, teleport, emits, etc
-    </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2">
-      Full use of typescipt
-    </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script>
-import { reactive, ref, toRefs } from 'vue';
-export default {
-  setup() {
-    const activeName = ref(1);
-    const title = reactive({
-      title1: 'title1',
-      title2: 'title2',
-      title3: 'title3',
-    })
-    return {
-      activeName,
-      ...toRefs(title)
-    };
-  }
-}
-</script>
-```
-:::
 ### accordion
 
-You can set accordion mode through 'accordion', and expand up to one panel. At this time, 'activename' is in string format` Subtitle ` you can set the content of a subtitle
+You can set accordion mode through 'accordion', and expand up to one panel. At this time, 'activename' is in string format` value ` you can set the content of a subtitle
 
 :::demo
 ```html
 <template>
-  <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
-    <nut-collapse-item :title="title1" :name="1">
+  <nut-collapse v-model:active="activeName" :accordion="true">
+    <nut-collapse-item :title="title1" :name="1" :value="subTitle">
       Build scenes based on JD design language system
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
+    <nut-collapse-item :title="title2" :name="2">
       Improve the modularity and generality of the boundary
     </nut-collapse-item>
     <nut-collapse-item :title="title3" :name="3">
@@ -147,22 +114,21 @@ Set custom icons through icon and rotate to set the rotation angle of icons
   <nut-collapse
     v-model:active="activeName"
     :accordion="true"
-    icon="arrow-right2"
-    rotate="90"
   >
-    <nut-collapse-item :title="title1" :name="1">
+    <nut-collapse-item :title="title1" :name="1" :icon="Notice">
       <template v-slot:sTitle>
         text test
       </template>
       NUTUI3. 0 rethink its internal consistency and composability
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2" sub-title="text content">
+    <nut-collapse-item :title="title2" :name="2" :icon="Follow">
       Improve the efficiency of production research output docking and reduce the output workload
     </nut-collapse-item>
   </nut-collapse>
 </template>
 <script>
 import { reactive, ref, toRefs } from 'vue';
+import { Notice, Follow } from '@nutui/icons-vue';
 export default {
   setup() {
     const activeName = ref(1);
@@ -172,7 +138,9 @@ export default {
     })
     return {
       activeName,
-      ...toRefs(title)
+      ...toRefs(title),
+      Notice,
+      Follow
     };
   }
 }
@@ -180,55 +148,15 @@ export default {
 ```
 :::
 
-### Custom title Icon
-
-Set custom icons through icon and rotate to set the rotation angle of icons
-:::demo
-
-```html
-<template>
-  <nut-collapse
-    v-model:active="activeName"
-    title-icon="issue"
-    title-icon-color="red"
-    title-icon-size="20px"
-    title-icon-position="left"
-    icon="down-arrow"
-    :accordion="true"
-  >
-    <nut-collapse-item :title="title1" :name="1">
-      component emits events are extracted separately to enhance code readability
-    </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
-      reconstruct and mount class components using the new feature of teleport
-    </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script>
-import { reactive, ref, toRefs } from 'vue';
-export default {
-  setup() {
-    const activeName = ref(1);
-    const title = reactive({
-      title1: 'title1',
-      title2: 'title2',
-    })
-    return {
-      activeName,
-      ...toRefs(title)
-    };
-  }
-}
-</script>
-```
-:::
 ### Set fixed content (do not collapse)
 
 Set content through slot: extrarender
-    
+
+:::demo
+
 ```html
 <template>
-  <nut-collapse v-model:active="activeName" icon="down-arrow" :accordion="true">
+  <nut-collapse v-model:active="activeName" :accordion="true">
     <nut-collapse-item :title="title1" :name="1">
       <template v-slot:extraRender>fixed content</template>
       Nutui is a lightweight Vue component library with JD style
@@ -259,31 +187,36 @@ export default {
 ## API
 ### Collapse Props
 
-| Attribute | Description | Type   | Default |
-|----- | ----- | ----- | ----- 
-| v-model | Of the currently expanded panel name | Accordion mode：string \| number<br>Non accordion mode：(string \| number)[] | - |
-| accordion | Whether to turn on accordion mode | boolean | false |
-| icon | Icon link and / or icon using nutui | string | ‘’ |
-| icon-size | Icon size | string | 16px |
-| icon-color | Icon color | string | '' |
-| title-icon | Title icon link and / or icon using nutui | string | ‘’ |
-| title-icon-size | Title icon size | string | 16px |
-| title-icon-color | Title icon color | string | ’‘ |
-| title-icon-position | Title icon location | string | ‘left' |
-| rotate | Click the rotation angle of collapse and expansion to take effect in the custom icon mode | string \ number | 180 |
-
+|Field | Description | Type | Default
+|----- | ----- | ----- | -----
+|V-model | name of the current expansion panel | accordion mode: string | number<br>Non accordion mode: (string | number) [] | -|
+|Accordion | Enable accordion mode |_boolean_ | `false` |
 
 ### CollapseItem Props
-| Attribute | Description | Type   | Default  | 
+
+|Parameter | Description | Type | Default|
 |------|------|------|------|
-|name | unique identifier, required | string \ number | - 1|
-|title | the content on the left side of the title bar supports slot incoming (props incoming has higher priority) | string | -|
-|sub-title | subtitle of title bar, support slot incoming (props incoming has higher priority) | string | -|
-|disabled | whether the title bar is disabled | Boolean | false|
-|slot:extrarender `v3.1.20`| set the fixed content under the title (no folding) | - | '|
+|Name | Unique identifier, required | string number | - 1|
+|Title | The content on the left side of the title bar supports slot incoming (the incoming priority of props is higher) | string | -|
+|Value | The content on the right side of the title bar supports slot incoming (the incoming priority of props is higher) | string | -|
+|Label | Title bar description information |_number \| string_ | - |
+|Rotate | Click the rotation angle of folding and unfolding to take effect in custom icon mode | string number | 180|
+|Disabled | Disable the title bar |_boolean_ | false |
+|Border | Display border |_boolean_ | `true` |
+
+
+### CollapseItem Slots
+
+|Slot name | Description|
+|------|------|
+|Slot: mTitle | Content slot on the left side of the title bar|
+|Slot: value | Right content slot of the title bar|
+|Slot: extraRender `v3.1.20 ` | Set fixed content under the title (no folding)|
+
 
 
 ### Events
-| Attribute | Description | Callback Arguments |
+
+|Event name | Description | Callback parameter|
 |------|------|------|
-| change | Triggered when the panel is switched | The type is consistent with the value bound by V-model|
+|Change | Triggered when switching panels | The type is consistent with the value bound to the v-model|

src/packages/__VUE/collapse/doc.md

@@ -26,7 +26,7 @@ app.use(CollapseItem);
 
 ```html
 <template>
-<nut-collapse v-model:active="activeNames" icon="down-arrow">
+<nut-collapse v-model:active="activeNames">
   <nut-collapse-item :name="1">
     <template v-slot:mTitle>
       {{title1}}
@@ -59,52 +59,20 @@ export default {
 
 ```
 :::
-### 无icon样式
-:::demo
 
-```html
-<template>
-  <nut-collapse v-model:active="activeName" :accordion="true">
-    <nut-collapse-item :title="title1" :name="1">
-    引入Vue3新特性 Composition API、Teleport、Emits 等
-    </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2">
-      全面使用 TypeScipt
-    </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script>
-import { reactive, ref, toRefs } from 'vue';
-export default {
-  setup() {
-    const activeName = ref(1);
-    const title = reactive({
-      title1: '标题1',
-      title2: '标题2',
-      title3: '标题3',
-    })
-    return {
-      activeName,
-      ...toRefs(title)
-    };
-  }
-}
-</script>
-```
-:::
 ### 手风琴
 
-通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式；`subTitle`可以设置副标题的内容
+通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式；`value`可以设置右侧的内容
 
 :::demo
 
 ```html
 <template>
-  <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
-    <nut-collapse-item :title="title1" :name="1">
+  <nut-collapse v-model:active="activeName" :accordion="true">
+    <nut-collapse-item :title="title1" :name="1" :value="subTitle">
       基于京东设计语言体系，构建场景
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
+    <nut-collapse-item :title="title2" :name="2">
       提高界⾯的模块化通用程度
     </nut-collapse-item>
     <nut-collapse-item :title="title3" :name="3">
@@ -136,7 +104,7 @@ export default {
 :::
 ### 自定义折叠图标
 
-通过icon设置自定义图标，rotate设置图标旋转的角度
+通过icon设置自定义图标
 
 :::demo
 
@@ -145,22 +113,21 @@ export default {
   <nut-collapse
     v-model:active="activeName"
     :accordion="true"
-    icon="arrow-right2"
-    rotate="90"
   >
-    <nut-collapse-item :title="title1" :name="1">
+    <nut-collapse-item :title="title1" :name="1" :icon="Notice">
       <template v-slot:sTitle>
         文本测试
       </template>
       NUTUI3.0重新思考其内在的一致性和可组合性
     </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
+    <nut-collapse-item :title="title2" :name="2" :icon="Follow">
       提⾼产研输出对接的效率，降低输出工作量
     </nut-collapse-item>
   </nut-collapse>
 </template>
 <script>
 import { reactive, ref, toRefs } from 'vue';
+import { Notice, Follow } from '@nutui/icons-vue';
 export default {
   setup() {
     const activeName = ref(1);
@@ -170,7 +137,9 @@ export default {
     })
     return {
       activeName,
-      ...toRefs(title)
+      ...toRefs(title),
+      Notice,
+      Follow
     };
   }
 }
@@ -178,48 +147,6 @@ export default {
 ```
 :::
 
-### 自定义标题图标
-
-通过icon设置自定义图标，rotate设置图标旋转的角度
-:::demo
-
-```html
-<template>
-  <nut-collapse
-    v-model:active="activeName"
-    title-icon="issue"
-    title-icon-color="red"
-    title-icon-size="20px"
-    title-icon-position="left"
-    icon="down-arrow"
-    :accordion="true"
-  >
-    <nut-collapse-item :title="title1" :name="1">
-    组件 emits 事件单独提取，增强代码可读性
-    </nut-collapse-item>
-    <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
-    使用 Teleport 新特性重构挂载类组件
-    </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script>
-import { reactive, ref, toRefs } from 'vue';
-export default {
-  setup() {
-    const activeName = ref(1);
-    const title = reactive({
-      title1: '标题1',
-      title2: '标题2',
-    })
-    return {
-      activeName,
-      ...toRefs(title)
-    };
-  }
-}
-</script>
-```
-:::
 ### 设置固定内容（不折叠）
 
 通过 slot:extraRender 设置内容
@@ -227,7 +154,7 @@ export default {
 
 ```html
 <template>
-  <nut-collapse v-model:active="activeName" icon="down-arrow" :accordion="true">
+  <nut-collapse v-model:active="activeName" :accordion="true">
     <nut-collapse-item :title="title1" :name="1">
       <template v-slot:extraRender>固定内容</template>
       NutUI是一套拥有京东风格的轻量级的 Vue 组件库
@@ -262,26 +189,27 @@ export default {
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | v-model | 当前展开面板的 name | 手风琴模式：string \| number<br>非手风琴模式：(string \| number)[] | - |
-| accordion | 是否开启手风琴模式 | boolean | false |
-| icon | 图标链接/或使用 NutUI 的 icon | string | ‘’ |
-| icon-size | 图标大小 | string | 16px |
-| icon-color | 图标颜色 | string | '' |
-| title-icon | 标题图标链接/或使用 NutUI 的 icon | string | ‘’ |
-| title-icon-size | 标题图标大小 | string | 16px |
-| title-icon-color | 标题图标颜色 | string | ’‘ |
-| title-icon-position | 标题图标位置 | string | ‘left' |
-| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \ number | 180 |
-
+| accordion | 是否开启手风琴模式 | _boolean_ | `false` |
 
 ### CollapseItem Props
 | 参数 | 说明 | 类型 | 默认值 | 
 |------|------|------|------|
 | name | 唯一标识符，必填 | string \ number | -1 |
 | title | 标题栏左侧内容，支持插槽传入（props传入的优先级更高） | string | - |
-| sub-title | 标题栏副标题，支持插槽传入（props传入的优先级更高） | string | - |
-| disabled | 标题栏是否禁用 | boolean | false |
-| slot:extraRender `v3.1.20`| 设置标题下固定内容（不折叠） | - | ’‘ |
+| value | 标题栏右侧内容，支持插槽传入（props传入的优先级更高） | string | - |
+| icon | 标题栏左侧图标组件，等同于 nutui-icon 组件 | - | - |
+| label | 标题栏描述信息 | _number \| string_ | - |
+| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \ number | 180 |
+| disabled | 标题栏是否禁用 | _boolean_ | false |
+| border | 是否显示边框 | _boolean_ | `true` |
+
+### CollapseItem Slots
 
+| 插槽名 | 说明 | 
+|------|------|
+| slot:mTitle | 标题栏左侧内容插槽 | 
+| slot:value | 标题栏右侧内容插槽 | 
+| slot:extraRender `v3.1.20`| 设置标题下固定内容（不折叠） |
 
 ### Events
 

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

@@ -14,39 +14,8 @@ export default create({
       type: [String, Number, Array]
     },
     accordion: {
-      type: Boolean
-    },
-    titleIcon: {
-      type: String,
-      default: ''
-    },
-    titleIconSize: {
-      type: String,
-      default: '16px'
-    },
-    titleIconColor: {
-      type: String,
-      default: ''
-    },
-    titleIconPosition: {
-      type: String,
-      default: 'left'
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    iconSize: {
-      type: String,
-      default: '16px'
-    },
-    iconColor: {
-      type: String,
-      default: ''
-    },
-    rotate: {
-      type: [String, Number],
-      default: 180
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:active', 'change'],

src/packages/__VUE/collapse/index.vue

@@ -10,46 +10,16 @@ const { create, componentName } = createComponent('collapse');
 export default create({
   props: {
     active: {
-      type: [String, Number, Array]
+      type: [String, Number, Array],
+      default: () => []
     },
     accordion: {
-      type: Boolean
-    },
-    titleIcon: {
-      type: String,
-      default: ''
-    },
-    titleIconSize: {
-      type: String,
-      default: '16px'
-    },
-    titleIconColor: {
-      type: String,
-      default: ''
-    },
-    titleIconPosition: {
-      type: String,
-      default: 'left'
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    iconSize: {
-      type: String,
-      default: '16px'
-    },
-    iconColor: {
-      type: String,
-      default: ''
-    },
-    rotate: {
-      type: [String, Number],
-      default: 180
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:active', 'change'],
-  setup(props, { emit, slots }) {
+  setup(props, { emit }) {
     const collapseDom: any = ref(null);
     const collapseChldren: any = ref([]);
     const classes = computed(() => {
@@ -58,9 +28,10 @@ export default create({
         [prefixCls]: true
       };
     });
+
     watch(
       () => props.active,
-      (newval: any, oldval) => {
+      (newval: number | string | any) => {
         let doms: any = collapseChldren.value;
         Array.from(doms).forEach((item: any) => {
           if (typeof newval == 'number' || typeof newval == 'string') {

src/packages/__VUE/collapseitem/index.scss

@@ -19,8 +19,7 @@
     }
   }
 }
-.nut-collapse-item {
-  position: relative;
+.nut-collapse-item__border {
   .nut-collapse-item__title {
     &::after {
       position: absolute;
@@ -34,16 +33,15 @@
       -webkit-transform: scaleY(0.5);
       transform: scaleY(0.5);
     }
-    .nut-collapse-item__title-main-value {
-      display: inline-block;
-      .nut-collapse-item__title-main-icon {
-        top: 2px;
-      }
-    }
   }
+}
+.nut-collapse-item {
+  position: relative;
   .nut-collapse-item__title {
     position: relative;
-    display: block;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     width: 100%;
     overflow: hidden;
     padding: $collapse-item-padding;
@@ -52,11 +50,22 @@
     line-height: $collapse-item-line-height;
     background-color: #fff;
     box-sizing: border-box;
-    .nut-collapse-item__title-icon {
+    .nut-collapse-item__title-main {
+      flex: 1;
+    }
+    .nut-collapse-item__title-main-value {
       display: block;
-      position: absolute;
-      top: 50%;
-      right: 16px;
+      .nut-collapse-item__title-main-icon {
+        top: 2px;
+      }
+    }
+    .nut-collapse-item__title-icon {
+      // display: block;
+      // position: absolute;
+      // top: 50%;
+      // right: 16px;
+      display: flex;
+      align-items: center;
       color: $collapse-item-icon-color;
       transition: transform 0.3s;
       &--expanded {
@@ -66,17 +75,14 @@
     .nut-collapse-item__title-sub {
       position: absolute;
       top: 50%;
-      right: 60px;
+      right: 65px;
       margin-top: -12px;
       color: $collapse-item-sub-title-color;
     }
-    .titleIconRight {
-      vertical-align: middle;
-      margin: 0px 0 0 10px;
-    }
-    .titleIconLeft {
-      vertical-align: middle;
-      margin: 0px 10px 0 0;
+    .nut-collapse-item__title-label {
+      display: block;
+      color: #969799;
+      font-size: 12px;
     }
   }
   .nut-collapse__item-wrapper,
@@ -122,13 +128,14 @@
       color: $collapse-item-disabled-color;
     }
   }
-  .titleIconLeft {
-    float: left;
-  }
-  .titleIconRight {
-    float: right;
-  }
   .nut-collapse-item__title-mtitle {
     display: inline-block;
   }
 }
+.collapse-border-none {
+  .nut-collapse-item__title {
+    &::after {
+      display: none;
+    }
+  }
+}

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

@@ -3,38 +3,25 @@
     <view :class="['nut-collapse-item__title', { 'nut-collapse-item__title--disabled': disabled }]" @click="toggleOpen">
       <view class="nut-collapse-item__title-main">
         <view class="nut-collapse-item__title-main-value">
-          <nut-icon
-            v-if="titleIcon"
-            :name="titleIcon"
-            v-bind="$attrs"
-            :size="titleIconSize"
-            :color="titleIconColor"
-            :class="[
-              'nut-collapse-item__title-main-icon',
-              titleIconPosition == 'left' ? 'titleIconLeft' : 'titleIconRight'
-            ]"
-          ></nut-icon>
           <template v-if="$slots.mTitle">
             <slot name="mTitle"></slot>
           </template>
           <template v-else>
             <view v-html="title" class="nut-collapse-item__title-mtitle"></view>
           </template>
+          <view class="nut-collapse-item__title-label" v-if="label">{{ label }}</view>
         </view>
       </view>
-      <view v-if="$slots.sTitle" class="nut-collapse-item__title-sub">
-        <slot name="sTitle"></slot>
+      <view v-if="$slots.value" class="nut-collapse-item__title-sub">
+        <slot name="value"></slot>
       </view>
-      <view v-else v-html="subTitle" class="nut-collapse-item__title-sub"></view>
-      <nut-icon
-        v-if="icon"
-        :name="icon"
-        v-bind="$attrs"
-        :size="iconSize"
-        :color="iconColor"
+      <view v-else v-html="value" class="nut-collapse-item__title-sub"></view>
+      <view
         :class="['nut-collapse-item__title-icon', { 'nut-collapse-item__title-icon--expanded': openExpanded }]"
-        :style="iconStyle"
-      ></nut-icon>
+        :style="{ transform: 'rotate(' + (openExpanded ? rotate : 0) + 'deg)' }"
+      >
+        <component :is="renderIcon(icon)"></component>
+      </view>
     </view>
     <view v-if="$slots.extraRender" class="nut-collapse__item-extraWrapper">
       <div class="nut-collapse__item-extraWrapper__extraRender">
@@ -66,16 +53,24 @@ import {
   ComponentInternalInstance
 } from 'vue';
 import Taro, { eventCenter, getCurrentInstance as getCurrentInstanceTaro } from '@tarojs/taro';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent, renderIcon } from '@/packages/utils/create';
+import { DownArrow } from '@nutui/icons-vue-taro';
 const { create, componentName } = createComponent('collapse-item');
 
 export default create({
   props: {
+    collapseRef: {
+      type: Object
+    },
     title: {
       type: String,
       default: ''
     },
-    subTitle: {
+    value: {
+      type: String,
+      default: ''
+    },
+    label: {
       type: String,
       default: ''
     },
@@ -88,8 +83,17 @@ export default create({
       default: -1,
       required: true
     },
-    collapseRef: {
-      type: Object
+    border: {
+      type: Boolean,
+      default: true
+    },
+    icon: {
+      type: Object,
+      default: () => DownArrow
+    },
+    rotate: {
+      type: [String, Number],
+      default: 180
     }
   },
   setup(props, ctx: any) {
@@ -110,26 +114,7 @@ export default create({
     };
     relation(getCurrentInstance() as ComponentInternalInstance);
     const proxyData = reactive({
-      icon: parent.props.icon,
-      iconSize: parent.props.iconSize,
-      iconColor: parent.props.iconColor,
-      openExpanded: false,
-      // classDirection: 'right',
-      iconStyle: {
-        transform: 'rotate(0deg)',
-        marginTop: parent.props.iconHeght ? '-' + parent.props.iconHeght / 2 + 'px' : '-10px'
-      }
-    });
-
-    const titleIconStyle = reactive({
-      titleIcon: parent.props.titleIcon,
-      titleIconSize: parent.props.titleIconSize,
-      titleIconColor: parent.props.titleIconColor,
-      titleIconPosition: parent.props.titleIconPosition
-      // titleIconWH: {
-      //   width: '13px',
-      //   height: '13px'
-      // }
+      openExpanded: false
     });
 
     // 获取 Dom 元素
@@ -152,11 +137,6 @@ export default create({
 
     // 手风琴模式
     const animation = () => {
-      if (parent.props.icon && !proxyData.openExpanded) {
-        proxyData.iconStyle['transform'] = 'rotate(0deg)';
-      } else {
-        proxyData.iconStyle['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
-      }
       nextTick(() => {
         // const query = Taro.createSelectorQuery();
         // @ts-ignore
@@ -176,20 +156,15 @@ export default create({
     };
     const open = () => {
       proxyData.openExpanded = !proxyData.openExpanded;
-      let time = contentRef.value.childNodes?.length || 1;
+      // let time = contentRef.value.childNodes?.length || 1;
       setTimeout(() => {
         animation();
-      }, 500 * time);
-      // timer.value = setInterval(() => {
-      // animation();
-      // }, 600);
+      }, 700);
+      // }, 500 * time);
     };
 
     const defaultOpen = () => {
       open();
-      if (parent.props.icon) {
-        proxyData['iconStyle']['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
-      }
     };
 
     const currentName = computed(() => props.name);
@@ -288,10 +263,10 @@ export default create({
     });
 
     return {
+      renderIcon,
       classes,
       ...toRefs(proxyData),
       ...toRefs(parent.props),
-      ...toRefs(titleIconStyle),
       conHeight,
       wrapperRef,
       contentRef,

src/packages/__VUE/collapseitem/index.vue

@@ -3,34 +3,25 @@
     <view :class="['nut-collapse-item__title', { 'nut-collapse-item__title--disabled': disabled }]" @click="toggleOpen">
       <view class="nut-collapse-item__title-main">
         <view class="nut-collapse-item__title-main-value">
-          <nut-icon
-            v-if="titleIcon"
-            :name="titleIcon"
-            v-bind="$attrs"
-            :size="titleIconSize"
-            :color="titleIconColor"
-            :class="[titleIconPosition == 'left' ? 'titleIconLeft' : 'titleIconRight']"
-          ></nut-icon>
           <slot v-if="$slots.mTitle" name="mTitle"></slot>
           <template v-else>
             <view v-html="title" class="nut-collapse-item__title-mtitle"></view>
           </template>
+          <view class="nut-collapse-item__title-label" v-if="label">{{ label }}</view>
         </view>
       </view>
-      <view v-if="$slots.sTitle" class="nut-collapse-item__title-sub">
-        <slot name="sTitle"></slot>
+      <view v-if="$slots.value" class="nut-collapse-item__title-sub">
+        <slot name="value"></slot>
       </view>
-      <view v-else v-html="subTitle" class="nut-collapse-item__title-sub"></view>
-      <nut-icon
-        v-if="icon"
-        :name="icon"
-        v-bind="$attrs"
-        :size="iconSize"
-        :color="iconColor"
+      <view v-else v-html="value" class="nut-collapse-item__title-sub"></view>
+      <view
         :class="['nut-collapse-item__title-icon', { 'nut-collapse-item__title-icon--expanded': openExpanded }]"
-        :style="iconStyle"
-      ></nut-icon>
+        :style="{ transform: 'rotate(' + (openExpanded ? rotate : 0) + 'deg)' }"
+      >
+        <component :is="renderIcon(icon)"></component>
+      </view>
     </view>
+
     <view v-if="$slots.extraRender" class="nut-collapse__item-extraWrapper">
       <div class="nut-collapse__item-extraWrapper__extraRender">
         <slot name="extraRender"></slot>
@@ -56,16 +47,24 @@ import {
   getCurrentInstance,
   ComponentInternalInstance
 } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { DownArrow } from '@nutui/icons-vue';
+import { createComponent, renderIcon } from '@/packages/utils/create';
 const { create, componentName } = createComponent('collapse-item');
 
 export default create({
   props: {
+    collapseRef: {
+      type: Object
+    },
     title: {
       type: String,
       default: ''
     },
-    subTitle: {
+    value: {
+      type: String,
+      default: ''
+    },
+    label: {
       type: String,
       default: ''
     },
@@ -78,17 +77,28 @@ export default create({
       default: -1,
       required: true
     },
-    collapseRef: {
-      type: Object
+    border: {
+      type: Boolean,
+      default: true
+    },
+    icon: {
+      type: Object,
+      default: () => DownArrow
+    },
+    rotate: {
+      type: [String, Number],
+      default: 180
     }
   },
+  // components: { DownArrow },
   setup(props, ctx: any) {
     const collapse: any = inject('collapseParent');
     const parent: any = reactive(collapse);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
-        [prefixCls]: true
+        [prefixCls]: true,
+        [prefixCls + '__border']: props.border
       };
     });
 
@@ -99,26 +109,7 @@ export default create({
     };
     relation(getCurrentInstance() as ComponentInternalInstance);
     const proxyData = reactive({
-      icon: parent.props.icon,
-      iconSize: parent.props.iconSize,
-      iconColor: parent.props.iconColor,
-      openExpanded: false,
-      // classDirection: 'right',
-      iconStyle: {
-        transform: 'rotate(0deg)',
-        marginTop: parent.props.iconHeght ? '-' + parent.props.iconHeght / 2 + 'px' : '-10px'
-      }
-    });
-
-    const titleIconStyle = reactive({
-      titleIcon: parent.props.titleIcon,
-      titleIconSize: parent.props.titleIconSize,
-      titleIconColor: parent.props.titleIconColor,
-      titleIconPosition: parent.props.titleIconPosition
-      // titleIconWH: {
-      //   width: '13px',
-      //   height: '13px'
-      // }
+      openExpanded: false
     });
 
     // 获取 Dom 元素
@@ -149,11 +140,6 @@ export default create({
         const contentHeight = `${offsetHeight}px`;
         wrapperRefEle.style.willChange = 'height';
         wrapperRefEle.style.height = !proxyData.openExpanded ? 0 : contentHeight;
-        if (parent.props.icon && !proxyData.openExpanded) {
-          proxyData.iconStyle['transform'] = 'rotate(0deg)';
-        } else {
-          proxyData.iconStyle['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
-        }
       }
       if (!proxyData.openExpanded) {
         onTransitionEnd();
@@ -167,9 +153,6 @@ export default create({
 
     const defaultOpen = () => {
       open();
-      if (parent.props.icon) {
-        proxyData['iconStyle']['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
-      }
     };
 
     const currentName = computed(() => props.name);
@@ -234,7 +217,6 @@ export default create({
           subtree: true
         });
       }
-
       init();
     });
     const emptyContent = computed(() => {
@@ -249,8 +231,7 @@ export default create({
       classes,
       emptyContent,
       ...toRefs(proxyData),
-      ...toRefs(parent.props),
-      ...toRefs(titleIconStyle),
+      renderIcon,
       wrapperRef,
       contentRef,
       open,

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

@@ -4,7 +4,7 @@ import { createComponent } from '@/packages/utils/create';
 import { component } from './common';
 import OverLay from '../overlay/index.taro.vue';
 const { create } = createComponent('fixed-nav');
-import { Left } from '@nutui/icons-vue';
+import { Left } from '@nutui/icons-vue-taro';
 export default create(
   component({
     [OverLay.name]: OverLay,

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

@@ -2,27 +2,27 @@
 
 ### 介绍
 
-独立安装 @nutui/icons-vue 图标组件包。
+独立安装 @nutui/icons-vue-taro 图标组件包。
 
 ### 安装
 
 ```bash
-npm i --save @nutui/icons-vue
+npm i --save @nutui/icons-vue-taro
 ```
 
 ``` javascript
 import { createApp } from 'vue';
-import { IconFont } from '@nutui/icons-vue';
+import { IconFont } from '@nutui/icons-vue-taro';
 
 const app = createApp();
 app.use(IconFont);
 ```
-### Svg 按需加载使用
+### 按需加载使用
 
-按需加载组件使用方式，可选项见 @nutui/icons-vue/dist/types/index.d.ts
+按需加载组件使用方式，可选项见 @nutui/icons-vue-taro/dist/types/index.d.ts
 
 ```js
-import { Add } from '@nutui/icons-vue';
+import { Add } from '@nutui/icons-vue-taro';
 // template
 <Add color='red'>
 ```
@@ -30,7 +30,7 @@ import { Add } from '@nutui/icons-vue';
 ### IconFont 全量使用
 
 ```js
-import { IconFont } from '@nutui/icons-vue';
+import { IconFont } from '@nutui/icons-vue-taro';
 ```
 
 `Icon` 的 `name` 属性支持传入图标名称或图片链接。

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

@@ -41,7 +41,7 @@
 import { computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
-import { Minus, Plus } from '@nutui/icons-vue';
+import { Minus, Plus } from '@nutui/icons-vue-taro';
 const { componentName, create } = createComponent('input-number');
 export default create({
   components: { Minus, Plus },

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

@@ -43,7 +43,7 @@
       <view class="nut-shortpsd-message">
         <view class="nut-shortpsd-error">{{ errorMsg }}</view>
         <view class="nut-shortpsd-forget" @click="onTips" v-if="tips || translate('tips')">
-          <tips class="icon" height="11px" width="11px"></tips>
+          <tips class="icon" size="11px"></tips>
           <view>{{ tips || translate('tips') }}</view>
         </view>
       </view>
@@ -58,7 +58,7 @@
 import { ref, computed, watch, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Popup from '../popup/index.taro.vue';
-import { Tips } from '@nutui/icons-vue';
+import { Tips } from '@nutui/icons-vue-taro';
 const { create, translate } = createComponent('short-password');
 import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
 export default create({

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

@@ -17,7 +17,7 @@
         >
           <view class="nut-tabs__titles-item__line" :style="tabsActiveStyle" v-if="type == 'line'"></view>
           <view class="nut-tabs__titles-item__smile" :style="tabsActiveStyle" v-if="type == 'smile'">
-            <IconFont name="joy-smile" :color="color" />
+            <JoySmile :color="color" />
           </view>
           <view class="nut-tabs__titles-item__text" :class="{ ellipsis: ellipsis }">{{ item.title }} </view>
         </view>
@@ -30,7 +30,7 @@
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import { IconFont } from '@nutui/icons-vue';
+import { JoySmile } from '@nutui/icons-vue-taro';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { TypeOfFun } from '@/packages/utils/util';
 import { useRect } from '@/packages/utils/useRect';
@@ -46,7 +46,7 @@ export type TabsSize = 'large' | 'normal' | 'small';
 const { create } = createComponent('tabs');
 export default create({
   components: {
-    IconFont
+    JoySmile
   },
   props: {
     modelValue: {

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

@@ -1,21 +1,13 @@
 <template>
   <view :class="classes" :style="getStyle()" @click="onClick">
     <slot></slot>
-    <IconFont
-      name="close"
-      class="nut-tag--close"
-      v-if="closeable"
-      font-size="12px"
-      width="11px"
-      height="11px"
-      @click="onClose"
-    ></IconFont>
+    <Close class="nut-tag--close" v-if="closeable" size="11" @click="onClose"></Close>
   </view>
 </template>
 
 <script lang="ts">
 import { PropType, CSSProperties, computed, toRefs } from 'vue';
-import { IconFont } from '@nutui/icons-vue';
+import { Close } from '@nutui/icons-vue-taro';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('tag');
 export type TagType = 'primary' | 'success' | 'danger' | 'warning';
@@ -46,7 +38,7 @@ export default create({
     }
   },
   components: {
-    IconFont
+    Close
   },
   emits: ['close', 'click'],
   setup(props, { emit }) {

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

@@ -68,7 +68,7 @@ import { computed, watch, ref, reactive, toRefs, PropType, nextTick, onMounted }
 import { PopoverLocation } from '../popover/type';
 import { createComponent } from '@/packages/utils/create';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
-import { Close } from '@nutui/icons-vue';
+import { Close } from '@nutui/icons-vue-taro';
 import Taro from '@tarojs/taro';
 
 interface StepOptions {

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

@@ -82,7 +82,7 @@ import Button from '../button/index.taro.vue';
 const { componentName, create, translate } = createComponent('uploader');
 import Taro from '@tarojs/taro';
 import { isPromise } from '@/packages/utils/util';
-import { Photograph } from '@nutui/icons-vue';
+import { Photograph } from '@nutui/icons-vue-taro';
 export default create({
   components: {
     [Progress.name]: Progress,

src/sites/mobile-taro/vue/src/basic/pages/icon/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo">
-    <h2>Svg 按需使用</h2>
+    <h2>按需使用</h2>
     <nut-cell>
       <Add color="red" />
     </nut-cell>
@@ -59,7 +59,7 @@
 </template>
 
 <script lang="ts">
-import { Add, IconFontConfig, IconFont } from '@nutui/icons-vue';
+import { Add, IconFontConfig, IconFont } from '@nutui/icons-vue-taro';
 export default {
   props: {},
   components: { IconFont, Add },

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

@@ -1,53 +1,33 @@
 <template>
   <div class="demo full">
     <h2>基本用法</h2>
-    <nut-collapse v-model:active="active1" icon="down-arrow" @change="change">
+    <nut-collapse v-model:active="active1" @change="change">
       <nut-collapse-item :title="title1" :name="1">
         京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
       </nut-collapse-item>
       <nut-collapse-item :title="title2" :name="2"> 京东到家：教师节期间 创意花束销量增长53倍 </nut-collapse-item>
       <nut-collapse-item :title="title3" :name="3" disabled> </nut-collapse-item>
     </nut-collapse>
-    <h2>无icon样式</h2>
-    <nut-collapse v-model:active="active4" :accordion="true">
-      <nut-collapse-item :title="title1" :name="1"> 2020年中国数字游戏市场规模超2786亿元 </nut-collapse-item>
-      <nut-collapse-item :title="title2" :name="2"> 基于区块链技术的取证APP在浙江省杭州市发布 </nut-collapse-item>
-    </nut-collapse>
     <h2>手风琴</h2>
-    <nut-collapse v-model:active="active2" :accordion="true" icon="down-arrow">
+    <nut-collapse v-model:active="active2" :accordion="true">
       <nut-collapse-item :title="title1" :name="1">
         <template v-slot:sTitle> 文本测试 </template>
         华为终端操作系统EMUI 11发布，9月11日正式开启
       </nut-collapse-item>
-      <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
+      <nut-collapse-item :title="title2" :name="2" :value="subTitle">
         中国服务机器人市场已占全球市场超1/4
       </nut-collapse-item>
       <nut-collapse-item :title="title3" :name="3"> QuestMobile：90后互联网用户规模超越80后达3.62亿 </nut-collapse-item>
     </nut-collapse>
     <h2>自定义折叠图标</h2>
-    <nut-collapse v-model:active="active3" :accordion="true" icon="arrow-right2" rotate="90">
-      <nut-collapse-item :title="title1" :name="1"> 京东数科IPO将引入“绿鞋机制” </nut-collapse-item>
-      <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
+    <nut-collapse v-model:active="active3" :accordion="true">
+      <nut-collapse-item :title="title1" :name="1" :icon="Notice"> 京东数科IPO将引入“绿鞋机制” </nut-collapse-item>
+      <nut-collapse-item :title="title2" :name="2" value="文本内容" :icon="Follow">
         世界制造业大会开幕，阿里巴巴与安徽合作再升级
       </nut-collapse-item>
     </nut-collapse>
-    <h2>自定义标题图标</h2>
-    <nut-collapse
-      v-model:active="active5"
-      title-icon="issue"
-      title-icon-color="red"
-      title-icon-size="20px"
-      title-icon-position="left"
-      icon="down-arrow"
-      :accordion="true"
-    >
-      <nut-collapse-item :title="title1" :name="1"> “森亿智能”获4亿元D轮融资 </nut-collapse-item>
-      <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
-        快看漫画与全球潮玩集合店X11达成战略合作
-      </nut-collapse-item>
-    </nut-collapse>
     <h2>设置固定内容（不折叠部分）</h2>
-    <nut-collapse v-model:active="active6" icon="down-arrow" :accordion="true">
+    <nut-collapse v-model:active="active6" :accordion="true">
       <nut-collapse-item :title="title1" :name="1">
         <template v-slot:extraRender>固定内容</template>
         NutUI是一套拥有京东风格的轻量级的 Vue 组件库
@@ -59,7 +39,8 @@
   </div>
 </template>
 <script lang="ts">
-import { onMounted, reactive, ref, toRefs } from 'vue';
+import { reactive, toRefs } from 'vue';
+import { Notice, Follow } from '@nutui/icons-vue-taro';
 export default {
   setup(props, context) {
     const data = reactive({
@@ -85,7 +66,9 @@ export default {
     // })
     return {
       change,
-      ...toRefs(data)
+      ...toRefs(data),
+      Notice,
+      Follow
     };
   }
 };

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

@@ -114,7 +114,7 @@
 
 <script lang="ts">
 import { reactive, toRefs, onMounted, ref, Ref } from 'vue';
-import { Left, Right } from '@nutui/icons-vue';
+import { Left, Right } from '@nutui/icons-vue-taro';
 
 export default {
   props: {},

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

@@ -44,7 +44,7 @@
 
 <script lang="ts">
 import { onMounted, reactive, ref } from 'vue';
-import { Retweet } from '@nutui/icons-vue';
+import { Retweet } from '@nutui/icons-vue-taro';
 export default {
   props: {},
   components: { Retweet },

vite.config.build.ts

@@ -18,7 +18,7 @@ export default defineConfig({
       scss: {
         // example : additionalData: `@import "./src/design/styles/variables";`
         // dont need include file extend .scss
-        additionalData: `@import "@/packages/styles/variables.scss";@import "@/sites/assets/styles/variables.scss";`
+        additionalData: `@import "@/packages/styles/variables.scss";`
       }
     },
     postcss: {