chore(noticebar、rate): icon svg (#1957)

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

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

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

* fix: review 问题修改

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

src/packages/__VUE/noticebar/demo.vue

@@ -9,13 +9,17 @@
     <nut-noticebar :text="translate('text')" :scrollable="false"></nut-noticebar>
 
     <h2>{{ translate('mode') }}</h2>
-    <nut-noticebar :closeMode="true" @click="hello">{{ translate('text') }} </nut-noticebar>
+    <nut-noticebar :close-mode="true" @click="hello">{{ translate('text') }} </nut-noticebar>
     <p />
-    <nut-noticebar :closeMode="true" right-icon="circle-close" @click="hello">{{ translate('text') }} </nut-noticebar>
+    <nut-noticebar :close-mode="true" @click="hello">{{ translate('text') }} </nut-noticebar>
     <p />
-    <nut-noticebar
-      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
-    >
+    <nut-noticebar>
+      <template v-slot:left-icon>
+        <img
+          src="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+          style="width: 20px; height: 20px"
+        />
+      </template>
       <a href="https://www.jd.com">{{ translate('jd') }}</a>
     </nut-noticebar>
 
@@ -30,7 +34,7 @@
         :speed="10"
         :standTime="1000"
         @click="go"
-        :closeMode="true"
+        :close-mode="true"
       ></nut-noticebar>
     </div>
 

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

@@ -61,12 +61,12 @@ Scrolling is automatically enabled when the content length of the notification b
 
 ```html
 <template>
-  <nut-noticebar :closeMode="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
+  <nut-noticebar :close-mode="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
     Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience.
   </nut-noticebar>
  
   <nut-noticebar
-      :closeMode="true"
+      :close-mode="true"
       right-icon="circle-close"
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`"
@@ -75,9 +75,14 @@ Scrolling is automatically enabled when the content length of the notification b
   </nut-noticebar>
 
   <nut-noticebar
-      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
       :scrollable="false"
     >
+      <template v-slot:left-icon>
+        <img
+          src="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+          style="width: 20px; height: 20px"
+        />
+      </template>
       <a href="https://www.jd.com">Jingdong</a>
     </nut-noticebar>
 </template>
@@ -116,7 +121,7 @@ When text is long, you can enable multi-line display by setting the wrapable pro
       :speed='10' 
       :standTime='1000' 
       @click='go' 
-      :closeMode="true" 
+      :close-mode="true" 
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`">
   </nut-noticebar>

src/packages/__VUE/noticebar/doc.md

@@ -63,12 +63,12 @@ app.use(Noticebar);
 
 ```html
 <template>
-  <nut-noticebar :closeMode="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
+  <nut-noticebar :close-mode="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
     NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
   </nut-noticebar>
  
   <nut-noticebar
-      :closeMode="true"
+      :close-mode="true"
       right-icon="circle-close"
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`"
@@ -87,9 +87,14 @@ app.use(Noticebar);
 ```html
 <template>
     <nut-noticebar
-      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
       :scrollable="false"
     >
+      <template v-slot:left-icon>
+        <img
+          src="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+          style="width: 20px; height: 20px"
+        />
+      </template>
       <a href="https://www.jd.com">京东商城</a>
     </nut-noticebar>
 </template>
@@ -123,7 +128,7 @@ app.use(Noticebar);
       :speed='10' 
       :standTime='1000' 
       @click='go' 
-      :closeMode="true" 
+      :close-mode="true" 
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`">
   </nut-noticebar>

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

@@ -12,8 +12,9 @@
       @click="handleClick"
       v-if="direction == 'across'"
     >
-      <view class="nut-noticebar__page-lefticon" v-if="iconShow" :style="{ 'background-image': `url(${iconBg})` }">
-        <slot name="left-icon"><nut-icon name="notice" size="16" :color="color" v-if="!iconBg"></nut-icon></slot>
+      <view class="nut-noticebar__page-lefticon" v-if="iconShow">
+        <slot name="left-icon" v-if="$slots['left-icon']"> </slot>
+        <component :is="renderIcon(leftIcon)" v-else></component>
       </view>
       <view ref="wrap" :class="`nut-noticebar__page-wrap wrap${id}`">
         <view
@@ -27,9 +28,8 @@
         </view>
       </view>
       <view v-if="closeMode || rightIcon" class="nut-noticebar__page-righticon" @click.stop="onClickIcon">
-        <slot name="right-icon">
-          <nut-icon v-bind="$attrs" :name="rightIcon ? rightIcon : 'close'" :color="color"></nut-icon
-        ></slot>
+        <slot name="right-icon" v-if="$slots['right-icon']"> </slot>
+        <CircleClose v-else />
       </view>
     </view>
 
@@ -64,7 +64,7 @@
           <slot name="rightIcon"></slot>
         </template>
         <template v-else-if="closeMode">
-          <nut-icon type="cross" :color="color" size="11px"></nut-icon>
+          <CircleClose :color="color" size="11px" />
         </template>
       </view>
     </view>
@@ -72,7 +72,8 @@
 </template>
 <script lang="ts">
 import { toRefs, onMounted, onUnmounted, reactive, computed, onActivated, onDeactivated, ref, watch, h } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { Notice, CircleClose } from '@nutui/icons-vue-taro';
+import { createComponent, renderIcon } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 const { componentName, create } = createComponent('noticebar');
 import Taro from '@tarojs/taro';
@@ -130,8 +131,8 @@ export default create({
       type: Boolean,
       default: false
     },
-    leftIcon: { type: String, default: '' },
-    rightIcon: { type: String, default: '' },
+    leftIcon: { type: Object || String, default: () => Notice },
+    rightIcon: { type: Object || String, default: '' },
     color: {
       type: String,
       default: '#F9911B'
@@ -157,7 +158,9 @@ export default create({
     ScrollItem: function (props) {
       props.item.props.style = props.style;
       return h(props.item);
-    }
+    },
+    Notice,
+    CircleClose
   },
   emits: ['click', 'close'],
 
@@ -425,7 +428,8 @@ export default create({
       handleClickIcon,
       slots,
       pxCheck,
-      wrapContentClass
+      wrapContentClass,
+      renderIcon
     };
   }
 });

src/packages/__VUE/noticebar/index.vue

@@ -12,8 +12,9 @@
       @click="handleClick"
       v-if="direction == 'across'"
     >
-      <view class="nut-noticebar__page-lefticon" v-if="iconShow" :style="{ 'background-image': `url(${iconBg})` }">
-        <slot name="left-icon"><nut-icon name="notice" size="16" :color="color" v-if="!iconBg"></nut-icon></slot>
+      <view class="nut-noticebar__page-lefticon" v-if="iconShow">
+        <slot name="left-icon" v-if="$slots['left-icon']"> </slot>
+        <component :is="renderIcon(leftIcon)" v-else></component>
       </view>
       <view ref="wrap" class="nut-noticebar__page-wrap">
         <view
@@ -26,9 +27,8 @@
         </view>
       </view>
       <view v-if="closeMode || rightIcon" class="nut-noticebar__page-righticon" @click.stop="onClickIcon">
-        <slot name="right-icon">
-          <nut-icon v-bind="$attrs" :name="rightIcon ? rightIcon : 'close'" :color="color"></nut-icon
-        ></slot>
+        <slot name="right-icon" v-if="$slots['right-icon']"> </slot>
+        <CircleClose v-else />
       </view>
     </view>
 
@@ -63,7 +63,7 @@
           <slot name="rightIcon"></slot>
         </template>
         <template v-else-if="closeMode">
-          <nut-icon type="cross" :color="color" size="11px"></nut-icon>
+          <CircleClose :color="color" size="11px" />
         </template>
       </view>
     </view>
@@ -83,7 +83,8 @@ import {
   h,
   Slots
 } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { Notice, CircleClose } from '@nutui/icons-vue';
+import { createComponent, renderIcon } from '@/packages/utils/create';
 const { componentName, create } = createComponent('noticebar');
 import { pxCheck } from '@/packages/utils/pxCheck';
 
@@ -139,8 +140,8 @@ export default create({
       type: Boolean,
       default: false
     },
-    leftIcon: { type: String, default: '' },
-    rightIcon: { type: String, default: '' },
+    leftIcon: { type: Object || String, default: () => Notice },
+    rightIcon: { type: Object || String, default: '' },
     color: {
       type: String,
       default: ''
@@ -167,7 +168,9 @@ export default create({
       props.item.props.style = props.style;
       props.item.key = props.key;
       return h(props.item);
-    }
+    },
+    Notice,
+    CircleClose
   },
   emits: ['click', 'close'],
 
@@ -421,7 +424,8 @@ export default create({
       handleClickIcon,
       slots,
       pxCheck,
-      wrapContentClass
+      wrapContentClass,
+      renderIcon
     };
   }
 });

src/packages/__VUE/rate/common.ts

@@ -1,5 +1,8 @@
 import { computed, Ref, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import Taro from '@tarojs/taro';
+import { StarN } from '@nutui/icons-vue';
+import { StarN as StarNTaro } from '@nutui/icons-vue-taro';
+import { createComponent, renderIcon } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { useTouch } from '@/packages/utils/useTouch';
 const { componentName } = createComponent('rate');
@@ -14,9 +17,11 @@ const useComponent = (touchable: Boolean = true) => {
         type: [String, Number],
         default: 0
       },
-      iconSize: {
-        type: [String, Number],
-        default: 18
+      icon: {
+        type: Object,
+        default: () => {
+          return Taro.getEnv() === 'WEB' ? StarN : StarNTaro;
+        }
       },
       activeColor: {
         type: String,
@@ -26,14 +31,6 @@ const useComponent = (touchable: Boolean = true) => {
         type: String,
         default: ''
       },
-      uncheckedIcon: {
-        type: String,
-        default: 'star-n'
-      },
-      checkedIcon: {
-        type: String,
-        default: 'star-fill-n'
-      },
       readonly: {
         type: Boolean,
         default: false
@@ -53,18 +50,11 @@ const useComponent = (touchable: Boolean = true) => {
       spacing: {
         type: [String, Number],
         default: 14
-      },
-      classPrefix: {
-        type: String,
-        default: 'nut-icon'
-      },
-      fontClassName: {
-        type: String,
-        default: 'nutui-iconfont'
       }
     },
+    components: { StarN },
     emits: ['update:modelValue', 'change'],
-    setup(props: any, { emit }: any) {
+    setup(props: any, { emit, slots }: any) {
       const rateRefs = ref<HTMLElement[]>([]);
       const classes = computed(() => {
         const prefixCls = componentName;
@@ -127,7 +117,9 @@ const useComponent = (touchable: Boolean = true) => {
         onClick,
         pxCheck,
         rateRefs,
-        refRandomId
+        refRandomId,
+        renderIcon,
+        slots
       };
     }
   };

src/packages/__VUE/rate/demo.vue

@@ -7,14 +7,11 @@
     <nut-rate allow-half v-model="state.val1"></nut-rate>
 
     <h2>{{ translate('title2') }}</h2>
-    <nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="state.val2"></nut-rate>
+    <nut-rate :icon="HeartFill" v-model="state.val2"></nut-rate>
 
     <h2>{{ translate('title3') }}</h2>
     <nut-rate :count="6" v-model="state.val3"></nut-rate>
 
-    <h2>{{ translate('title4') }}</h2>
-    <nut-rate active-color="#FFC800" v-model="state.val4"></nut-rate>
-
     <h2>{{ translate('title5') }}</h2>
     <nut-rate disabled v-model="state.val5"></nut-rate>
 
@@ -23,14 +20,12 @@
 
     <h2>{{ translate('title7') }}</h2>
     <nut-rate v-model="state.val7" @change="onChange"></nut-rate>
-
-    <h2>{{ translate('title8') }}</h2>
-    <nut-rate v-model="state.val8" icon-size="35"></nut-rate>
   </div>
 </template>
 
 <script lang="ts">
 import { reactive } from 'vue';
+import { HeartFill, StarFillN } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const { createDemo, translate } = createComponent('rate');
@@ -61,6 +56,7 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: { HeartFill, StarFillN },
   setup() {
     initTranslate();
     const state = reactive({
@@ -80,7 +76,9 @@ export default createDemo({
     return {
       state,
       onChange,
-      translate
+      translate,
+      HeartFill,
+      StarFillN
     };
   }
 });

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

@@ -8,11 +8,9 @@ Use for quick rating actions, or to showcase reviews.
 
 ``` javascript
 import { createApp } from 'vue';
-import { Rate,Icon } from '@nutui/nutui';
-
+import { Rate } from '@nutui/nutui';
 const app = createApp();
 app.use(Rate);
-app.use(Icon);
 ```
 
 ### Basic Usage
@@ -58,14 +56,16 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="value" />
+    <nut-rate :icon="HeartFill" v-model="value" />
 </template>
 <script lang="ts">
 import { ref } from 'vue';
+import { HeartFill } from '@nutui/icons-vue';
 export default {
+    components: { HeartFill },
     setup() {
         const value = ref(3);
-        return { value }
+        return { value, HeartFill }
     }
 }
 </script>
@@ -91,25 +91,6 @@ export default {
 ```
 :::
 
-### Custom color
-
-:::demo
-```html
-<template>
-    <nut-rate active-color="#FFC800" v-model="value" />
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-export default {
-    setup() {
-        const value = ref(3);
-        return { value }
-    }
-}
-</script>
-```
-:::
-
 ### disabled state
 
 :::demo
@@ -170,25 +151,6 @@ export default {
 ```
 :::
 
-### Custom size 35px
-
-:::demo
-```html
-<template>
-    <nut-rate v-model="value" icon-size="35" />
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
-export default {
-    setup() {
-        const value = ref(3);
-        return { value }
-    }
-}
-</script>
-```
-:::
 
 
 ## API
@@ -198,13 +160,8 @@ export default {
 |--------------------|----------------------------------------------------------------------------------|---------|------------------|
 | v-model            | The current number of stars, you can use v-model to bind data in both directions | Number  | -                |
 | count              | Total number of stars                                                            | Number  | 5                |
-| icon-size          | Star size                                                                        | Number  | 18               |
 | active-color       | Icon selection color                                                             | String  | #fa200c          |
 | void-color         | Icon unselected color                                                            | String  | #ccc             |
-| unchecked-icon     | Use icon (unchecked)[icon name](#/en-US/component/icon)                                          | String  | star-n           |
-| checked-icon       | Use icon (checked)[icon name](#/en-US/component/icon)                                            | String  | star-fill-n      |
-| font-class-name    | Custom icon font base class name                                                 | String  | `nutui-iconfont` |
-| class-prefix       | Custom icon class name prefix for using custom icons                             | String  | `nut-icon`       |
 | allow-half         | half star                                                                        | Boolean | false            |
 | readonly           | read-only                                                                        | Boolean | false            |
 | disabled           | whether to disable                                                               | Boolean | false            |

src/packages/__VUE/rate/doc.md

@@ -8,11 +8,9 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Rate,Icon } from '@nutui/nutui';
-
+import { Rate } from '@nutui/nutui';
 const app = createApp();
 app.use(Rate);
-app.use(Icon);
 ```
 
 
@@ -59,14 +57,16 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="value" />
+    <nut-rate :icon="HeartFill" v-model="value" />
 </template>
 <script lang="ts">
 import { ref } from 'vue';
+import { HeartFill } from '@nutui/icons-vue';
 export default {
+    components: { HeartFill },
     setup() {
         const value = ref(3);
-        return { value }
+        return { value, HeartFill }
     }
 }
 </script>
@@ -92,25 +92,6 @@ export default {
 ```
 :::
 
-### 自定义颜色
-
-:::demo
-```html
-<template>
-    <nut-rate active-color="#FFC800" v-model="value" />
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-export default {
-    setup() {
-        const value = ref(3);
-        return { value }
-    }
-}
-</script>
-```
-:::
-
 ### 禁用状态
 
 :::demo
@@ -171,25 +152,6 @@ export default {
 ```
 :::
 
-### 自定义尺寸
-
-:::demo
-```html
-<template>
-    <nut-rate v-model="value" icon-size="35" />
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
-export default {
-    setup() {
-        const value = ref(3);
-        return { value }
-    }
-}
-</script>
-```
-:::
 
 
 ## API
@@ -199,13 +161,8 @@ export default {
 |------------------------------------|-------------------------------------------|---------|------------------|
 | v-model                            | 当前 star 数，可使用 v-model 双向绑定数据 | Number  | -                |
 | count                              | star 总数                                 | Number  | 5                |
-| icon-size                          | star 大小                                 | Number  | 18               |
 | active-color                       | 图标选中颜色                              | String  | #fa200c          |
 | void-color                         | 图标未选中颜色                            | String  | #ccc             |
-| unchecked-icon                     | 使用图标(未选中)[图标名称](#/zh-CN/component/icon)        | String  | star-n           |
-| checked-icon                       | 使用图标(选中)[图标名称](#/zh-CN/component/icon)          | String  | star-fill-n      |
-| font-class-name                    | 自定义icon 字体基础类名                   | String  | `nutui-iconfont` |
-| class-prefix                       | 自定义icon 类名前缀，用于使用自定义图标   | String  | `nut-icon`       |
 | allow-half                         | 是否半星                                  | Boolean | false            |
 | readonly                           | 是否只读                                  | Boolean | false            |
 | disabled                           | 是否禁用                                  | Boolean | false            |

src/packages/__VUE/rate/template.html

@@ -1,16 +1,36 @@
 <view :class="classes" @touchstart="onTouchStart" @touchmove="onTouchMove">
-    <view class="nut-rate-item" v-for="n in Number(count)" :key="n" ref="rateRefs" :id="'rateRefs-' + refRandomId + n"
-        :style="{ marginRight: pxCheck(spacing) }">
-        <nut-icon :size="iconSize" class="nut-rate-item__icon" @click="onClick(1, n)"
-            :class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
-            :color="n <= modelValue ? activeColor : voidColor" :font-class-name="fontClassName"
-            :class-prefix="classPrefix" :name="n <= modelValue ? checkedIcon : uncheckedIcon" />
-        <nut-icon v-if="allowHalf && Number(modelValue) + 1 > n" class="nut-rate-item__icon nut-rate-item__icon--half"
-            @click="onClick(2, n)" :font-class-name="fontClassName" :class-prefix="classPrefix"
-            :color="n <= Number(modelValue) + 1 ? activeColor : voidColor" :size="iconSize" :name="checkedIcon" />
-        <nut-icon v-else-if="allowHalf && Number(modelValue) + 1 < n"
-            class="nut-rate-item__icon nut-rate-item__icon--disabled nut-rate-item__icon--half" @click="onClick(2, n)"
-            :font-class-name="fontClassName" :class-prefix="classPrefix" :color="voidColor" :size="iconSize"
-            :name="uncheckedIcon" />
+    <view
+      class="nut-rate-item"
+      v-for="n in Number(count)"
+      :key="n"
+      ref="rateRefs"
+      :id="'rateRefs-' + refRandomId + n"
+      :style="{ marginRight: pxCheck(spacing) }"
+    >
+    <view>
+      <component
+        :is="renderIcon(icon)"
+        class="nut-rate-item__icon"
+        :class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
+        :color="n <= modelValue ? activeColor : voidColor"
+        @click="onClick(1, n)"
+      ></component>
     </view>
-</view>
+      <view class="nut-rate-item__icon--half" v-if="allowHalf && Number(modelValue) + 1 > n">
+        <component
+          :is="renderIcon(icon)"
+          class="nut-rate-item__icon"
+          :color="n <= Number(modelValue) + 1 ? activeColor : voidColor"
+          @click="onClick(2, n)"
+        ></component>
+      </view>
+      <view class="nut-rate-item__icon--half" v-else-if="allowHalf && Number(modelValue) + 1 < n">
+        <component
+          :is="renderIcon(icon)"
+          class="nut-rate-item__icon nut-rate-item__icon--disabled"
+          :color="voidColor"
+          @click="onClick(2, n)"
+        ></component>
+      </view>
+    </view>
+  </view>

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

@@ -9,7 +9,6 @@ Search bar
 ```javascript
 import { createApp } from 'vue';
 import { Searchbar } from '@nutui/nutui';
-
 const app = createApp();
 app.use(Searchbar);
 ```    

src/packages/__VUE/searchbar/doc.md

@@ -9,7 +9,6 @@
 ```javascript
 import { createApp } from 'vue';
 import { Searchbar } from '@nutui/nutui';
-
 const app = createApp();
 app.use(Searchbar);
 

src/sites/mobile-taro/vue/src/dentry/pages/rate/index.vue

@@ -7,18 +7,11 @@
     <nut-rate allow-half v-model="state.val1"></nut-rate>
 
     <h2>自定义 icon </h2>
-    <nut-rate
-      checked-icon="heart-fill1"
-      unchecked-icon="heart"
-      v-model="state.val2"
-    ></nut-rate>
+    <nut-rate :icon="HeartFill" v-model="state.val2"></nut-rate>
 
     <h2>自定义数量</h2>
     <nut-rate :count="6" v-model="state.val3"></nut-rate>
 
-    <h2>自定义颜色</h2>
-    <nut-rate active-color="#FFC800" v-model="state.val4"></nut-rate>
-
     <h2>禁用状态</h2>
     <nut-rate disabled v-model="state.val5"></nut-rate>
 
@@ -27,14 +20,15 @@
 
     <h2>绑定事件</h2>
     <nut-rate v-model="state.val7" @change="onChange"></nut-rate>
-    <h2>自定义尺寸 35px</h2>
-    <nut-rate v-model="state.val8" icon-size="35"></nut-rate>
   </div>
 </template>
 
 <script>
 import { reactive, getCurrentInstance } from 'vue';
+import { HeartFill, StarFillN } from '@nutui/icons-vue-taro';
+
 export default {
+  components: { HeartFill, StarFillN },
   setup() {
     let { proxy } = getCurrentInstance();
 
@@ -54,7 +48,9 @@ export default {
     };
     return {
       state,
-      onChange
+      onChange,
+      HeartFill,
+      StarFillN
     };
   }
 };

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

@@ -26,21 +26,18 @@
       >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
     </nut-noticebar>
     <p />
-    <nut-noticebar
-      :closeMode="true"
-      right-icon="circle-close"
-      @click="hello"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
+    <nut-noticebar :closeMode="true" @click="hello" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"
       >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
     </nut-noticebar>
 
     <h2>通告栏模式--链接模式</h2>
-    <nut-noticebar
-      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
-    >
+    <nut-noticebar :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
+      <template v-slot:left-icon>
+        <img
+          src="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+          style="width: 20px; height: 20px"
+        />
+      </template>
       <a href="https://www.jd.com">京东商城</a>
     </nut-noticebar>
 
@@ -121,7 +118,7 @@
 </template>
 
 <script lang="ts">
-import { onMounted, reactive, toRefs } from 'vue';
+import { reactive, toRefs } from 'vue';
 
 export default {
   props: {},