chore: popup、checkbox、progress、 icons (#1953)

* feat: 处理组件tsc问题

* feat: popup icons-vue

* feat: 删除注释

* feat: 删除多余注释

* feat: popup icons-vue

* feat: popup taro demo修改icon

* feat: popup md 修改

* feat: navbar icon替换

* feat: progress icon替换

* feat: navbar 修改titicon参数名

* feat: navbar md titicon

src/packages/__VUE/navbar/__test__/navbar.spec.ts

@@ -1,14 +1,6 @@
 import { mount, config } from '@vue/test-utils';
 import NavBar from '../index.vue';
 
-import NutIcon from '../../icon/index.vue';
-
-beforeAll(() => {
-  config.global.components = {
-    NutIcon
-  };
-});
-
 afterAll(() => {
   config.global.components = {};
 });

src/packages/__VUE/navbar/demo.vue

@@ -6,7 +6,7 @@
         <div>{{ translate('back') }}</div>
       </template>
       <template #right>
-        <nut-icon class="right" name="share-n"></nut-icon>
+        <ShareN width="16px"></ShareN>
       </template>
     </nut-navbar>
 
@@ -25,11 +25,14 @@
       @on-click-icon="icon"
       @on-click-right="rightClick"
       :title="translate('navTitle3')"
-      titIcon="cart2"
+      :titleIcon="true"
       :desc="translate('desc2')"
     >
+      <template #titleIcon>
+        <Cart2 width="16px"></Cart2>
+      </template>
       <template #right>
-        <nut-icon class="right" name="more-x"></nut-icon>
+        <MoreX class="right" width="16px"></MoreX>
       </template>
     </nut-navbar>
 
@@ -43,7 +46,7 @@
       </template>
 
       <template #right>
-        <nut-icon class="right" name="more-x"></nut-icon>
+        <MoreX class="right" width="16px"></MoreX>
       </template>
     </nut-navbar>
 
@@ -56,12 +59,8 @@
           <nut-tab-pane :title="translate('tab3')"> </nut-tab-pane>
         </nut-tabs>
       </template>
-      <template #icons>
-        <nut-icon class="icon" name="share"></nut-icon>
-      </template>
-
       <template #right>
-        <nut-icon class="right" name="horizontal-n"></nut-icon>
+        <HorizontalN class="right" width="16px"></HorizontalN>
       </template>
     </nut-navbar>
   </div>
@@ -72,6 +71,7 @@ import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('navbar');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { ShareN, Cart2, MoreX, HorizontalN } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -104,7 +104,8 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
-  setup({}) {
+  components: { ShareN, Cart2, MoreX, HorizontalN },
+  setup() {
     initTranslate();
     const tab1value = ref(0);
     const tab2value = ref(0);

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

@@ -9,11 +9,10 @@ Provide navigation function, often used at the top of the page.
 ```javascript
 
 import { createApp } from 'vue';
-import { Navbar,Icon,Tabs, TabPane } from '@nutui/nutui';
+import { Navbar, Tabs, TabPane } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Navbar);
-app.use(Icon);
 app.use(Tabs);
 app.use(TabPane);
 ```
@@ -28,7 +27,7 @@ app.use(TabPane);
       <div>Back</div>
     </template>
     <template #right>
-      <nut-icon class="right" name="share-n"></nut-icon>
+      <ShareN width="16px"></ShareN>
     </template>
   </nut-navbar>
 
@@ -47,18 +46,23 @@ app.use(TabPane);
     @on-click-icon="icon"
     @on-click-right="rightClick"
     title="Cart"
-    titIcon="cart2"
+    :titleIcon="true"
     desc="Edit"
   >
+    <template #titleIcon>
+      <Cart2 width="16px"></Cart2>
+    </template>
     <template #right>
-      <nut-icon class="right" name="more-x"></nut-icon>
+      <MoreX class="right" width="16px"></MoreX>
     </template>
   </nut-navbar>
 </template>
 
 <script lang="ts">
   import { ref } from 'vue';
+  import { ShareN, Cart2, MoreX } from '@nutui/icons-vue';
   export default {
+  components: { ShareN, Cart2, MoreX },
   setup() {
     const methods = {
       back() {
@@ -101,14 +105,16 @@ app.use(TabPane);
     </template>
 
     <template #right>
-      <nut-icon class="right" name="more-x"></nut-icon>
+      <MoreX class="right" width="16px"></MoreX>
     </template>
   </nut-navbar>
 </template>
 
 <script lang="ts">
 import { ref } from 'vue';
+import { MoreX } from '@nutui/icons-vue';
 export default {
+  components: { MoreX },
   setup() {
     const tab1value = ref(0);
     const methods = {
@@ -150,18 +156,20 @@ export default {
       </nut-tabs>
     </template>
     <template #icons>
-      <nut-icon class="icon" name="share"></nut-icon>
-    </template>
+        <nut-icon class="icon" name="share"></nut-icon>
+      </template>
 
     <template #right>
-      <nut-icon class="right" name="horizontal-n"></nut-icon>
+      <HorizontalN class="right" width="16px"></HorizontalN>
     </template>
   </nut-navbar>
 </template>
 
 <script lang="ts">
   import { ref } from 'vue';
+  import { HorizontalN } from '@nutui/icons-vue';
   export default {
+    components: { HorizontalN },
     setup() {
     const tab2value = ref(0);
     const methods = {
@@ -191,7 +199,7 @@ export default {
 | left-text `v3.1.21` | Left Text                                     | String  | -       |
 | desc                | Desc                                          | String  | -       |
 | left-show           | Whether to show the left arrow                | Boolean | false   |
-| tit-icon            | Insert icon in title                          | String  | -       | 
+| title-icon            | Whether to show icon in title                 | Boolean  | false     | 
 | border `v3.1.21`    | Whether to show bottom border                     | Boolean  | false  |
 | fixed               | Is it pinned to the top                       | Boolean | false    |
 | placeholder `v3.1.21` | Whether to generate a placeholder element when fixed   | Boolean  | false   |
@@ -209,6 +217,8 @@ export default {
 ### Slots
 | Name  | Description     | 
 |-------|----------|
-| left | 自定义左侧内容 |
-| right | 自定义右侧内容 |
-| content |  自定义导航栏中间内容 |
+| left | Customize left content |
+| right | Customize the content on the right |
+| content |  Customize the middle content of the navigation bar |
+| leftShow  | Custom icon of left arrow  |
+| titleIcon  | Custom icon in header |

src/packages/__VUE/navbar/doc.md

@@ -9,11 +9,10 @@
 ```javascript
 
 import { createApp } from 'vue';
-import { Navbar,Icon,Tabs, TabPane } from '@nutui/nutui';
+import { Navbar, Tabs, TabPane } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Navbar);
-app.use(Icon);
 app.use(Tabs);
 app.use(TabPane);
 ```
@@ -28,7 +27,7 @@ app.use(TabPane);
       <div>返回</div>
     </template>
     <template #right>
-      <nut-icon class="right" name="share-n"></nut-icon>
+      <ShareN width="16px"></ShareN>
     </template>
   </nut-navbar>
 
@@ -47,18 +46,23 @@ app.use(TabPane);
     @on-click-icon="icon"
     @on-click-right="rightClick"
     title="购物车"
-    titIcon="cart2"
+    :titleIcon="true"
     desc="编辑"
   >
+    <template #titleIcon>
+      <Cart2 width="16px"></Cart2>
+    </template>
     <template #right>
-      <nut-icon class="right" name="more-x"></nut-icon>
+      <MoreX class="right" width="16px"></MoreX>
     </template>
   </nut-navbar>
 </template>
 
 <script lang="ts">
   import { ref } from 'vue';
+  import { ShareN, Cart2, MoreX } from '@nutui/icons-vue';
   export default {
+  components: { ShareN, Cart2, MoreX },
   setup() {
     const methods = {
       back() {
@@ -101,14 +105,16 @@ app.use(TabPane);
     </template>
 
     <template #right>
-      <nut-icon class="right" name="more-x"></nut-icon>
+      <MoreX class="right" width="16px"></MoreX>
     </template>
   </nut-navbar>
 </template>
 
 <script lang="ts">
 import { ref } from 'vue';
+import { MoreX } from '@nutui/icons-vue';
 export default {
+  components: { MoreX },
   setup() {
     const tab1value = ref(0);
     const methods = {
@@ -149,19 +155,18 @@ export default {
         <nut-tab-pane title="标题3"> </nut-tab-pane>
       </nut-tabs>
     </template>
-    <template #icons>
-      <nut-icon class="icon" name="share"></nut-icon>
-    </template>
 
     <template #right>
-      <nut-icon class="right" name="horizontal-n"></nut-icon>
+      <HorizontalN class="right" width="16px"></HorizontalN>
     </template>
   </nut-navbar>
 </template>
 
 <script lang="ts">
   import { ref } from 'vue';
+  import { HorizontalN } from '@nutui/icons-vue';
   export default {
+    components: { HorizontalN },
     setup() {
     const tab2value = ref(0);
     const methods = {
@@ -191,7 +196,7 @@ export default {
 | left-text `v3.1.21`       | 左侧文案                                                 | String  | -       |
 | desc            | 右侧描述                                                 | String  | -       |
 | left-show       | 是否展示左侧箭头                                          | Boolean | false   |
-| tit-icon        | 标题中插入icon                                           | String  | -       |
+| title-icon        | 标题中是否展示icon                                        | Boolean  | false      |
 | border `v3.1.21`          | 是否显示下边框                                            | Boolean  | false  |
 | fixed           | 是否固定到顶部                                            | Boolean  | false    |
 | placeholder `v3.1.21`     | 固定在顶部时，是否在标签位置生成一个等高的占位元素              | Boolean  | false   |
@@ -212,4 +217,6 @@ export default {
 |-------|----------|-------------|
 | left | 自定义左侧内容 |  |
 | right | 自定义右侧内容 |  |
-| content |  自定义导航栏中间内容 |  |
+| content |  自定义导航栏中间内容 |  |
+| leftShow  | 左侧箭头自定义图标 |
+| titleIcon  | 标题中自定义图标 |

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

@@ -9,11 +9,10 @@
 ```javascript
 
 import { createApp } from 'vue';
-import { Navbar,Icon,Tabs, TabPane } from '@nutui/nutui-taro';
+import { Navbar, Tabs, TabPane } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Navbar);
-app.use(Icon);
 app.use(Tabs);
 app.use(TabPane);
 ```
@@ -47,7 +46,7 @@ app.use(TabPane);
     @on-click-icon="icon"
     @on-click-right="rightClick"
     title="购物车"
-    titIcon="cart2"
+    titleIcon="cart2"
     desc="编辑"
   >
     <template #right>
@@ -191,7 +190,7 @@ export default {
 | left-text `v3.1.21`       | 左侧文案                                                 | String  | -       |
 | desc            | 右侧描述                                                 | String  | -       |
 | left-show       | 是否展示左侧箭头                                          | Boolean | false   |
-| tit-icon        | 标题中插入icon                                           | String  | -       |
+| title-icon        | 标题中插入icon                                           | String  | -       |
 | border `v3.1.21`          | 是否显示下边框                                            | Boolean  | false  |
 | fixed           | 是否固定到顶部                                            | Boolean  | false    |
 | placeholder `v3.1.21`     | 固定在顶部时，是否在标签位置生成一个等高的占位元素              | Boolean  | false   |

src/packages/__VUE/navbar/index.scss

@@ -75,6 +75,7 @@
     text-align: center;
     display: flex;
     justify-content: center;
+    align-items: center;
     .title {
       min-width: $navbar-title-width;
       font-size: $navbar-title-font;
@@ -90,6 +91,9 @@
         margin: $navbar-title-icon-margin;
       }
     }
+    .icon {
+      font-size: 0;
+    }
     .nut-icon {
       display: inline;
     }

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

@@ -2,13 +2,17 @@
   <view v-if="fixed && placeholder" class="nut-navbar--placeholder" :style="{ height: navHeight + 'px' }">
     <view :class="classes" :style="styles" class="navBarHtml">
       <view class="nut-navbar__left" @click="handleLeft">
-        <nut-icon v-if="leftShow" color="#979797" name="left"></nut-icon>
+        <slot name="leftShow" v-if="leftShow">
+          <Left height="12px" color="#979797"></Left>
+        </slot>
         <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
         <slot name="left"></slot>
       </view>
       <view class="nut-navbar__title">
         <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
-        <nut-icon v-if="titIcon" class="icon" v-bind="$attrs" :name="titIcon" @click="handleCenterIcon"></nut-icon>
+        <view v-if="titleIcon" class="icon" @click="handleCenterIcon">
+          <slot name="titleIcon" @click="handleCenterIcon"></slot>
+        </view>
         <slot name="content"></slot>
       </view>
       <view class="nut-navbar__right" @click="handleRight">
@@ -19,13 +23,17 @@
   </view>
   <view v-else :class="classes" :style="styles">
     <view class="nut-navbar__left" @click="handleLeft">
-      <nut-icon v-if="leftShow" color="#979797" name="left"></nut-icon>
+      <slot name="leftShow" v-if="leftShow">
+        <Left height="12px" color="#979797"></Left>
+      </slot>
       <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
       <slot name="left"></slot>
     </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" v-bind="$attrs" @click="handleCenterIcon"></nut-icon>
+      <view v-if="titleIcon" class="icon" @click="handleCenterIcon">
+        <slot name="titleIcon" @click="handleCenterIcon"></slot>
+      </view>
       <slot name="content"></slot>
     </view>
     <view class="nut-navbar__right" @click="handleRight">
@@ -41,11 +49,13 @@ import { useTaroRect } from '@/packages/utils/useTaroRect';
 import { createComponent } from '@/packages/utils/create';
 import Taro from '@tarojs/taro';
 const { componentName, create } = createComponent('navbar');
+import { Left } from '@nutui/icons-vue-taro';
 export default create({
+  components: { Left },
   props: {
     leftShow: { type: Boolean, default: false }, //左侧  是否显示返回icon
     title: { type: String, default: '' }, //中间  文字标题
-    titIcon: { type: String, default: '' }, //中间  标题icon
+    titleIcon: { type: Boolean, default: false }, //中间  标题icon
     leftText: { type: String, default: '' }, //左侧文字
     desc: { type: String, default: '' }, //右侧   按钮文字
     fixed: {

src/packages/__VUE/navbar/index.vue

@@ -2,13 +2,17 @@
   <view v-if="fixed && placeholder" class="nut-navbar--placeholder" ref="navBarWrap">
     <view :class="classes" :style="styles" ref="navBarHtml">
       <view class="nut-navbar__left" @click="handleLeft">
-        <nut-icon v-if="leftShow" color="#979797" name="left"></nut-icon>
+        <slot name="leftShow" v-if="leftShow">
+          <Left height="12px" color="#979797"></Left>
+        </slot>
         <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
         <slot name="left"></slot>
       </view>
       <view class="nut-navbar__title">
         <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
-        <nut-icon v-if="titIcon" class="icon" v-bind="$attrs" :name="titIcon" @click="handleCenterIcon"></nut-icon>
+        <view v-if="titleIcon" class="icon" @click="handleCenterIcon">
+          <slot name="titleIcon" @click="handleCenterIcon"></slot>
+        </view>
         <slot name="content"></slot>
       </view>
       <view class="nut-navbar__right" @click="handleRight">
@@ -19,13 +23,17 @@
   </view>
   <view v-else :class="classes" :style="styles">
     <view class="nut-navbar__left" @click="handleLeft">
-      <nut-icon v-if="leftShow" color="#979797" name="left"></nut-icon>
+      <slot name="leftShow" v-if="leftShow">
+        <Left height="12px" color="#979797"></Left>
+      </slot>
       <view v-if="leftText" class="nut-navbar__text">{{ leftText }}</view>
       <slot name="left"></slot>
     </view>
     <view class="nut-navbar__title">
       <view v-if="title" class="title" @click="handleCenter">{{ title }}</view>
-      <nut-icon v-if="titIcon" class="icon" v-bind="$attrs" :name="titIcon" @click="handleCenterIcon"></nut-icon>
+      <view v-if="titleIcon" class="icon" @click="handleCenterIcon">
+        <slot name="titleIcon" @click="handleCenterIcon"></slot>
+      </view>
       <slot name="content"></slot>
     </view>
     <view class="nut-navbar__right" @click="handleRight">
@@ -39,11 +47,13 @@
 import { onMounted, computed, toRefs, ref, nextTick, ComputedRef, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('navbar');
+import { Left } from '@nutui/icons-vue';
 export default create({
+  components: { Left },
   props: {
     leftShow: { type: Boolean, default: false }, //左侧  是否显示返回icon
     title: { type: String, default: '' }, //中间  文字标题
-    titIcon: { type: String, default: '' }, //中间  标题icon
+    titleIcon: { type: Boolean, default: false }, //中间
     leftText: { type: String, default: '' }, //左侧文字
     desc: { type: String, default: '' }, //右侧   按钮文字
     fixed: {

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

@@ -2,12 +2,10 @@ import { mount, config } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import PopUp from '../index.vue';
 import NutOverlay from '../../overlay/index.vue';
-import NutIcon from '../../icon/index.vue';
 
 beforeAll(() => {
   config.global.components = {
-    NutOverlay,
-    NutIcon
+    NutOverlay
   };
 });
 
@@ -146,18 +144,18 @@ test('should render close icon when using closeable prop', async () => {
   expect(closeIcon.exists()).toBeTruthy();
 });
 
-test('should render correct close icon when using close-icon prop', () => {
-  const wrapper = mount(PopUp, {
-    props: {
-      visible: true,
-      teleportDisable: false,
-      closeable: true,
-      closeIcon: 'success'
-    }
-  });
+// test('should render correct close icon when using close-icon prop', () => {
+//   const wrapper = mount(PopUp, {
+//     props: {
+//       visible: true,
+//       teleportDisable: false,
+//       closeable: true,
+//       closeIcon: 'success'
+//     }
+//   });
 
-  expect(wrapper.find('.nut-popup__close-icon').html()).toMatchSnapshot();
-});
+//   expect(wrapper.find('.nut-popup__close-icon').html()).toMatchSnapshot();
+// });
 
 test('should have "nut-popup--round" class when setting the round prop', () => {
   const wrapper = mount(PopUp, {

src/packages/__VUE/popup/demo.vue

@@ -30,10 +30,13 @@
       position="bottom"
       closeable
       close-icon-position="top-left"
-      close-icon="heart"
       :style="{ height: '20%' }"
       v-model:visible="showCloseIcon"
-    ></nut-popup>
+    >
+      <template #closeIcon>
+        <Heart></Heart>
+      </template>
+    </nut-popup>
     <h2>{{ translate('circle') }}</h2>
     <nut-cell :title="translate('circle')" is-link @click="showRound = true"></nut-cell>
     <nut-popup position="bottom" closeable round :style="{ height: '30%' }" v-model:visible="showRound"></nut-popup>
@@ -54,6 +57,7 @@ import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('popup');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Heart } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -92,6 +96,7 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: { Heart },
   props: {},
   setup() {
     initTranslate();

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

@@ -8,12 +8,11 @@ The pop-up layer container is used to display pop-up windows, information prompt
 
 ```javascript
 import { createApp } from 'vue';
-import { Popup,Overlay, Icon } from '@nutui/nutui';
+import { Popup,Overlay } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Popup)
 app.use(Overlay)
-app.use(Icon)
 ```
 
 ### Basic Usage
@@ -81,7 +80,7 @@ Control the pop-up position by setting the value of `position`
 
 ### Icon
 
-The `closeable` controls whether the icon can be closed. The `close-icon-position` sets the position of the icon. The `close-icon` defines the display icon. For details, refer to [Icon](#/en-US/component/icon)
+The `closeable` controls whether the icon can be closed. The `close-icon-position` sets the position of the icon. The `closeIcon` defines the display icon.
 
 :::demo
 
@@ -92,11 +91,17 @@ The `closeable` controls whether the icon can be closed. The `close-icon-positio
   <nut-cell title="icon position" is-link @click="showIconPosition = true" ></nut-cell>
   <nut-popup position="bottom" closeable close-icon-position="top-left" :style="{ height: '20%' }" v-model:visible="showIconPosition" ></nut-popup>
   <nut-cell title="custom icon" is-link @click="showCloseIcon = true" ></nut-cell>
-  <nut-popup position="bottom" closeable close-icon-position="top-left" close-icon="heart" :style="{ height: '20%' }" v-model:visible="showCloseIcon"></nut-popup>
+  <nut-popup position="bottom" closeable close-icon-position="top-left" close-icon="heart" :style="{ height: '20%' }" v-model:visible="showCloseIcon">
+    <template #closeIcon>
+      <Heart></Heart>
+    </template>
+  </nut-popup>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
+  import { Heart } from '@nutui/icons-vue';
   export default {
+    components: { Heart },
     props: {},
     setup() {
       const state = reactive({
@@ -217,7 +222,6 @@ Specify the mount node through `teleport`
 | pop-class              | Custom bullet box classname                                              | string         | -             |
 | closeable              | Show close button                                           | boolean        | `false`        |
 | close-icon-position    | Close button position（top-left,top-right,bottom-left,bottom-right） | string         | `"top-right"` |
-| close-icon             | [icon name](#/en-US/component/icon) or image url          | string         | `"close"`     |
 | destroy-on-close       | Will the contents of `slot` be cleared after the bullet layer is closed   | boolean        | `true`        |
 | round                  | Show fillet                                                | boolean        | `false`       |
 | teleport               | Specify the mount node   | string         | `"body"`      |
@@ -241,3 +245,4 @@ Specify the mount node through `teleport`
 | Name | Description       |
 | ------ | ---------- |
 | default  | Customize Embedded Content |
+| closeIcon  | Custom icon for close button |

src/packages/__VUE/popup/doc.md

@@ -8,12 +8,11 @@
 
 ```javascript
 import { createApp } from 'vue';
-import { Popup,Overlay, Icon } from '@nutui/nutui';
+import { Popup,Overlay } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Popup)
 app.use(Overlay)
-app.use(Icon)
 ```
 
 
@@ -82,7 +81,7 @@ app.use(Icon)
 
 ### 图标
 
-通过 `closeable` 控制图标是否可关闭，`close-icon-position` 来设置图标的位置，`close-icon` 来自定义显示图标，详情可参照[图标](#/zh-CN/component/icon)
+通过 `closeable` 控制图标是否可关闭，`close-icon-position` 来设置图标的位置，`closeIcon` 来自定义显示图标
 
 :::demo
 
@@ -93,11 +92,17 @@ app.use(Icon)
   <nut-cell title="图标位置" is-link @click="showIconPosition = true" ></nut-cell>
   <nut-popup position="bottom" closeable close-icon-position="top-left" :style="{ height: '20%' }" v-model:visible="showIconPosition" ></nut-popup>
   <nut-cell title="自定义图标" is-link @click="showCloseIcon = true" ></nut-cell>
-  <nut-popup position="bottom" closeable close-icon-position="top-left" close-icon="heart" :style="{ height: '20%' }" v-model:visible="showCloseIcon"></nut-popup>
+  <nut-popup position="bottom" closeable close-icon-position="top-left" :style="{ height: '20%' }" v-model:visible="showCloseIcon">
+    <template #closeIcon>
+      <Heart></Heart>
+    </template>
+  </nut-popup>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
+  import { Heart } from '@nutui/icons-vue';
   export default {
+    components: { Heart },
     props: {},
     setup() {
       const state = reactive({
@@ -215,7 +220,6 @@ app.use(Icon)
 | pop-class              | 自定义弹框类名                                              | string         | -             |
 | closeable              | 是否显示关闭按钮                                            | boolean        | `false`        |
 | close-icon-position    | 关闭按钮位置（top-left,top-right,bottom-left,bottom-right） | string         | `"top-right"` |
-| close-icon             | [图标名称](#/zh-CN/component/icon) 或图片链接                                                  | string         | `"close"`     |
 | destroy-on-close       | 弹层关闭后 `slot`内容会不会清空                                          | boolean        | `true`        |
 | round                  | 是否显示圆角                                                |boolean        | `false`       |
 | teleport               | 指定挂载节点                                               | string         | `"body"`      |
@@ -239,3 +243,4 @@ app.use(Icon)
 | 名称 | 说明       |
 | ------ | ---------- |
 | default  | 自定义内嵌内容 |
+| closeIcon  | 关闭按钮的自定义图标 |

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

@@ -8,12 +8,11 @@
 
 ```javascript
 import { createApp } from 'vue';
-import { Popup,Overlay, Icon } from '@nutui/nutui-taro';
+import { Popup,Overlay } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Popup)
 app.use(Overlay)
-app.use(Icon)
 
 ```
 

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

@@ -19,7 +19,9 @@
           class="nut-popup__close-icon"
           :class="'nut-popup__close-icon--' + closeIconPosition"
         >
-          <nut-icon v-bind="$attrs" :name="closeIcon" size="12px" />
+          <slot name="closeIcon">
+            <Close height="12px"></Close>
+          </slot>
         </view>
       </view>
     </Transition>
@@ -29,10 +31,12 @@
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';
 import OverLay from '../overlay/index.taro.vue';
+import { Close } from '@nutui/icons-vue-taro';
 const { componentName, create } = createComponent('popup');
 export default create(
   component(componentName, {
-    [OverLay.name]: OverLay
+    [OverLay.name]: OverLay,
+    Close
   })
 );
 </script>

src/packages/__VUE/popup/index.vue

@@ -19,7 +19,9 @@
           class="nut-popup__close-icon"
           :class="'nut-popup__close-icon--' + closeIconPosition"
         >
-          <nut-icon v-bind="$attrs" :name="closeIcon" size="12px" />
+          <slot name="closeIcon">
+            <Close height="12px"></Close>
+          </slot>
         </view>
       </view>
     </Transition>
@@ -29,10 +31,12 @@
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';
 import OverLay from '../overlay/index.vue';
+import { Close } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('popup');
 export default create(
   component(componentName, {
-    [OverLay.name]: OverLay
+    [OverLay.name]: OverLay,
+    Close
   })
 );
 </script>

src/packages/__VUE/progress/demo.vue

@@ -35,11 +35,12 @@
     <div>
       <nut-cell>
         <nut-progress percentage="60" :text-inside="true">
-          <nut-icon
+          <img
+            src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+            width="30"
+            height="30"
             style="display: block"
-            size="30"
-            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-          ></nut-icon>
+          />
         </nut-progress>
       </nut-cell>
     </div>
@@ -73,9 +74,11 @@
           stroke-color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
           stroke-width="15"
           status="icon"
-          icon-name="issue"
-          icon-color="red"
-        />
+        >
+          <template #iconName>
+            <Issue color="red" width="15px" height="15px"></Issue>
+          </template>
+        </nut-progress>
       </nut-cell>
     </div>
     <h2>{{ translate('dynamicChange') }}</h2>
@@ -96,6 +99,7 @@ import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('progress');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Issue } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -126,6 +130,7 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: { Issue },
   props: {},
   setup() {
     initTranslate();

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

@@ -8,12 +8,10 @@ Used to show the current progress of the operation.
 
 ``` javascript
 import { createApp } from 'vue';
-import { Progress,Icon } from '@nutui/nutui';
+import { Progress } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Progress);
-app.use(Icon);
-
 ```
 
 
@@ -76,11 +74,12 @@ app.use(Icon);
 <template>
      <nut-cell>
         <nut-progress percentage="60" :text-inside="true">
-          <nut-icon
+          <img
+            src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+            width="30"
+            height="30"
             style="display: block"
-            size="30"
-            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-          ></nut-icon>
+          />
         </nut-progress>
       </nut-cell>
 </template>
@@ -126,9 +125,11 @@ app.use(Icon);
           stroke-color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
           stroke-width="15"
           status="icon"
-          icon-name="issue"
-          icon-color="red"
-        />
+        >
+          <template #iconName>
+            <Issue color="red" width="15px" height="15px"></Issue>
+          </template>
+        </nut-progress>
       </nut-cell>
     </div>
 </template>
@@ -149,5 +150,8 @@ app.use(Icon);
 | text-color | Progress bar text color setting | String | #333
 | text-background | Progress bar text background color setting | String | Same progress bar color
 | status | The current state of the progress bar,active(show animation)/icon(show icon) | String | text
-| icon-name | Icon Name | String | checked
-| icon-color | Icon Color | String | #439422
+
+### Slots
+| Name  | Description     | 
+|-------|----------|
+| iconName | Right icon content |

src/packages/__VUE/progress/doc.md

@@ -8,11 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Progress,Icon } from '@nutui/nutui';
+import { Progress } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Progress);
-app.use(Icon);
 
 ```
 
@@ -76,11 +75,12 @@ app.use(Icon);
 <template>
      <nut-cell>
         <nut-progress percentage="60" :text-inside="true">
-          <nut-icon
+          <img
+            src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+            width="30"
+            height="30"
             style="display: block"
-            size="30"
-            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-          ></nut-icon>
+          />
         </nut-progress>
       </nut-cell>
 </template>
@@ -126,9 +126,11 @@ app.use(Icon);
           stroke-color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
           stroke-width="15"
           status="icon"
-          icon-name="issue"
-          icon-color="red"
-        />
+        >
+          <template #iconName>
+            <Issue color="red" width="15px" height="15px"></Issue>
+          </template>
+        </nut-progress>
       </nut-cell>
     </div>
 </template>
@@ -149,5 +151,8 @@ app.use(Icon);
 | text-color | 进度条文字颜色设置 | String | #333
 | text-background | 进度条文字背景颜色设置 | String | 同进度条颜色
 | status | 进度条当前状态,active(展示动画效果)/icon(展示icon标签) | String | text
-| icon-name | icon名称 | String | checked
-| icon-color | icon颜色 | String | #439422
+
+### Slots
+| 名称  | 说明     | 回调参数    |
+|-------|----------|-------------|
+| iconName | 右侧icon内容 |  |

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

@@ -8,11 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Progress,Icon } from '@nutui/nutui-taro';
+import { Progress } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Progress);
-app.use(Icon);
 
 ```
 
@@ -76,11 +75,12 @@ app.use(Icon);
 <template>
      <nut-cell>
         <nut-progress percentage="60" :text-inside="true">
-          <nut-icon
+          <img
+            src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+            width="30"
+            height="30"
             style="display: block"
-            size="30"
-            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-          ></nut-icon>
+          />
         </nut-progress>
       </nut-cell>
 </template>
@@ -126,9 +126,11 @@ app.use(Icon);
           stroke-color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
           stroke-width="15"
           status="icon"
-          icon-name="issue"
-          icon-color="red"
-        />
+        >
+          <template #iconName>
+            <Issue color="red" width="15px" height="15px"></Issue>
+          </template>
+        </nut-progress>
       </nut-cell>
     </div>
 </template>
@@ -149,5 +151,8 @@ app.use(Icon);
 | text-color | 进度条文字颜色设置 | String | #333
 | text-background | 进度条文字背景颜色设置 | String | 同进度条颜色
 | status | 进度条当前状态,active(展示动画效果)/icon(展示icon标签) | String | text
-| icon-name | icon名称 | String | checked
-| icon-color | icon颜色 | String | #439422
+
+### Slots
+| 名称  | 说明     | 回调参数    |
+|-------|----------|-------------|
+| iconName | 右侧icon内容 |  |

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

@@ -39,7 +39,9 @@
         <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
       </template>
       <template v-else-if="status == 'icon'">
-        <nut-icon v-bind="$attrs" size="16px" :name="iconName" :color="iconColor"></nut-icon>
+        <slot name="iconName">
+          <Checked width="15px" height="15px" color="#439422"></Checked>
+        </slot>
       </template>
     </div>
   </div>
@@ -49,8 +51,10 @@
 import { computed, onMounted, useSlots, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
+import { Checked } from '@nutui/icons-vue-taro';
 const { create } = createComponent('progress');
 export default create({
+  components: { Checked },
   props: {
     percentage: {
       type: [Number, String],
@@ -89,10 +93,6 @@ export default create({
       type: String,
       default: ''
     },
-    iconName: {
-      type: String,
-      default: 'checked'
-    },
     iconColor: {
       type: String,
       default: '#439422'

src/packages/__VUE/progress/index.vue

@@ -39,7 +39,9 @@
         <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }}</span>
       </template>
       <template v-else-if="status == 'icon'">
-        <nut-icon v-bind="$attrs" size="16px" :name="iconName" :color="iconColor"></nut-icon>
+        <slot name="iconName">
+          <Checked width="15px" height="15px" color="#439422"></Checked>
+        </slot>
       </template>
     </div>
   </div>
@@ -49,7 +51,9 @@
 import { computed, onMounted, useSlots, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('progress');
+import { Checked } from '@nutui/icons-vue';
 export default create({
+  components: { Checked },
   props: {
     percentage: {
       type: [Number, String],
@@ -88,14 +92,6 @@ export default create({
       type: String,
       default: ''
     },
-    iconName: {
-      type: String,
-      default: 'checked'
-    },
-    iconColor: {
-      type: String,
-      default: '#439422'
-    },
     isShowPercentage: {
       type: Boolean,
       default: true

src/packages/__VUE/progress/test/index.spec.ts

@@ -1,14 +1,7 @@
 import { config, mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import NutIcon from '../../icon/index.vue';
 import Progress from '../index.vue';
 
-beforeAll(() => {
-  config.global.components = {
-    NutIcon
-  };
-});
-
 afterAll(() => {
   config.global.components = {};
 });

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

@@ -30,10 +30,13 @@
       position="bottom"
       closeable
       close-icon-position="top-left"
-      close-icon="heart"
       :style="{ height: '20%' }"
       v-model:visible="showCloseIcon"
-    ></nut-popup>
+    >
+      <template #closeIcon>
+        <Heart></Heart>
+      </template>
+    </nut-popup>
     <h2>圆角弹框</h2>
     <nut-cell title="圆角弹框" is-link @click="showRound = true"></nut-cell>
     <nut-popup position="bottom" closeable round :style="{ height: '30%' }" v-model:visible="showRound"></nut-popup>
@@ -48,7 +51,9 @@
 
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { Heart } from '@nutui/icons-vue-taro';
 export default {
+  components: { Heart },
   props: {},
   setup() {
     const state = reactive({

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

@@ -35,11 +35,12 @@
     <div>
       <nut-cell>
         <nut-progress percentage="60" :text-inside="true">
-          <nut-icon
-            style="display: block"
-            size="30"
-            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-          ></nut-icon>
+          <img
+            src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+            width="30"
+            height="30"
+            style="display: block; width: 30px; height: 30px"
+          />
         </nut-progress>
       </nut-cell>
     </div>
@@ -65,17 +66,19 @@
         />
       </nut-cell>
       <nut-cell>
-        <nut-progress percentage="50" :stroke-width="strokeWidth" status="wrong" />
+        <nut-progress percentage="50" status="icon" />
       </nut-cell>
       <nut-cell>
         <nut-progress
           percentage="100"
           stroke-color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
           stroke-width="15"
-          status="success"
-          icon-name="issue"
-          icon-color="red"
-        />
+          status="icon"
+        >
+          <template #iconName>
+            <Issue color="red" width="15px" height="15px"></Issue>
+          </template>
+        </nut-progress>
       </nut-cell>
     </div>
     <h2>设置百分比</h2>
@@ -93,7 +96,9 @@
 
 <script lang="ts">
 import { ref } from 'vue';
+import { Issue } from '@nutui/icons-vue-taro';
 export default {
+  components: { Issue },
   props: {},
   setup() {
     const val = ref(0);

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

@@ -7,7 +7,7 @@
         <div>返回</div>
       </template>
       <template #right>
-        <nut-icon class="right" name="share-n"></nut-icon>
+        <ShareN width="16px"></ShareN>
       </template>
     </nut-navbar>
 
@@ -26,11 +26,14 @@
       @on-click-icon="icon"
       @on-click-right="rightClick"
       title="购物车"
-      titIcon="cart2"
+      :titleIcon="true"
       desc="编辑"
     >
+      <template #titleIcon>
+        <Cart2 width="16px"></Cart2>
+      </template>
       <template #right>
-        <nut-icon class="right" name="more-x"></nut-icon>
+        <MoreX class="right" width="16px"></MoreX>
       </template>
     </nut-navbar>
 
@@ -44,7 +47,7 @@
       </template>
 
       <template #right>
-        <nut-icon class="right" name="more-x"></nut-icon>
+        <MoreX class="right" width="16px"></MoreX>
       </template>
     </nut-navbar>
 
@@ -63,7 +66,7 @@
       </template>
 
       <template #right>
-        <nut-icon class="right" name="horizontal-n"></nut-icon>
+        <HorizontalN class="right" width="16px"></HorizontalN>
       </template>
     </nut-navbar>
   </div>
@@ -71,7 +74,9 @@
 
 <script lang="ts">
 import { ref, defineComponent } from 'vue';
+import { ShareN, Cart2, MoreX, HorizontalN } from '@nutui/icons-vue-taro';
 export default defineComponent({
+  components: { ShareN, Cart2, MoreX, HorizontalN },
   setup({}) {
     const tab1value = ref(0);
     const tab2value = ref(0);