chore: all inherit icon component API props

src/packages/__VUE/address/demo.vue

@@ -181,7 +181,7 @@ export default createDemo({
         { id: 9, name: '昌平区', title: 'C' },
         { id: 6, name: '石景山区', title: 'S' },
         { id: 3, name: '八里庄街道', title: 'B' },
-        { id: 9, name: '北苑', title: 'B' }
+        { id: 10, name: '北苑', title: 'B' }
       ],
       country: [
         { id: 3, name: '八里庄街道', title: 'B' },

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

@@ -11,6 +11,7 @@
       <view class="nut-address__header">
         <view class="arrow-back" @click="switchModule">
           <nut-icon
+            v-bind="$attrs"
             :name="backBtnIcon"
             color="#cccccc"
             v-show="type == 'exist' && privateType == 'custom' && backBtnIcon"
@@ -26,7 +27,7 @@
         </view>
 
         <view class="arrow-close" @click="handClose('cross')">
-          <nut-icon v-if="closeBtnIcon" :name="closeBtnIcon" color="#cccccc" size="18px"></nut-icon>
+          <nut-icon v-bind="$attrs" v-if="closeBtnIcon" :name="closeBtnIcon" color="#cccccc" size="18px"></nut-icon>
         </view>
       </view>
 
@@ -56,6 +57,7 @@
               <nut-icon
                 class="region-item-icon"
                 type="self"
+                v-bind="$attrs"
                 :name="selectedIcon"
                 size="13px"
                 v-if="selectedRegion[tabName[tabIndex]].id == item.id"
@@ -102,6 +104,7 @@
               <nut-icon
                 class="exist-item-icon"
                 type="self"
+                v-bind="$attrs"
                 :name="item.selectedAddress ? selectedIcon : defaultIcon"
                 size="13px"
               ></nut-icon>

src/packages/__VUE/address/index.vue

@@ -13,6 +13,7 @@
       <view class="nut-address__header">
         <view class="arrow-back" @click="switchModule">
           <nut-icon
+            v-bind="$attrs"
             :name="backBtnIcon"
             color="#cccccc"
             v-show="type == 'exist' && privateType == 'custom' && backBtnIcon"
@@ -28,7 +29,7 @@
         </view>
 
         <view class="arrow-close" @click="handClose('cross')">
-          <nut-icon v-if="closeBtnIcon" :name="closeBtnIcon" color="#cccccc" size="18px"></nut-icon>
+          <nut-icon v-bind="$attrs" v-if="closeBtnIcon" :name="closeBtnIcon" color="#cccccc" size="18px"></nut-icon>
         </view>
       </view>
 
@@ -60,6 +61,7 @@
               <nut-icon
                 class="region-item-icon"
                 type="self"
+                v-bind="$attrs"
                 :name="selectedIcon"
                 size="13px"
                 v-if="selectedRegion[tabName[tabIndex]].id == item.id"
@@ -107,6 +109,7 @@
               <nut-icon
                 class="exist-item-icon"
                 type="self"
+                v-bind="$attrs"
                 :name="item.selectedAddress ? selectedIcon : defaultIcon"
                 size="13px"
               ></nut-icon>

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

@@ -11,7 +11,7 @@
         <img :src="url" :alt="alt" @error="onError" />
       </template>
       <template v-else-if="icon">
-        <nut-icon class="icon" :name="iconStyles"></nut-icon>
+        <nut-icon v-bind="$attrs" class="icon" :name="iconStyles"></nut-icon>
       </template>
       <view class="text" v-if="isShowText">
         <slot></slot>

src/packages/__VUE/avatar/index.vue

@@ -11,7 +11,7 @@
         <img :src="url" :alt="alt" @error="onError" />
       </template>
       <template v-else-if="icon">
-        <nut-icon class="icon" :name="iconStyles"></nut-icon>
+        <nut-icon v-bind="$attrs" class="icon" :name="iconStyles"></nut-icon>
       </template>
       <view class="text" v-if="isShowText">
         <slot></slot>

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

@@ -5,6 +5,7 @@
       <nut-icon
         v-if="icon && !loading"
         :name="icon"
+        v-bind="$attrs"
         :class-prefix="iconClassPrefix"
         :font-class-name="iconFontClassName"
       ></nut-icon>

src/packages/__VUE/button/index.vue

@@ -5,6 +5,7 @@
       <nut-icon
         v-if="icon && !loading"
         :name="icon"
+        v-bind="$attrs"
         :class-prefix="iconClassPrefix"
         :font-class-name="iconFontClassName"
       ></nut-icon>

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

@@ -87,7 +87,3 @@ export default create({
   }
 });
 </script>
-
-<style lang="scss">
-@import 'index.scss';
-</style>

src/packages/__VUE/categorypane/index.vue

@@ -87,7 +87,3 @@ export default create({
   }
 });
 </script>
