fix: 文档,demo 去掉 nut-icon (#1963)

* feat: collapse api 更换,icon 图标更换

* feat: searchbar icon 更换,文档修改

* feat: noticebar icon 更换,文档修改

* fix: review 问题修改

* feat: rate icon 替换，文档修改

* fix: rate common文件拆分

* fix: 文档,demo 去掉 nut-icon

* Delete common.taro.ts

* fix: 解决冲突

* Update doc.taro.md

* Update doc.taro.md

* docs: 文档修改

* docs: 文档修改

* docs: 文档

src/packages/__VUE/noticebar/demo.vue

@@ -66,7 +66,7 @@
     <div class="interstroll-list">
       <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :standTime="1000">
         <template v-slot:rightIcon>
-          <nut-icon name="fabulous" color="#f0250f"> </nut-icon>
+          <Fabulous />
         </template>
       </nut-noticebar>
     </div>
@@ -75,6 +75,7 @@
 
 <script lang="ts">
 import { onMounted, reactive, toRefs } from 'vue';
+import { Fabulous } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('noticebar');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -113,6 +114,7 @@ const initTranslate = () =>
 
 export default createDemo({
   props: {},
+  components: { Fabulous },
   setup() {
     initTranslate();
     const state = reactive({
@@ -133,7 +135,8 @@ export default createDemo({
       ...toRefs(state),
       hello,
       go,
-      translate
+      translate,
+      Fabulous
     };
   }
 });

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

@@ -197,14 +197,16 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 <template>
     <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
       <template v-slot:rightIcon>
-        <nut-icon name="fabulous" color="#f0250f"></nut-icon>
+        <Fabulous />
       </template>
     </nut-noticebar>
 </template>
 
 <script>
   import { ref } from 'vue';
+  import { Fabulous } from '@nutui/icons-vue';
   export default {
+    components: { Fabulous },
     setup(props) {
       const horseLamp1 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
       return { horseLamp1 };

src/packages/__VUE/noticebar/doc.md

@@ -199,14 +199,16 @@ app.use(Noticebar);
 <template>
     <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
       <template v-slot:rightIcon>
-        <nut-icon name="fabulous" color="#f0250f"></nut-icon>
+        <Fabulous />
       </template>
     </nut-noticebar>
 </template>
 
 <script>
   import { ref } from 'vue';
+  import { Fabulous } from '@nutui/icons-vue';
   export default {
+    components: { Fabulous },
     setup(props) {
       const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
       return { horseLamp1 };

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

@@ -194,14 +194,16 @@ app.use(Noticebar);
 <template>
     <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
       <template v-slot:rightIcon>
-        <nut-icon name="fabulous" color="#f0250f"></nut-icon>
+        <Fabulous />
       </template>
     </nut-noticebar>
 </template>
 
 <script>
   import { ref } from 'vue';
+  import { Fabulous } from '@nutui/icons-vue-taro';
   export default {
+    components: { Fabulous },
     setup(props) {
       const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
       return { horseLamp1 };
@@ -251,4 +253,4 @@ app.use(Noticebar);
 | 字段  | 说明             | 回调参数     |
 | ----- | ---------------- | ------------ |
 | click | 外层点击事件回调 | event: Event |
-| close | 关闭通知栏时触发 | event: Event |
+| close | 关闭通知栏时触发 | event: Event |

src/packages/__VUE/searchbar/__tests__/searchbar.spec.ts

@@ -1,14 +1,6 @@
 import { mount, config } from '@vue/test-utils';
 import Searchbar from '../index.vue';
 
-import NutIcon from '../../icon/index.vue';
-
-beforeAll(() => {
-  config.global.components = {
-    NutIcon
-  };
-});
-
 afterAll(() => {
   config.global.components = {};
 });
@@ -140,40 +132,3 @@ test('clear event test', async () => {
   expect((wrapper.emitted('update:modelValue') as any)[1][0]).toEqual('');
   expect(clear.exists()).toBe(true);
 });
-
-test('slot test', () => {
-  const wrapper = mount(Searchbar, {
-    props: { modelValue: '' },
-    slots: {
-      default: () => {
-        `
-          <template v-slot:leftout>
-            <nut-icon size="20" name="left"></nut-icon>
-          </template>
-          <template v-slot:leftin>
-            <nut-icon size="14" name="search2"></nut-icon>
-          </template>
-          <template v-slot:rightin>
-            <nut-icon size="20" name="photograph"></nut-icon>
-          </template>
-          <template v-slot:rightout>
-            <nut-icon size="20" name="message"></nut-icon>
-          </template>
-        `;
-      }
-    }
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('custom clear icon', () => {
-  const wrapper = mount(Searchbar, {
-    props: {
-      clearIcon: 'close',
-      modelValue: 'test'
-    }
-  });
-  const input = wrapper.find('.nut-searchbar__input-clear i');
-  expect(input.classes()).toContain('nut-icon-close');
-});

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

@@ -74,14 +74,15 @@ app.use(Icon);
 <template>
   <nut-searchbar v-model="searchValue">
     <template v-slot:leftin>
-      <nut-icon size="14" name="search2"></nut-icon>
+      <Search2 />
     </template>
   </nut-searchbar>
 </template>
 <script lang="ts">
   import { toRefs, reactive } from 'vue';
-  import { Icon } from '@nutui/nutui';
+  import { Search2 } from '@nutui/icons-vue-taro';
   export default {
+    components: { Search2 },
     setup() {
       const state = reactive({
         searchValue: ""
@@ -178,23 +179,24 @@ app.use(Icon);
 <template>
   <nut-searchbar v-model="searchValue">
     <template v-slot:leftout>
-      <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
+      <Left @click="clickLeft" />
     </template>
     <template v-slot:leftin>
-      <nut-icon size="14" name="search2"></nut-icon>
+      <Search2 />
     </template>
     <template v-slot:rightin>
-      <nut-icon size="20" name="photograph"></nut-icon>
+      <Photograph />
     </template>
     <template v-slot:rightout>
-      <nut-icon size="20" name="message"></nut-icon>
+      <Message />
     </template>
   </nut-searchbar> 
 </template>
 <script lang="ts">
   import { toRefs, reactive } from 'vue';
-  import { Icon } from '@nutui/nutui';
+  import { Search2, Left, Photograph, Message } from '@nutui/icons-vue-taro';
   export default {
+    components: { Search2, Left, Photograph, Message },
     setup() {
       const state = reactive({
         searchValue: ""