-
-<style lang="scss">
-@import 'index.scss';
-</style>

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

@@ -199,20 +199,23 @@ You can center the left and right contents of the cell vertically through the 'c
 
 ### Cell Prop
 
-| Attribute       | Description                                                                                              | Type             | Default |
-|-----------------|----------------------------------------------------------------------------------------------------------|------------------|---------|
-| title           | Title                                                                                                    | String           | -       |
-| sub-title       | Subtitle                                                                                                 | String           | -       |
-| desc            | Description                                                                                              | String           | -       |
-| desc-text-align | Right description text alignment [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp) | String           | right   |
-| is-link         | Whether to show the right arrow and turn on click feedback                                               | Boolean          | false   |
-| icon            | Left [icon name](#/icon) or image url                                                                    | String           | -       |
-| round-radius    | Corner radius                                                                                            | Number           | 6px     |
-| url             | Link URL                                                                                                 | String           | -       |
-| to              | Target route of the link, same as to of vue-router                                                       | String ｜ Object | -       |
-| replace         | If true, the navigation will not leave a history record                                                  | Boolean          | false   |
-| center`v3.1.21` | Whether to center content vertically                                                                     | Boolean          | false   |
-| size`v3.1.22`   | Size, can be set to `large`                                                                              | String           | ''      |
+| Attribute               | Description                                                                                              | Type             | Default          |
+|-------------------------|----------------------------------------------------------------------------------------------------------|------------------|------------------|
+| title                   | Title                                                                                                    | String           | -                |
+| sub-title               | Subtitle                                                                                                 | String           | -                |
+| desc                    | Description                                                                                              | String           | -                |
+| desc-text-align         | Right description text alignment [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp) | String           | right            |
+| is-link                 | Whether to show the right arrow and turn on click feedback                                               | Boolean          | false            |
+| icon                    | Left [icon name](#/icon) or image url                                                                    | String           | -                |
+| right-icon`v3.2.1`      | Right [icon name](#/icon) or image url                                                                   | String           | right            |
+| round-radius            | Corner radius                                                                                            | Number           | 6px              |
+| url                     | Link URL                                                                                                 | String           | -                |
+| to                      | Target route of the link, same as to of vue-router                                                       | String ｜ Object | -                |
+| replace                 | If true, the navigation will not leave a history record                                                  | Boolean          | false            |
+| center`v3.1.21`         | Whether to center content vertically                                                                     | Boolean          | false            |
+| size`v3.1.22`           | Size, can be set to `large`                                                                              | String           | ''               |
+| font-class-name`v3.2.1` | Custom icon font base class name                                                                         | String           | `nutui-iconfont` |
+| class-prefix`v3.2.1`    | Custom icon class name prefix for using custom icons                                                     | String           | `nut-icon`       |
 
 ### Cell Event
 

src/packages/__VUE/cell/doc.md

@@ -202,20 +202,23 @@ app.use(Cell).use(CellGroup).use(Icon);
 
 ### Cell Prop
 
-| 字段                   | 说明                                                                                           | 类型             | 默认值 |
-|------------------------|------------------------------------------------------------------------------------------------|------------------|--------|
-| title                  | 标题名称                                                                                       | String           | -      |
-| sub-title              | 左侧副标题                                                                                     | String           | -      |
-| desc                   | 右侧描述                                                                                       | String           | -      |
-| desc-text-align        | 右侧描述文本对齐方式 [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp)   | String           | right  |
-| is-link                | 是否展示右侧箭头并开启点击反馈                                                                 | Boolean          | false  |
-| icon                   | 左侧 [图标名称](#/icon) 或图片链接                                                             | String           | -      |
-| round-radius           | 圆角半径                                                                                       | Number           | 6px    |
-| url `小程序不支持`     | 点击后跳转的链接地址                                                                           | String           | -      |
-| to `小程序不支持`      | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String ｜ Object | -      |
-| replace `小程序不支持` | 是否在跳转时替换当前页面历史                                                                   | Boolean          | false  |
-| center`v3.1.21`        | 是否使内容垂直居中                                                                             | Boolean          | false  |
-| size`v3.1.22`        | 单元格大小，可选值为 `large`                                                                             | String          | -  |
+| 字段                    | 说明                                                                                           | 类型             | 默认值           |
+|-------------------------|------------------------------------------------------------------------------------------------|------------------|------------------|
+| title                   | 标题名称                                                                                       | String           | -                |
+| sub-title               | 左侧副标题                                                                                     | String           | -                |
+| desc                    | 右侧描述                                                                                       | String           | -                |
+| desc-text-align         | 右侧描述文本对齐方式 [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp)   | String           | right            |
+| is-link                 | 是否展示右侧箭头并开启点击反馈                                                                 | Boolean          | false            |
+| icon                    | 左侧 [图标名称](#/icon) 或图片链接                                                             | String           | -                |
+| right-icon`v3.2.1`      | 右侧箭头 [图标名称](#/icon) 或图片链接                                                         | String           | right            |
+| round-radius            | 圆角半径                                                                                       | Number           | 6px              |
+| url `小程序不支持`      | 点击后跳转的链接地址                                                                           | String           | -                |
+| to `小程序不支持`       | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String ｜ Object | -                |
+| replace `小程序不支持`  | 是否在跳转时替换当前页面历史                                                                   | Boolean          | false            |
+| center`v3.1.21`         | 是否使内容垂直居中                                                                             | Boolean          | false            |
+| size`v3.1.22`           | 单元格大小，可选值为 `large`                                                                   | String           | -                |
+| font-class-name`v3.2.1` | 自定义icon 字体基础类名                                                                        | string           | `nutui-iconfont` |
+| class-prefix`v3.2.1`    | 自定义icon 类名前缀，用于使用自定义图标                                                        | string           | `nut-icon`       |
 
 
 ### Cell Event

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

@@ -18,6 +18,7 @@ export default create({
     roundRadius: { type: [String, Number], default: '' },
     url: { type: String, default: '' },
     icon: { type: String, default: '' },
+    rightIcon: { type: String, default: 'right' },
     center: { type: Boolean, default: false },
     size: { type: String, default: '' } // large
   },

src/packages/__VUE/cell/index.vue

@@ -18,6 +18,7 @@ export default create({
     roundRadius: { type: [String, Number], default: '' },
     url: { type: String, default: '' },
     icon: { type: String, default: '' },
+    rightIcon: { type: String, default: 'right' },
     center: { type: Boolean, default: false },
     size: { type: String, default: '' } // large
   },

src/packages/__VUE/cell/template.html

@@ -2,7 +2,7 @@
     <slot>
         <view class="nut-cell__icon" v-if="icon || $slots.icon">
             <slot name="icon">
-                <nut-icon v-if="icon" class="icon" :name="icon"></nut-icon>
+                <nut-icon v-bind="$attrs" v-if="icon" class="icon" :name="icon"></nut-icon>
             </slot>
         </view>
         <view class="nut-cell__title" v-if="title || subTitle || $slots.title">
@@ -23,7 +23,7 @@
             :class="{ 'nut-cell__value--alone': (!title && !subTitle && !$slots.title) }"
             :style="{ 'text-align': descTextAlign }">{{ desc }}</view>
         <slot name="link">
-            <nut-icon v-if="isLink || to" class="nut-cell__link" name="right"></nut-icon>
+            <nut-icon v-if="isLink || to" class="nut-cell__link" v-bind="$attrs" :name="rightIcon"></nut-icon>
         </slot>
     </slot>
 </view>

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

@@ -10,6 +10,7 @@
             <nut-icon
               v-if="titleIcon"
               :name="titleIcon"
+              v-bind="$attrs"
               :size="titleIconSize"
               :color="titleIconColor"
               :class="['collapse-title-icon', titleIconPosition == 'left' ? 'titleIconLeft' : 'titleIconRight']"
@@ -30,6 +31,7 @@
       <nut-icon
         v-if="icon"
         :name="icon"
+        v-bind="$attrs"
         :size="iconSize"
         :color="iconColor"
         :class="['collapse-icon', { 'col-expanded': openExpanded }, { 'collapse-icon-disabled': disabled }]"

src/packages/__VUE/collapseitem/index.vue

@@ -10,6 +10,7 @@
             <nut-icon
               v-if="titleIcon"
               :name="titleIcon"
+              v-bind="$attrs"
               :size="titleIconSize"
               :color="titleIconColor"
               :class="[titleIconPosition == 'left' ? 'titleIconLeft' : 'titleIconRight']"
@@ -28,6 +29,7 @@
       <nut-icon
         v-if="icon"
         :name="icon"
+        v-bind="$attrs"
         :size="iconSize"
         :color="iconColor"
         :class="['collapse-icon', { 'col-expanded': openExpanded }, { 'collapse-icon-disabled': disabled }]"

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

@@ -6,7 +6,13 @@
       </template>
       <template v-else>
         <slot v-if="$slots.icon" name="icon"></slot>
-        <nut-icon v-else :name="iconProps.name" :size="iconProps.size" :color="iconProps.color"></nut-icon>
+        <nut-icon
+          v-else
+          :name="iconProps.name"
+          v-bind="$attrs"
+          :size="iconProps.size"
+          :color="iconProps.color"
+        ></nut-icon>
 
         <slot v-if="$slots.text" name="text"></slot>
         <view v-else class="nut-grid-item__text">{{ text }}</view>

src/packages/__VUE/griditem/index.vue

@@ -6,7 +6,13 @@
       </template>
       <template v-else>
         <slot v-if="$slots.icon" name="icon"></slot>
-        <nut-icon v-else :name="iconProps.name" :size="iconProps.size" :color="iconProps.color"></nut-icon>
+        <nut-icon
+          v-else
+          :name="iconProps.name"
+          v-bind="$attrs"
+          :size="iconProps.size"
+          :color="iconProps.color"
+        ></nut-icon>
 
         <slot v-if="$slots.text" name="text"></slot>
         <view v-else class="nut-grid-item__text">{{ text }}</view>

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

@@ -25,7 +25,7 @@
     <!-- <view class="nut-imagepreview-index"> {{ active }} / {{ images.length + videos.length }} </view> -->
     <view class="nut-imagepreview-index" v-if="showIndex"> {{ active }} / {{ images.length }} </view>
     <view class="nut-imagepreview-close-icon" @click="handleCloseIcon" :style="styles" v-if="closeable"
-      ><nut-icon :name="closeIcon" color="#ffffff"></nut-icon
+      ><nut-icon :name="closeIcon" v-bind="$attrs" color="#ffffff"></nut-icon
     ></view>
   </nut-popup>
 </template>

src/packages/__VUE/imagepreview/index.vue

@@ -49,7 +49,7 @@
     </view>
     <view class="nut-imagepreview-index" v-if="showIndex"> {{ active }} / {{ images.length + videos.length }} </view>
     <view class="nut-imagepreview-close-icon" @click="handleCloseIcon" :style="styles" v-if="closeable"
-      ><nut-icon :name="closeIcon" color="#ffffff"></nut-icon
+      ><nut-icon :name="closeIcon" v-bind="$attrs" color="#ffffff"></nut-icon
     ></view>
   </nut-popup>
 </template>

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

@@ -12,7 +12,7 @@
   >
     <view class="nut-infinite-top" :style="getStyle">
       <view class="top-box" id="refreshTop">
-        <nut-icon class="top-img" :name="pullIcon"></nut-icon>
+        <nut-icon class="top-img" v-bind="$attrs" :name="pullIcon"></nut-icon>
         <view class="top-text">{{ pullTxt || translate('pullTxt') }}</view>
       </view>
     </view>
@@ -24,7 +24,7 @@
     <view class="nut-infinite-bottom">
       <template v-if="isInfiniting">
         <view class="bottom-box">
-          <nut-icon class="bottom-img" :name="loadIcon"></nut-icon>
+          <nut-icon class="bottom-img" v-bind="$attrs" :name="loadIcon"></nut-icon>
           <view class="bottom-text">{{ loadTxt || translate('loading') }}</view>
         </view>
       </template>

src/packages/__VUE/infiniteloading/index.vue

@@ -2,7 +2,7 @@
   <view :class="classes" ref="scroller" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
     <view class="nut-infinite-top" ref="refreshTop" :style="getStyle">
       <view class="top-box">
-        <nut-icon class="top-img" :name="pullIcon"></nut-icon>
+        <nut-icon class="top-img" v-bind="$attrs" :name="pullIcon"></nut-icon>
         <view class="top-text">{{ pullTxt || translate('pullTxt') }}</view>
       </view>
     </view>
@@ -15,7 +15,7 @@
       <template v-if="isInfiniting">
         <view class="bottom-box">
           <template v-if="!slots.loading">
-            <nut-icon class="bottom-img" :name="loadIcon"></nut-icon>
+            <nut-icon class="bottom-img" v-bind="$attrs" :name="loadIcon"></nut-icon>
             <view class="bottom-text">{{ loadTxt || translate('loading') }}</view>
           </template>
           <slot name="loading" v-else></slot>

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

@@ -23,7 +23,7 @@
     </template>
     <template v-else>
       <view v-if="leftIcon && leftIcon.length > 0" class="nut-input-left-icon" @click="onClickLeftIcon">
-        <nut-icon :name="leftIcon" :size="leftIconSize"></nut-icon>
+        <nut-icon :name="leftIcon" v-bind="$attrs" :size="leftIconSize"></nut-icon>
       </view>
       <view
         v-if="label"
@@ -88,13 +88,14 @@
               v-if="clearable && !readonly"
               v-show="active && modelValue.length > 0"
               :name="clearIcon"
+              v-bind="$attrs"
               :size="clearSize"
               @click="clear"
             >
             </nut-icon>
           </view>
           <view v-if="rightIcon && rightIcon.length > 0" class="nut-input-right-icon" @click="onClickRightIcon">
-            <nut-icon :name="rightIcon" :size="rightIconSize"></nut-icon>
+            <nut-icon :name="rightIcon" v-bind="$attrs" :size="rightIconSize"></nut-icon>
           </view>
           <slot v-if="$slots.button" name="button" class="nut-input-button"></slot>
         </view>

src/packages/__VUE/input/index.vue

@@ -23,7 +23,7 @@
     </template>
     <template v-else>
       <view v-if="leftIcon && leftIcon.length > 0" class="nut-input-left-icon" @click="onClickLeftIcon">
-        <nut-icon :name="leftIcon" :size="leftIconSize"></nut-icon>
+        <nut-icon :name="leftIcon" v-bind="$attrs" :size="leftIconSize"></nut-icon>
       </view>
       <view
         v-if="label"
@@ -84,13 +84,14 @@
               v-if="clearable && !readonly"
               v-show="active && modelValue.length > 0"
               :name="clearIcon"
+              v-bind="$attrs"
               :size="clearSize"
               @click="clear"
             >
             </nut-icon>
           </view>
           <view v-if="rightIcon && rightIcon.length > 0" class="nut-input-right-icon" @click="onClickRightIcon">
-            <nut-icon :name="rightIcon" :size="rightIconSize"></nut-icon>
+            <nut-icon :name="rightIcon" v-bind="$attrs" :size="rightIconSize"></nut-icon>
           </view>
           <slot v-if="$slots.button" name="button" class="nut-input-button"></slot>
         </view>

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

@@ -395,20 +395,23 @@ export default {
 | scroll-fixed `v3.1.22`           | Whether to fixed when window is scrolled, fixed position can be set | Boolean、String、Number | false   |
 | title-class `v3.1.22`            | Custome title class                                                 | String                  | -       |
 | lock-scroll `v3.1.22`            | Whether the background is locked                                    | Boolean                 | true    |
+| title-icon `3.2.1`               | Custome title icon                                                  | String                  | -       |
 
 ### MenuItem Props
 
-| Attribute                     | Description                          | Type    | Default        |
-|-------------------------------|--------------------------------------|---------|----------------|
-| title                         | Item title                           | String  | 当前选中项文字 |
-| options                       | Options                              | Array   | -              |
-| disabled                      | Whether to disable dropdown item     | Boolean | false          |
-| cols                          | Display how many options in one line | Number  | 1              |
-| title-icon                    | Custome title icon                   | String  | -              |
+| Attribute | Description                          | Type    | Default        |
+|-----------|--------------------------------------|---------|----------------|
+| title     | Item title                           | String  | 当前选中项文字 |
+| options   | Options                              | Array   | -              |
+| disabled  | Whether to disable dropdown item     | Boolean | false          |
+| cols      | Display how many options in one line | Number  | 1              |
+
 | option-icon `v3.1.22`         | Custome option icon                  | String  | 'Check'        |
 | direction `v3.1.22`           | Expand direction, can be set to up   | String  | 'down'         |
 | active-title-class `v3.2.0`   | Active custome title class           | String  | -              |
 | inactive-title-class `v3.2.0` | Inactive custome title class         | String  | -              |
+| font-class-name`v3.2.1` | Custom icon font base class name                                                                         | String           | `nutui-iconfont` |
+| class-prefix`v3.2.1`    | Custom icon class name prefix for using custom icons                                                     | String           | `nut-icon`       |
 
 
 

src/packages/__VUE/menu/doc.md

@@ -397,20 +397,23 @@ export default {
 | scroll-fixed `v3.1.22`           | 滚动后是否固定，可设置固定位置 | Boolean、String、Number | false   |
 | title-class `v3.1.22`            | 自定义标题样式类               | String                  | -       |
 | lock-scroll `v3.1.22`            | 背景是否锁定                   | Boolean                 | true    |
+| title-icon `3.2.1`               | 自定义标题图标                 | String                  | -       |
+
 
 ### MenuItem Props
 
-| 参数                          | 说明                           | 类型    | 默认值         |
-|-------------------------------|--------------------------------|---------|----------------|
-| title                         | 菜单项标题                     | String  | 当前选中项文字 |
-| options                       | 选项数组                       | Array   | -              |
-| disabled                      | 是否禁用菜单                   | Boolean | false          |
-| cols                          | 可以设置一行展示多少列 options | Number  | 1              |
-| title-icon                    | 自定义标题图标                 | String  | -              |
-| option-icon `v3.1.22`         | 自定义选项图标                 | String  | 'Check'        |
-| direction  `v3.1.22`          | 菜单展开方向，可选值为up       | String  | 'down'         |
-| active-title-class `v3.2.0`   | 选项选中时自定义标题样式类     | String  | -              |
-| inactive-title-class `v3.2.0` | 选项非选中时自定义标题样式类   | String  | -              |
+| 参数                          | 说明                                    | 类型    | 默认值           |
+|-------------------------------|-----------------------------------------|---------|------------------|
+| title                         | 菜单项标题                              | String  | 当前选中项文字   |
+| options                       | 选项数组                                | Array   | -                |
+| disabled                      | 是否禁用菜单                            | Boolean | false            |
+| cols                          | 可以设置一行展示多少列 options          | Number  | 1                |
+| option-icon `v3.1.22`         | 自定义选项图标                          | String  | 'Check'          |
+| direction  `v3.1.22`          | 菜单展开方向，可选值为up                | String  | 'down'           |
+| active-title-class `v3.2.0`   | 选项选中时自定义标题样式类              | String  | -                |
+| inactive-title-class `v3.2.0` | 选项非选中时自定义标题样式类            | String  | -                |
+| font-class-name`v3.2.1`       | 自定义icon 字体基础类名                 | string  | `nutui-iconfont` |
+| class-prefix`v3.2.1`          | 自定义icon 类名前缀，用于使用自定义图标 | string  | `nut-icon`       |
 
 ### MenuItem Events
 

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

@@ -11,7 +11,8 @@
           <view class="nut-menu__title" :class="getClasses(item.state.showPopup)">
             <view class="nut-menu__title-text">{{ item.renderTitle() }}</view>
             <nut-icon
-              :name="item.titleIcon || (direction === 'up' ? 'arrow-up' : 'down-arrow')"
+              v-bind="$attrs"
+              :name="titleIcon || (direction === 'up' ? 'arrow-up' : 'down-arrow')"
               size="10"
               class="nut-menu__title-icon"
             ></nut-icon>
@@ -45,6 +46,8 @@ export default create({
       type: [Number, String],
       default: 0.3
     },
+    titleIcon: String,
+
     closeOnClickOverlay: {
       type: Boolean,
       default: true

src/packages/__VUE/menu/index.vue

@@ -11,7 +11,8 @@
           <view class="nut-menu__title" :class="getClasses(item.state.showPopup)">
             <view class="nut-menu__title-text">{{ item.renderTitle() }}</view>
             <nut-icon
-              :name="item.titleIcon || (direction === 'up' ? 'arrow-up' : 'down-arrow')"
+              v-bind="$attrs"
+              :name="titleIcon || (direction === 'up' ? 'arrow-up' : 'down-arrow')"
               size="10"
               class="nut-menu__title-icon"
             ></nut-icon>
@@ -45,6 +46,8 @@ export default create({
       type: [Number, String],
       default: 0
     },
+    titleIcon: String,
+
     closeOnClickOverlay: {
       type: Boolean,
       default: true

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

@@ -39,6 +39,7 @@
             :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }"
             v-if="option.value === modelValue"
             :name="optionIcon"
+            v-bind="$attrs"
             :color="parent.props.activeColor"
           ></nut-icon>
           <view
@@ -75,7 +76,6 @@ export default create({
       type: Number,
       default: 1
     },
-    titleIcon: String,
     activeTitleClass: String,
     inactiveTitleClass: String,
     optionIcon: {

src/packages/__VUE/menuitem/index.vue

@@ -37,6 +37,7 @@
           @click="onClick(option)"
         >
           <nut-icon
+            v-bind="$attrs"
             :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }"
             v-if="option.value === modelValue"
             :name="optionIcon"
@@ -76,7 +77,6 @@ export default create({
       type: Number,
       default: 1
     },
-    titleIcon: String,
     activeTitleClass: String,
     inactiveTitleClass: String,
     optionIcon: {

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

@@ -8,7 +8,7 @@
       </view>
       <view class="nut-navbar__title">
         <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
-        <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
+        <nut-icon v-if="titIcon" class="icon" v-bind="$attrs" :name="titIcon" @click="handleCenterIcon"></nut-icon>
         <slot name="content"></slot>
       </view>
       <view class="nut-navbar__right" @click="handleRight">
@@ -25,7 +25,7 @@
     </view>
     <view class="nut-navbar__title">
       <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
-      <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
+      <nut-icon v-if="titIcon" class="icon" :name="titIcon" v-bind="$attrs" @click="handleCenterIcon"></nut-icon>
       <slot name="content"></slot>
     </view>
     <view class="nut-navbar__right" @click="handleRight">

src/packages/__VUE/navbar/index.vue

@@ -8,7 +8,7 @@
       </view>
       <view class="nut-navbar__title">
         <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
-        <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
+        <nut-icon v-if="titIcon" class="icon" v-bind="$attrs" :name="titIcon" @click="handleCenterIcon"></nut-icon>
         <slot name="content"></slot>
       </view>
       <view class="nut-navbar__right" @click="handleRight">
@@ -25,7 +25,7 @@
     </view>
     <view class="nut-navbar__title">
       <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
-      <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
+      <nut-icon v-if="titIcon" class="icon" v-bind="$attrs" :name="titIcon" @click="handleCenterIcon"></nut-icon>
       <slot name="content"></slot>
     </view>
     <view class="nut-navbar__right" @click="handleRight">

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

@@ -24,7 +24,9 @@
         </view>
       </view>
       <view v-if="closeMode || rightIcon" class="right-icon" @click.stop="onClickIcon">
-        <slot name="right-icon"> <nut-icon :name="rightIcon ? rightIcon : 'close'" :color="color"></nut-icon></slot>
+        <slot name="right-icon">
+          <nut-icon v-bind="$attrs" :name="rightIcon ? rightIcon : 'close'" :color="color"></nut-icon
+        ></slot>
       </view>
     </view>
 

src/packages/__VUE/noticebar/index.vue

@@ -23,7 +23,9 @@
         </view>
       </view>
       <view v-if="closeMode || rightIcon" class="right-icon" @click.stop="onClickIcon">
-        <slot name="right-icon"> <nut-icon :name="rightIcon ? rightIcon : 'close'" :color="color"></nut-icon></slot>
+        <slot name="right-icon">
+          <nut-icon v-bind="$attrs" :name="rightIcon ? rightIcon : 'close'" :color="color"></nut-icon
+        ></slot>
       </view>
     </view>
 

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

@@ -14,7 +14,7 @@
             :class="{ 'popover-menu-item': true, disabled: item.disabled }"
             @click.stop="chooseItem(item, index)"
           >
-            <slot v-if="item.icon"> <nut-icon class="item-img" :name="item.icon"></nut-icon></slot>
+            <slot v-if="item.icon"> <nut-icon v-bind="$attrs" class="item-img" :name="item.icon"></nut-icon></slot>
             <view class="popover-menu-name">{{ item.name }}</view>
           </view>
         </view>

src/packages/__VUE/popover/index.vue

@@ -22,7 +22,7 @@
         :class="[item.className, { 'popover-menu-item': true, disabled: item.disabled }]"
         @click.stop="chooseItem(item, index)"
       >
-        <slot v-if="item.icon"> <nut-icon class="item-img" :name="item.icon"></nut-icon></slot>
+        <slot v-if="item.icon"> <nut-icon v-bind="$attrs" class="item-img" :name="item.icon"></nut-icon></slot>
         <view class="popover-menu-name">{{ item.name }}</view>
       </view>
     </view>

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

@@ -20,7 +20,7 @@
           class="nutui-popup__close-icon"
           :class="'nutui-popup__close-icon--' + closeIconPosition"
         >
-          <nut-icon :name="closeIcon" size="12px" />
+          <nut-icon v-bind="$attrs" :name="closeIcon" size="12px" />
         </view>
       </view>
     </Transition>

src/packages/__VUE/popup/index.vue

@@ -20,7 +20,7 @@
           class="nutui-popup__close-icon"
           :class="'nutui-popup__close-icon--' + closeIconPosition"
         >
-          <nut-icon :name="closeIcon" size="12px" />
+          <nut-icon v-bind="$attrs" :name="closeIcon" size="12px" />
         </view>
       </view>
     </Transition>

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

@@ -40,7 +40,7 @@
         <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
       </template>
       <template v-else-if="status == 'icon'">
-        <nut-icon size="16px" :name="iconName" :color="iconColor"></nut-icon>
+        <nut-icon v-bind="$attrs" size="16px" :name="iconName" :color="iconColor"></nut-icon>
       </template>
     </div>
   </div>

src/packages/__VUE/progress/index.vue

@@ -39,7 +39,7 @@
         <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }}</span>
       </template>
       <template v-else-if="status == 'icon'">
-        <nut-icon size="16px" :name="iconName" :color="iconColor"></nut-icon>
+        <nut-icon v-bind="$attrs" size="16px" :name="iconName" :color="iconColor"></nut-icon>
       </template>
     </div>
   </div>

src/packages/__VUE/step/index.vue

@@ -4,7 +4,7 @@
       <view class="nut-step-line"></view>
       <view class="nut-step-icon" :class="[!dot ? (icon ? 'is-icon' : 'is-text') : '']">
         <template v-if="icon">
-          <nut-icon class="nut-step-icon-inner" :color="iconColor" :name="icon" :size="size" />
+          <nut-icon class="nut-step-icon-inner" v-bind="$attrs" :color="iconColor" :name="icon" :size="size" />
         </template>
         <template v-else-if="dot"></template>
         <template v-else>

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

@@ -1,7 +1,7 @@
 <template>
   <view :class="classes" @click="onClick" :style="style">
     <view class="switch-button">
-      <nut-icon v-if="loading" :name="name" :size="size" :color="color"></nut-icon>
+      <nut-icon v-if="loading" v-bind="$attrs" :name="name" :size="size" :color="color"></nut-icon>
       <!-- <view v-show="!modelValue" class="close-line"></view> -->
       <template v-if="activeText">
         <view class="nut-switch-label open" v-show="modelValue">{{ activeText }}</view>

src/packages/__VUE/switch/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view :class="classes" @click="onClick" :style="style">
     <view class="switch-button">
-      <nut-icon v-if="loading" :name="name" :size="size" :color="color"></nut-icon>
+      <nut-icon v-if="loading" :name="name" v-bind="$attrs" :size="size" :color="color"></nut-icon>
       <!-- <view v-show="!modelValue" class="close-line"></view> -->
       <template v-if="activeText">
         <view class="nut-switch-label open" v-show="modelValue">{{ activeText }}</view>

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

@@ -21,7 +21,7 @@
           }"
         >
           <view v-if="hasIcon" class="nut-toast-icon-wrapper">
-            <nut-icon size="20" color="#ffffff" :name="iconName"></nut-icon>
+            <nut-icon size="20" color="#ffffff" v-bind="$attrs" :name="iconName"></nut-icon>
           </view>
           <div v-if="title" class="nut-toast-title">
             {{ title }}

src/packages/__VUE/toast/index.vue

@@ -17,7 +17,7 @@
         }"
       >
         <view v-if="hasIcon" class="nut-toast-icon-wrapper">
-          <nut-icon :size="iconSize" color="#ffffff" :name="icon"></nut-icon>
+          <nut-icon :size="iconSize" v-bind="$attrs" color="#ffffff" :name="icon"></nut-icon>
         </view>
         <div v-if="title" class="nut-toast-title">
           {{ title }}

src/packages/__VUE/uploader/__tests__/__snapshots__/index.spec.ts.snap

@@ -3,6 +3,6 @@
 exports[`render preview image 1`] = `
 "<view class=\\"nut-uploader\\" modelvalue=\\"[object Object],[object Object],[object Object]\\">
   <!--v-if-->
-  <view class=\\"nut-uploader__upload picture\\"><i class=\\"nutui-iconfont nut-icon nut-icon-photograph\\" style=\\"color: rgb(128, 128, 128);\\" src=\\"\\"></i><input class=\\"nut-uploader__input\\" type=\\"file\\" accept=\\"*\\" name=\\"file\\"></view>
+  <view class=\\"nut-uploader__upload picture\\"><i class=\\"nutui-iconfont nut-icon nut-icon-photograph\\" style=\\"color: rgb(128, 128, 128);\\" src=\\"\\" modelvalue=\\"[object Object],[object Object],[object Object]\\"></i><input class=\\"nut-uploader__input\\" type=\\"file\\" accept=\\"*\\" name=\\"file\\"></view>
 </view>"
 `;

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

@@ -55,7 +55,7 @@
       :class="[listType]"
       v-if="listType == 'picture' && !$slots.default && maximum - fileList.length"
     >
-      <nut-icon :size="uploadIconSize" color="#808080" :name="uploadIcon"></nut-icon>
+      <nut-icon v-bind="$attrs" :size="uploadIconSize" color="#808080" :name="uploadIcon"></nut-icon>
       <nut-button class="nut-uploader__input" @click="chooseImage" />
     </view>
   </view>

src/packages/__VUE/uploader/index.vue

@@ -75,7 +75,7 @@
       :class="[listType]"
       v-if="listType == 'picture' && !$slots.default && maximum - fileList.length"
     >
-      <nut-icon :size="uploadIconSize" color="#808080" :name="uploadIcon"></nut-icon>
+      <nut-icon v-bind="$attrs" :size="uploadIconSize" color="#808080" :name="uploadIcon"></nut-icon>
       <input
         class="nut-uploader__input"
         v-if="capture"

src/sites/mobile-taro/vue/src/business/pages/address/index.vue

@@ -145,7 +145,7 @@ export default defineComponent({
 
         { id: 6, name: '石景山区', title: 'S' },
         { id: 3, name: '八里庄街道', title: 'B' },
-        { id: 9, name: '北苑', title: 'B' }
+        { id: 10, name: '北苑', title: 'B' }
       ],
       country: [
         { id: 3, name: '八里庄街道', title: 'B' },