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

jd/generate-nutui-taro-vue.cjs

@@ -31,7 +31,7 @@ let installFunction = `function install(app: any) {
 let fileStrBuild = `${importStr}
 ${installFunction}
 const version = '${packageConfig.version}';
-export { install, version, Locale };
+export { install, version, Locale, ${packages.join(',')} };
 export default { install, version, Locale};`;
 
 fs.outputFile(path.resolve(__dirname, '../src/packages/nutui.taro.vue.build.ts'), fileStrBuild, 'utf8', (error) => {

jd/generate-style-deps.cjs

@@ -13,7 +13,7 @@ config.nav.forEach((item) => {
   });
 });
 styleMap.forEach((value) => {
-  if (value.chilren?.length !== 0) {
+  if (value.children && value.children.length > 0) {
     value.children.forEach((item, index) => {
       value.children[index] = styleMap.get(item);
     });

jd/generate-types-taro.cjs

@@ -6,6 +6,10 @@ const sourceDir = path.resolve(__dirname, './../tsc/type/src/packages') // 拷
 
 const toDir = path.resolve(__dirname, './../dist/types'); // ./../dist
 
+if(fs.existsSync(toDir)) {
+  fs.rmdirSync(toDir); //先删除文件夹
+}
+
 const basePath = path.join(toDir, '__VUE');
 
 const fileList = [];

jd/generate-types.cjs

@@ -6,6 +6,10 @@ const sourceDir = path.resolve(__dirname, './../tsc/type/src/packages'); // 拷
 
 const toDir = path.resolve(__dirname, './../dist/types'); // ./../dist
 
+if(fs.existsSync(toDir)) {
+  fs.rmdirSync(toDir); //先删除文件夹
+}
+
 const basePath = path.join(toDir, '__VUE');
 
 const fileList = [];

package.json

@@ -41,16 +41,16 @@
   "scripts": {
     "checked": "npm run generate:file && tsc",
     "checked:taro:vue": "npm run generate:file:taro:vue",
-    "dev": "npm run checked && vite --open --force",
-    "dev:taro:weapp": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:weapp",
-    "dev:taro:alipay": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:alipay",
-    "dev:taro:jd": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:jd",
-    "dev:taro:h5": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:h5",
+    "dev": "npm run checked && npm run dts && vite --open --force",
+    "dev:taro:weapp": "npm run createTaroConfig && npm run checked:taro:vue && npm run dts && cd src/sites/mobile-taro/vue/ && npm run dev:weapp",
+    "dev:taro:alipay": "npm run createTaroConfig && npm run checked:taro:vue && npm run dts && cd src/sites/mobile-taro/vue/ && npm run dev:alipay",
+    "dev:taro:jd": "npm run createTaroConfig && npm run checked:taro:vue && npm run dts && cd src/sites/mobile-taro/vue/ && npm run dev:jd",
+    "dev:taro:h5": "npm run createTaroConfig && npm run checked:taro:vue && npm run dts && cd src/sites/mobile-taro/vue/ && npm run dev:h5",
     "build:site": "npm run checked && vite build",
     "build:site-jdt": "npm run checked && vite build --config vite.config.jdt.ts ",
     "build:site:oss": "npm run checked && vite build --base=/nutui/4x/",
-    "build": "npm run checked && vite build --config vite.config.build.ts && vite build --config vite.config.build.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run dts && npm run attrs",
-    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && vite build --config vite.config.build.taro.vue.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run dts:taro && npm run attrs",
+    "build": "npm run checked && vite build --config vite.config.build.ts && vite build --config vite.config.build.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run dts && npm run attrs && npm run generate:style:deps",
+    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && vite build --config vite.config.build.taro.vue.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run dts:taro && npm run attrs&& npm run generate:style:deps",
     "serve": "vite preview",
     "upload": "yarn build:site:oss && node ./jd/upload.js",
     "add": "node jd/createComponentMode.js",
@@ -61,6 +61,7 @@
     "generate:types": "node jd/generate-types.cjs",
     "generate:types:taro": "node jd/generate-types-taro.cjs",
     "generate:themes": "node jd/generate-themes.cjs",
+    "generate:style:deps": "node jd/generate-style-deps.cjs",
     "prepare": "husky install",
     "test": "jest",
     "release": "standard-version -a",

src/config.json

@@ -341,7 +341,7 @@
           "exportEmptyTaro": true,
           "desc": "标签栏子组件",
           "author": "Drjingfubo",
-          "styleDeps": []
+          "styleDeps": ["Badge"]
         },
         {
           "version": "3.0.0",
@@ -1202,7 +1202,8 @@
           "show": true,
           "tarodoc": false,
           "type": "component",
-          "author": "yangxiaolu"
+          "author": "yangxiaolu",
+          "styleDeps": ["Popover"]
         }
       ]
     },
@@ -1364,7 +1365,7 @@
           "tarodoc": false,
           "type": "component",
           "author": "yangxiaolu",
-          "styleDeps": []
+          "styleDeps": ["Rate"]
         },
         {
           "version": "3.0.0",

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

@@ -315,8 +315,6 @@ export default create({
 
     // 手动关闭 点击叉号(cross)，或者蒙层(mask)
     const handClose = (type = 'self') => {
-      if (!props.closeBtnIcon) return;
-
       closeWay.value = type == 'cross' ? 'cross' : 'self';
 
       showPopup.value = false;

src/packages/__VUE/address/index.vue

@@ -123,11 +123,21 @@ import { reactive, ref, toRefs, watch, nextTick, computed, Ref, h, PropType } fr
 import { createComponent } from '@/packages/utils/create';
 import { RegionData, CustomRegionData, existRegionData } from './type';
 import { popupProps } from '../popup/props';
+import Popup from '../popup/index.vue';
+import Elevator from '../elevator/index.vue';
 const { componentName, create, translate } = createComponent('address');
 import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue';
 
 export default create({
-  components: { Location, Location2, Check, Close, Left },
+  components: {
+    Location,
+    Location2,
+    Check,
+    Close,
+    Left,
+    [Popup.name]: Popup,
+    [Elevator.name]: Elevator
+  },
   inheritAttrs: false,
   props: {
     ...popupProps,

src/packages/__VUE/audio/index.vue

@@ -63,6 +63,7 @@
 import { toRefs, ref, onMounted, reactive, watch, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Service } from '@nutui/icons-vue';
+import Range from '../range/index.vue';
 const { componentName, create } = createComponent('audio');
 
 export default create({
@@ -106,7 +107,8 @@ export default create({
     }
   },
   components: {
-    Service
+    Service,
+    [Range.name]: Range
   },
   emits: ['fastBack', 'play', 'forward', 'ended', 'changeProgress', 'mute', 'can-play'],
 

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

@@ -14,6 +14,7 @@
 import { PropType, CSSProperties, toRefs, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Loading } from '@nutui/icons-vue-taro';
+// import { ButtonShape, ButtonType, ButtonSize } from './type';
 const { componentName, create } = createComponent('button');
 export default create({
   components: { Loading },

src/packages/__VUE/button/index.vue

@@ -13,6 +13,7 @@
 <script lang="ts">
 import { PropType, CSSProperties, toRefs, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { ButtonShape, ButtonType, ButtonSize } from './type';
 import { Loading } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('button');
 export default create({
@@ -20,7 +21,7 @@ export default create({
   props: {
     color: String,
     shape: {
-      type: String as PropType<import('./type').ButtonShape>,
+      type: String as PropType<ButtonShape>,
       default: 'round'
     },
     plain: {
@@ -36,11 +37,11 @@ export default create({
       default: false
     },
     type: {
-      type: String as PropType<import('./type').ButtonType>,
+      type: String as PropType<ButtonType>,
       default: 'default'
     },
     size: {
-      type: String as PropType<import('./type').ButtonSize>,
+      type: String as PropType<ButtonSize>,
       default: 'normal'
     },
     block: {

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

@@ -83,56 +83,8 @@ test('checkbox icon-size test', () => {
   });
 
   const items = wrapper.findAll('.nut-checkbox');
-  expect((items[0].findAll('i') as any)[0].element.style.fontSize).toEqual('25px');
-  expect((items[1].findAll('i') as any)[0].element.style.fontSize).toEqual('10px');
-});
-
-test('checkbox icon-name test', () => {
-  const wrapper = mount({
-    components: {
-      'nut-checkbox': Checkbox
-    },
-    template: `
-      <template>
-        <nut-checkbox v-model="checkbox5"  icon-name="checklist" icon-active-name="checklist">自定义图标</nut-checkbox>
-        <nut-checkbox v-model="checkbox6">auxiliary</nut-checkbox>
-      </template>
-    `,
-    setup() {
-      const state = reactive({
-        checkbox5: true,
-        checkbox6: true
-      });
-      return { ...toRefs(state) };
-    }
-  });
-
-  const items = wrapper.findAll('.nut-checkbox');
-  expect((items[0].findAll('i') as any)[0].classes()).toContain('nut-icon-checklist');
-});
-
-test('checkbox label test', () => {
-  const wrapper = mount({
-    components: {
-      'nut-checkbox': Checkbox
-    },
-    template: `
-      <template>
-        <nut-checkbox v-model="checkbox5" label="testlabel"></nut-checkbox>
-        <nut-checkbox v-model="checkbox6">auxiliary</nut-checkbox>
-      </template>
-    `,
-    setup() {
-      const state = reactive({
-        checkbox5: true,
-        checkbox6: true
-      });
-      return { ...toRefs(state) };
-    }
-  });
-
-  const items = wrapper.findAll('.nut-checkbox');
-  expect((items[0].findAll('i') as any)[0].find('testlabel')).toBeTruthy();
+  expect((items[0].findAll('svg') as any)[0].element.style.width).toEqual('25px');
+  expect((items[1].findAll('svg') as any)[0].element.style.height).toEqual('10px');
 });
 
 test('should emit "update:modelValue" event when checkbox is clicked', async () => {

src/packages/__VUE/checkbox/common.ts

@@ -1,10 +1,9 @@
-import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch } from 'vue';
+import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, Component } from 'vue';
+import { pxCheck } from '@/packages/utils/pxCheck';
 
-export const component = (componentName: string, nutIcon: object) => {
+export const component = (componentName: string, components: Record<string, Component>): any => {
   return {
-    components: {
-      nutIcon
-    },
+    components: components,
     props: {
       modelValue: {
         type: Boolean,
@@ -22,30 +21,10 @@ export const component = (componentName: string, nutIcon: object) => {
         type: [String, Number],
         default: ''
       },
-      iconName: {
-        type: String,
-        default: 'check-normal'
-      },
-      iconActiveName: {
-        type: String,
-        default: 'checked'
-      },
-      iconIndeterminateName: {
-        type: String,
-        default: 'check-disabled'
-      },
       label: {
         type: String,
         default: ''
       },
-      iconClassPrefix: {
-        type: String,
-        default: 'nut-icon'
-      },
-      iconFontClassName: {
-        type: String,
-        default: 'nutui-iconfont'
-      },
       indeterminate: {
         type: Boolean,
         default: false
@@ -104,13 +83,23 @@ export const component = (componentName: string, nutIcon: object) => {
       );
 
       const renderIcon = () => {
-        const { iconName, iconSize, iconActiveName, iconClassPrefix, iconFontClassName, iconIndeterminateName } = props;
-        return h(nutIcon, {
-          name: !pValue.value ? iconName : state.partialSelect ? iconIndeterminateName : iconActiveName,
-          size: iconSize,
-          class: color.value,
-          classPrefix: iconClassPrefix,
-          fontClassName: iconFontClassName
+        const { iconSize } = props;
+        const iconNodeMap = {
+          CheckNormal: slots.icon ? slots.icon : components.CheckNormal,
+          Checked: slots.checkedIcon ? slots.checkedIcon : components.Checked,
+          CheckDisabled: slots.indeterminate ? slots.indeterminate : components.CheckDisabled
+        };
+        const iconNode = !pValue.value
+          ? iconNodeMap.CheckNormal
+          : state.partialSelect
+          ? iconNodeMap.CheckDisabled
+          : iconNodeMap.Checked;
+        const size = pxCheck(iconSize);
+        return h(iconNode, {
+          width: size,
+          height: size,
+          size: size,
+          class: color.value
         });
       };
 
@@ -133,9 +122,9 @@ export const component = (componentName: string, nutIcon: object) => {
         }
         emitChange(!checked.value, slots.default?.()[0].children as string);
         if (hasParent.value) {
-          let value = parent.value.value;
-          let max = parent.max.value;
-          let { label } = props;
+          const value = parent.value.value;
+          const max = parent.max.value;
+          const { label } = props;
           const index = value.indexOf(label);
           if (index > -1) {
             value.splice(index, 1);

src/packages/__VUE/checkbox/demo.vue

@@ -2,14 +2,14 @@
   <div class="demo">
     <nut-cell-group :title="translate('basic')">
       <nut-cell>
-        <nut-checkbox v-model="checkbox1" :label="translate('checkbox')" @change="changeBox1">{{
-          translate('checkbox')
-        }}</nut-checkbox>
+        <nut-checkbox v-model="checkbox1" :label="translate('checkbox')" @change="changeBox1">
+          {{ translate('checkbox') }}
+        </nut-checkbox>
       </nut-cell>
       <nut-cell>
-        <nut-checkbox v-model="checkbox1" text-position="left" @change="changeBox1">{{
-          translate('checkbox')
-        }}</nut-checkbox>
+        <nut-checkbox v-model="checkbox1" text-position="left" @change="changeBox1">
+          {{ translate('checkbox') }}
+        </nut-checkbox>
       </nut-cell>
       <nut-cell>
         <div class="demo-check">{{ translate('selected') }}</div>
@@ -18,9 +18,9 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('semi')">
       <nut-cell>
-        <nut-checkbox v-model="checkbox9" :indeterminate="true" :label="translate('checkbox')">{{
-          translate('checkbox')
-        }}</nut-checkbox>
+        <nut-checkbox v-model="checkbox9" :indeterminate="true" :label="translate('checkbox')">
+          {{ translate('checkbox') }}
+        </nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('disable')">
@@ -41,9 +41,11 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('icon')">
       <nut-cell>
-        <nut-checkbox v-model="checkbox7" icon-name="checklist" icon-active-name="checklist">{{
-          translate('icon')
-        }}</nut-checkbox>
+        <nut-checkbox v-model="checkbox7">
+          {{ translate('icon') }}
+          <template #icon> <Checklist /> </template>
+          <template #checkedIcon> <Checklist color="red" /> </template>
+        </nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('change')">
@@ -78,18 +80,18 @@
     <nut-cell-group :title="translate('selectGroup')">
       <nut-cell>
         <nut-checkbox-group v-model="checkboxgroup3" ref="group" @change="changeBox4">
-          <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">{{
-            item.value
-          }}</nut-checkbox>
+          <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">
+            {{ item.value }}
+          </nut-checkbox>
         </nut-checkbox-group>
       </nut-cell>
       <nut-cell>
-        <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">{{
-          translate('selectAll')
-        }}</nut-button>
-        <nut-button type="info" @click="toggleAll(false)" style="margin: 0 20px 0 0">{{
-          translate('cancel')
-        }}</nut-button>
+        <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">
+          {{ translate('selectAll') }}
+        </nut-button>
+        <nut-button type="info" @click="toggleAll(false)" style="margin: 0 20px 0 0">
+          {{ translate('cancel') }}
+        </nut-button>
         <nut-button type="warning" @click="toggleReverse()">{{ translate('selectReverse') }}</nut-button>
       </nut-cell>
     </nut-cell-group>
@@ -114,18 +116,18 @@
         }}</nut-checkbox>
       </nut-cell>
       <nut-checkbox-group v-model="checkboxgroup5" ref="group2" @change="changeBox6">
+        <nut-cell>
+          <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
+        </nut-cell>
         <nut-cell
-          ><nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox></nut-cell
-        >
-        <nut-cell
-          ><nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox></nut-cell
-        >
+          ><nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox>
+        </nut-cell>
         <nut-cell
-          ><nut-checkbox label="3">{{ translate('combine') }}</nut-checkbox></nut-cell
-        >
+          ><nut-checkbox label="3">{{ translate('combine') }}</nut-checkbox>
+        </nut-cell>
         <nut-cell
-          ><nut-checkbox label="4">{{ translate('combine') }}</nut-checkbox></nut-cell
-        >
+          ><nut-checkbox label="4">{{ translate('combine') }}</nut-checkbox>
+        </nut-cell>
       </nut-checkbox-group>
     </nut-cell-group>
   </div>
@@ -136,6 +138,7 @@ import { createComponent } from '@/packages/utils/create';
 import { Toast } from '@/packages/nutui.vue';
 const { createDemo, translate } = createComponent('checkbox');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Checklist } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -184,6 +187,9 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: {
+    Checklist
+  },
   setup(props, context) {
     initTranslate();
     const group = ref(null) as Ref;

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

@@ -8,12 +8,12 @@ The multiple selection button is used to select.
 
 ``` ts
 import { createApp } from 'vue';
-import { Checkbox,CheckboxGroup,Icon } from '@nutui/nutui';
-
+import { Checkbox,CheckboxGroup } from '@nutui/nutui';
+import { Checklist } from '@nutui/icons-vue';
 const app = createApp();
 app.use(Checkbox);
 app.use(CheckboxGroup);
-app.use(Icon);
+app.use(Checklist);
 ```
 
 ### Basic Usage
@@ -130,14 +130,17 @@ app.use(Icon);
 :::
 
 ### Custom icon
-
-It is recommended to set the `icon-name` and `icon-active-name` attributes at the same time
+Customize the icon through the slot, it is recommended to set the `icon` and `checkedIcon` two slots at the same time
 
 :::demo
 
 ```html
 <template>
-  <nut-checkbox v-model="checkbox7" icon-name="checklist" icon-active-name="checklist">Custom icon</nut-checkbox>
+  <nut-checkbox v-model="checkbox7" >
+    Custom icon
+    <template #icon> <Checklist /> </template>
+    <template #checkedIcon> <Checklist color="red" /> </template>
+  </nut-checkbox>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
@@ -375,15 +378,15 @@ When the value changes, the `change` event will be triggered
 | disabled | Disable selection | Boolean | `false` 
 | text-position | The position of the text, optional value：`left`,`right` | String | `right` 
 | icon-size | [Icon Size](#/en-US/icon) | String、Number | `18` 
-| icon-name | [Icon Name](#/en-US/icon)，Before selection (it is suggested to modify it together with `icon-active-name`) | String | `'check-normal'` 
-| icon-active-name | [Icon Name](#/en-US/icon)，After selection (it is suggested to modify it together with `icon-name`) | String | `'checked'`
-| icon-indeterminate-name | [Icon Name](#/en-US/icon)，Semi selected state | String | `'check-disabled'` 
-| icon-class-prefix | Custom icon class name prefix, used to use custom icons        | String                  | `nut-icon` 
-| icon-font-class-name | Basic class name of custom icon font        | String                  | `nutui-iconfont` 
 | label | Text content of the check box | String | - 
 | indeterminate | Whether half selection status is currently supported. It is generally used in select all operation       | Boolean                  | `false` |
 
-
+### Checkbox Slots
+| Name | Description |
+|-|-|
+| icon | Icon when not selected |
+| checkedIcon | Icon when selected |
+| indeterminate | Icon when half selected |
 ### CheckboxGroup Props
 
 | Attribute | Description | Type   | Default 

src/packages/__VUE/checkbox/doc.md

@@ -8,12 +8,12 @@
 
 ``` ts
 import { createApp } from 'vue';
-import { Checkbox,CheckboxGroup,Icon } from '@nutui/nutui';
-
+import { Checkbox,CheckboxGroup } from '@nutui/nutui';
+import { Checklist } from '@nutui/icons-vue';
 const app = createApp();
 app.use(Checkbox);
 app.use(CheckboxGroup);
-app.use(Icon);
+app.use(Checklist);
 ```
 
 ### 基础用法
@@ -131,13 +131,17 @@ app.use(Icon);
 
 ### 自定义图标
 
-这里建议同时设置 `icon-name` 和 `icon-active-name` 属性
+通过slot自定义图标，建议同时设置`icon`和`checkedIcon`两个插槽
 
 :::demo
 
 ```html
 <template>
-  <nut-checkbox v-model="checkbox7" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-checkbox>
+  <nut-checkbox v-model="checkbox7" >
+    自定义图标
+    <template #icon> <Checklist /> </template>
+    <template #checkedIcon> <Checklist color="red" /> </template>
+  </nut-checkbox>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
@@ -379,13 +383,14 @@ app.use(Icon);
 | disabled | 是否禁用选择 | Boolean | `false`
 | text-position | 文本所在的位置，可选值：`left`,`right` | String | `right`
 | icon-size | [图标尺寸](#/zh-CN/component/icon) | String、Number | `18`
-| icon-name | [图标名称](#/zh-CN/component/icon)，选中前(建议和`icon-active-name`一起修改) | String | `'check-normal'`
-| icon-active-name | [图标名称](#/zh-CN/component/icon)，选中后(建议和`icon-name`一起修改) | String | `'checked'`
-| icon-indeterminate-name | [图标名称](#/zh-CN/component/icon)，半选状态 | String | `'check-disabled'`
-| icon-class-prefix | 自定义 icon 类名前缀，用于使用自定义图标        | String                  | `nut-icon` |
-| icon-font-class-name | 自定义 icon 字体基础类名        | String                  | `nutui-iconfont` |
 | label | 复选框的文本内容 | String | -
 | indeterminate | 当前是否支持半选状态，一般用在全选操作中        | Boolean                  | `false` |
+### Checkbox Slots
+| 名称 | 说明 |
+|-|-|
+| icon | 未选中时的图标 |
+| checkedIcon | 选中时的图标 |
+| indeterminate | 半选时的图标 |
 ### CheckboxGroup Props
 
 | 字段 | 说明 | 类型 | 默认值

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

@@ -8,12 +8,12 @@
 
 ``` ts
 import { createApp } from 'vue';
-import { Checkbox,CheckboxGroup,Icon } from '@nutui/nutui-taro';
-
+import { Checkbox,CheckboxGroup } from '@nutui/nutui-taro';
+import { Checklist } from '@nutui/icons-vue-taro';
 const app = createApp();
 app.use(Checkbox);
 app.use(CheckboxGroup);
-app.use(Icon);
+app.use(Checklist);
 ```
 
 ### 基础用法
@@ -131,13 +131,17 @@ app.use(Icon);
 
 ### 自定义图标
 
-这里建议同时设置 `icon-name` 和 `icon-active-name` 属性
+通过slot自定义图标，建议同时设置`icon`和`checkedIcon`两个插槽
 
 :::demo
 
 ```html
 <template>
-  <nut-checkbox v-model="checkbox7" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-checkbox>
+  <nut-checkbox v-model="checkbox7" >
+    自定义图标
+    <template #icon> <Checklist /> </template>
+    <template #checkedIcon> <Checklist color="red" /> </template>
+  </nut-checkbox>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
@@ -382,10 +386,15 @@ app.use(Icon);
 | icon-name | [图标名称](#/zh-CN/component/icon)，选中前(建议和`icon-active-name`一起修改) | String | `'check-normal'`
 | icon-active-name | [图标名称](#/zh-CN/component/icon)，选中后(建议和`icon-name`一起修改) | String | `'checked'`
 | icon-indeterminate-name | [图标名称](#/zh-CN/component/icon)，半选状态 | String | `'check-disabled'`
-| icon-class-prefix | 自定义 icon 类名前缀，用于使用自定义图标        | String                  | `nut-icon` |
-| icon-font-class-name | 自定义 icon 字体基础类名        | String                  | `nutui-iconfont` |
 | label | 复选框的文本内容 | String | -
 | indeterminate | 当前是否支持半选状态，一般用在全选操作中        | Boolean                  | `false` |
+
+### Checkbox Slots
+| 名称 | 说明 |
+|-|-|
+| icon | 未选中时的图标 |
+| checkedIcon | 选中时的图标 |
+| indeterminate | 半选时的图标 |
 ### CheckboxGroup Props
 
 | 字段 | 说明 | 类型 | 默认值

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

@@ -2,6 +2,7 @@
 import { createComponent } from '@/packages/utils/create';
 const { create, componentName } = createComponent('checkbox');
 import { component } from './common';
-import nutIcon from '../icon/index.taro.vue';
-export default create(component(componentName, nutIcon));
+import { CheckNormal, Checked, CheckDisabled } from '@nutui/icons-vue-taro';
+
+export default create(component(componentName, { CheckNormal, Checked, CheckDisabled }));
 </script>

src/packages/__VUE/checkbox/index.vue

@@ -2,6 +2,7 @@
 import { createComponent } from '@/packages/utils/create';
 const { create, componentName } = createComponent('checkbox');
 import { component } from './common';
-import nutIcon from '../icon/index.vue';
-export default create(component(componentName, nutIcon));
+import { CheckNormal, Checked, CheckDisabled } from '@nutui/icons-vue';
+
+export default create(component(componentName, { CheckNormal, Checked, CheckDisabled }));
 </script>

src/packages/__VUE/comment/components/CmtHeader.vue

@@ -52,7 +52,6 @@ export default create({
       default: () => ''
     }
   },
-  components: {},
   emits: ['handleClick'],
 
   setup(props, { emit }) {

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

@@ -48,6 +48,7 @@ import { Right } from '@nutui/icons-vue-taro';
 import CommentHeader from './components/CmtHeader.vue';
 import CommentImages from './components/CmtImages.vue';
 import CommentBottom from './components/CmtBottom.vue';
+import { Rate } from '@/packages/nutui.vue';
 
 interface VideosType {
   id: number | string;
@@ -107,6 +108,7 @@ export default create({
     }
   },
   components: {
+    [Rate.name]: Rate,
     CommentHeader,
     CommentImages,
     CommentBottom,

src/packages/__VUE/comment/index.vue

@@ -42,6 +42,7 @@ import { ref, onMounted, computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('comment');
 import { JoySmile, Right } from '@nutui/icons-vue';
+import Rate from '../rate/index.vue';
 
 import CommentHeader from './components/CmtHeader.vue';
 import CommentImages from './components/CmtImages.vue';
@@ -105,6 +106,7 @@ export default create({
     }
   },
   components: {
+    [Rate.name]: Rate,
     CommentHeader,
     CommentImages,
     CommentBottom,

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

@@ -23,7 +23,7 @@
 <script lang="ts">
 import { toRefs, watch, computed, reactive, onBeforeMount } from 'vue';
 import type { PropType } from 'vue';
-import nutPicker from '../picker/index.taro.vue';
+import Picker from '../picker/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
 import { padZero, isDate as isDateU } from '@/packages/utils/util';
 const { componentName, create } = createComponent('date-picker');
@@ -45,7 +45,7 @@ const zhCNType: {
 };
 export default create({
   components: {
-    nutPicker
+    [Picker.name]: Picker
   },
   props: {
     modelValue: null,

src/packages/__VUE/imagepreview/imagePreviewItem.vue

@@ -20,6 +20,7 @@ import { useTouch } from '@/packages/utils/useTouch';
 import { preventDefault, clamp } from '@/packages/utils/util';
 import { ImageInterface } from './types';
 import { baseProps } from './types';
+import Video from '../video/index.vue';
 const { create } = createComponent('image-preview-item');
 
 export default create({
@@ -43,7 +44,9 @@ export default create({
     }
   },
   emits: ['close', 'scale'],
-  components: {},
+  components: {
+    [Video.name]: Video
+  },
 
   setup(props, { emit }) {
     const state = reactive({

src/packages/__VUE/imagepreview/index.vue

@@ -54,6 +54,9 @@ import ImagePreviewItem from './imagePreviewItem.vue';
 import { ImageInterface, baseProps } from './types';
 const { create } = createComponent('image-preview');
 import { CircleClose } from '@nutui/icons-vue';
+import Popup from '../popup/index.vue';
+import Swiper from '../swiper/index.vue';
+import SwiperItem from '../swiperitem/index.vue';
 
 export default create({
   props: {
@@ -87,7 +90,10 @@ export default create({
   emits: ['close', 'change'],
   components: {
     ImagePreviewItem: ImagePreviewItem,
-    CircleClose
+    CircleClose,
+    [Popup.name]: Popup,
+    [Swiper.name]: Swiper,
+    [SwiperItem.name]: SwiperItem
   },
 
   setup(props, { emit }) {

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

@@ -126,61 +126,61 @@ test('menu item title props: nut-menu__title-text html should contain custom tit
   expect(wrapper.find('.nut-menu__title-text').html()).toContain('custom title');
 });
 
-test('menu item title icon props: nut-menu__title i classes should contain nut-icon-joy-smile', async () => {
-  const wrapper = mount(Menu, {
-    props: {
-      titleIcon: 'joy-smile'
-    },
-    slots: {
-      default: h(MenuItem, {
-        modelValue: 0,
-        options: options1
-      })
-    }
-  });
-  await nextTick();
-
-  const titleIcon: any = wrapper.find('.nut-menu__item .nut-menu__title i');
-  expect(titleIcon.classes()).toContain('nut-icon-joy-smile');
-});
-
-test('menu item option icon props: nut-menu-item__option i classes should contain nut-icon-checklist', async () => {
-  const wrapper = mount(Menu, {
-    slots: {
-      default: h(MenuItem, {
-        optionIcon: 'checklist',
-        modelValue: 0,
-        options: options1
-      })
-    }
-  });
-
-  await nextTick();
-
-  const optionIcon: any = wrapper.find<HTMLElement>('.nut-menu-item__option i');
-  expect(optionIcon.classes()).toContain('nut-icon-checklist');
-});
-
-test('menu direction props: nut-menu__title i classes should contain nut-icon-arrow-up', async () => {
-  const wrapper = mount(Menu, {
-    props: {
-      direction: 'up'
-    },
-    slots: {
-      default: h(MenuItem, {
-        modelValue: 0,
-        options: options1
-      })
-    }
-  });
-
-  await nextTick();
-
-  const titleIcon: any = wrapper.find<HTMLElement>('.nut-menu__title i');
-  expect(titleIcon.classes()).toContain('nut-icon-arrow-up');
-});
-
-test('active color props: i in active nut-menu-item__option color and active nut-menu__item color should be both green', async () => {
+// test('menu item title icon props: nut-menu__title i classes should contain nut-icon-joy-smile', async () => {
+//   const wrapper = mount(Menu, {
+//     props: {
+//       titleIcon: 'joy-smile'
+//     },
+//     slots: {
+//       default: h(MenuItem, {
+//         modelValue: 0,
+//         options: options1
+//       })
+//     }
+//   });
+//   await nextTick();
+
+//   const titleIcon: any = wrapper.find('.nut-menu__item .nut-menu__title i');
+//   expect(titleIcon.classes()).toContain('nut-icon-joy-smile');
+// });
+
+// test('menu item option icon props: nut-menu-item__option i classes should contain nut-icon-checklist', async () => {
+//   const wrapper = mount(Menu, {
+//     slots: {
+//       default: h(MenuItem, {
+//         optionIcon: 'checklist',
+//         modelValue: 0,
+//         options: options1
+//       })
+//     }
+//   });
+
+//   await nextTick();
+
+//   const optionIcon: any = wrapper.find<HTMLElement>('.nut-menu-item__option i');
+//   expect(optionIcon.classes()).toContain('nut-icon-checklist');
+// });
+
+// test('menu direction props: nut-menu__title i classes should contain nut-icon-arrow-up', async () => {
+//   const wrapper = mount(Menu, {
+//     props: {
+//       direction: 'up'
+//     },
+//     slots: {
+//       default: h(MenuItem, {
+//         modelValue: 0,
+//         options: options1
+//       })
+//     }
+//   });
+
+//   await nextTick();
+
+//   const titleIcon: any = wrapper.find<HTMLElement>('.nut-menu__title i');
+//   expect(titleIcon.classes()).toContain('nut-icon-arrow-up');
+// });
+
+test('active color props: icon in active nut-menu-item__option color and active nut-menu__item color should be both green', async () => {
   const wrapper = mount(Menu, {
     props: {
       activeColor: 'green'
@@ -196,9 +196,8 @@ test('active color props: i in active nut-menu-item__option color and active nut
   await nextTick();
   wrapper.find('.nut-menu__item').trigger('click');
   await nextTick();
-
   expect(wrapper.find<HTMLElement>('.nut-menu__item.active').element.style.color).toEqual('green');
-  expect(wrapper.find<HTMLElement>('.nut-menu-item__option.active i').element.style.color).toEqual('green');
+  // expect(wrapper.find<HTMLElement>('.nut-menu-item__option.active svg').element.style.color).toEqual('green');
 });
 
 test('menu item change props: value2 should be b after click', async () => {
@@ -324,6 +323,6 @@ test('menu item open and close events: should be both emitted', async () => {
   wrapper.find('.nut-menu__item').trigger('click');
   expect(wrapper.vm.value2).toBe('b');
 
-  wrapper.find('.placeholder-element').trigger('click');
+  wrapper.find('.nut-menu-item-placeholder-element').trigger('click');
   expect(wrapper.vm.value2).toBe('c');
 });

src/packages/__VUE/menu/demo.vue

@@ -25,9 +25,16 @@
       <nut-menu-item v-model="state.value2" @change="handleChange" :options="options2" />
     </nut-menu>
     <h2>{{ translate('customIcons') }}</h2>
-    <nut-menu titleIcon="joy-smile">
+    <nut-menu>
+      <template #icon>
+        <TriangleDown />
+      </template>
       <nut-menu-item v-model="state.value1" :options="options1" />
-      <nut-menu-item v-model="state.value2" @change="handleChange" :options="options2" optionIcon="checklist" />
+      <nut-menu-item v-model="state.value2" @change="handleChange" :options="options2">
+        <template #icon>
+          <Checked></Checked>
+        </template>
+      </nut-menu-item>
     </nut-menu>
     <h2>{{ translate('expandDirection') }}</h2>
     <nut-menu direction="up">
@@ -47,6 +54,7 @@ import { reactive, ref, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('menu');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { TriangleDown, Checked } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -121,6 +129,10 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: {
+    TriangleDown,
+    Checked
+  },
   props: {},
   setup() {
     initTranslate();

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

@@ -9,13 +9,14 @@ The menu list that pops down downwards.
 ``` javascript
 import { createApp } from 'vue';
 import { Menu, MenuItem,Overlay, Popup } from '@nutui/nutui';
-
+import { TriangleDown, Checked } from '@nutui/icons-vue';
 const app = createApp();
 app.use(Menu);
 app.use(MenuItem);
 app.use(Overlay);
 app.use(Popup);
-
+app.use(TriangleDown);
+app.use(Checked);
 ```
 
 ### Basic Usage
@@ -219,8 +220,15 @@ export default {
 ```html
 <template>
   <nut-menu>
-    <nut-menu-item v-model="state.value1" :options="state.options1" titleIcon="joy-smile" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" optionIcon="checklist" />
+    <template #icon>
+      <TriangleDown />
+    </template>
+    <nut-menu-item v-model="state.value1" :options="options1" />
+    <nut-menu-item v-model="state.value2" @change="handleChange" :options="options2">
+      <template #icon>
+        <Checked></Checked>
+      </template>
+    </nut-menu-item>
   </nut-menu>
 </template>
 
@@ -387,8 +395,10 @@ export default {
 | scroll-fixed           | Whether to fixed when window is scrolled, fixed position can be set | Boolean、String、Number | false   |
 | title-class            | Custome title class                                                 | String                  | -       |
 | lock-scroll            | Whether the background is locked                                    | Boolean                 | true    |
-| title-icon               | Custome title icon                                                  | String                  | -       |
-
+### Menu Slots
+| Name | Description |
+|-|-|
+| icon | Custom title icon |
 ### MenuItem Props
 
 | Attribute | Description                          | Type    | Default        |
@@ -398,15 +408,15 @@ export default {
 | disabled  | Whether to disable dropdown item     | Boolean | false          |
 | cols      | Display how many options in one line | Number  | 1              |
 
-| option-icon         | Custome option icon                  | String  | 'Check'        |
 | direction           | Expand direction, can be set to up   | String  | 'down'         |
 | active-title-class   | Active custome title class           | String  | -              |
 | inactive-title-class | Inactive custome title class         | String  | -              |
-| 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`       |
-
 
 
+### MenuItem Slots
+| Name | Description |
+|-|-|
+| icon | Custom option icon |
 ### MenuItem Events
 
 | Event  | Description                   | Arguments      |

src/packages/__VUE/menu/doc.md

@@ -9,12 +9,14 @@
 ``` javascript
 import { createApp } from 'vue';
 import { Menu, MenuItem,Overlay, Popup } from '@nutui/nutui';
+import { TriangleDown, Checked } from '@nutui/icons-vue';
 const app = createApp();
 app.use(Menu);
 app.use(MenuItem);
 app.use(Overlay);
 app.use(Popup);
-
+app.use(TriangleDown);
+app.use(Checked);
 ```
 
 
@@ -219,8 +221,15 @@ export default {
 ```html
 <template>
   <nut-menu>
-    <nut-menu-item v-model="state.value1" :options="state.options1" titleIcon="joy-smile" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" optionIcon="checklist" />
+    <template #icon>
+      <TriangleDown />
+    </template>
+    <nut-menu-item v-model="state.value1" :options="options1" />
+    <nut-menu-item v-model="state.value2" @change="handleChange" :options="options2">
+      <template #icon>
+        <Checked></Checked>
+      </template>
+    </nut-menu-item>
   </nut-menu>
 </template>
 
@@ -387,8 +396,11 @@ export default {
 | scroll-fixed           | 滚动后是否固定，可设置固定位置 | Boolean、String、Number | false   |
 | title-class            | 自定义标题样式类               | String                  | -       |
 | lock-scroll            | 背景是否锁定                   | Boolean                 | true    |
-| title-icon              | 自定义标题图标                 | String                  | -       |
 
+### Menu Slots
+| 名称 | 说明 |
+|-|-|
+| icon | 自定义标题图标 |
 
 ### MenuItem Props
 
@@ -398,13 +410,13 @@ export default {
 | options                       | 选项数组                                | Array   | -                |
 | disabled                      | 是否禁用菜单                            | Boolean | false            |
 | cols                          | 可以设置一行展示多少列 options          | Number  | 1                |
-| option-icon         | 自定义选项图标                          | String  | 'Check'          |
 | direction          | 菜单展开方向，可选值为up                | String  | 'down'           |
 | active-title-class   | 选项选中时自定义标题样式类              | String  | -                |
 | inactive-title-class | 选项非选中时自定义标题样式类            | String  | -                |
-| font-class-name       | 自定义icon 字体基础类名                 | string  | `nutui-iconfont` |
-| class-prefix          | 自定义icon 类名前缀，用于使用自定义图标 | string  | `nut-icon`       |
-
+### MenuItem Slots
+| 名称 | 说明 |
+|-|-|
+| icon | 自定义选项图标 |
 ### MenuItem Events
 
 | 事件名 | 说明                 | 回调参数     |

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

@@ -9,12 +9,14 @@
 ``` javascript
 import { createApp } from 'vue';
 import { Menu, MenuItem,Overlay, Popup } from '@nutui/nutui-taro';
+import { TriangleDown, Checked } from '@nutui/icons-vue-taro';
 const app = createApp();
 app.use(Menu);
 app.use(MenuItem);
 app.use(Overlay);
 app.use(Popup);
-
+app.use(TriangleDown);
+app.use(Checked);
 ```
 
 
@@ -219,8 +221,15 @@ export default {
 ```html
 <template>
   <nut-menu>
-    <nut-menu-item v-model="state.value1" :options="state.options1" titleIcon="joy-smile" />
-    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" optionIcon="checklist" />
+    <template #icon>
+      <TriangleDown />
+    </template>
+    <nut-menu-item v-model="state.value1" :options="options1" />
+    <nut-menu-item v-model="state.value2" @change="handleChange" :options="options2">
+      <template #icon>
+        <Checked></Checked>
+      </template>
+    </nut-menu-item>
   </nut-menu>
 </template>
 
@@ -387,9 +396,11 @@ export default {
 | scroll-fixed           | 滚动后是否固定，可设置固定位置 | Boolean、String、Number | false   |
 | title-class           | 自定义标题样式类               | String                  | -       |
 | lock-scroll           | 背景是否锁定                   | Boolean                 | true    |
-| title-icon              | 自定义标题图标                 | String                  | -       |
-
 
+### Menu Slots
+| 名称 | 说明 |
+|-|-|
+| icon | 自定义标题图标 |
 ### MenuItem Props
 
 | 参数                          | 说明                                    | 类型    | 默认值           |
@@ -398,13 +409,13 @@ export default {
 | options                       | 选项数组                                | Array   | -                |
 | disabled                      | 是否禁用菜单                            | Boolean | false            |
 | cols                          | 可以设置一行展示多少列 options          | Number  | 1                |
-| option-icon         | 自定义选项图标                          | String  | 'Check'          |
 | direction          | 菜单展开方向，可选值为up                | String  | 'down'           |
 | active-title-class   | 选项选中时自定义标题样式类              | String  | -                |
 | inactive-title-class | 选项非选中时自定义标题样式类            | String  | -                |
-| font-class-name       | 自定义icon 字体基础类名                 | string  | `nutui-iconfont` |
-| class-prefix          | 自定义icon 类名前缀，用于使用自定义图标 | string  | `nut-icon`       |
-
+### MenuItem Slots
+| 名称 | 说明 |
+|-|-|
+| icon | 自定义选项图标 |
 ### MenuItem Events
 
 | 事件名 | 说明                 | 回调参数     |

src/packages/__VUE/menu/index.scss

@@ -46,6 +46,7 @@
 
       .nut-menu__title-icon {
         transition: all 0.2s linear;
+        display: flex;
       }
 
       .nut-menu__title {

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

@@ -10,12 +10,12 @@
         >
           <view class="nut-menu__title" :class="getClasses(item.state.showPopup)">
             <view class="nut-menu__title-text">{{ item.renderTitle() }}</view>
-            <nut-icon
-              v-bind="$attrs"
-              :name="titleIcon || (direction === 'up' ? 'arrow-up' : 'down-arrow')"
-              size="10"
-              class="nut-menu__title-icon"
-            ></nut-icon>
+            <span class="nut-menu__title-icon">
+              <slot name="icon">
+                <ArrowUp2 v-if="direction === 'up'" />
+                <ArrowDown2 v-else />
+              </slot>
+            </span>
           </view>
         </view>
       </template>
@@ -29,7 +29,13 @@ import { createComponent } from '@/packages/utils/create';
 import Taro, { usePageScroll } from '@tarojs/taro';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
 const { componentName, create } = createComponent('menu');
+import { ArrowUp2, ArrowDown2 } from '@nutui/icons-vue-taro';
+
 export default create({
+  components: {
+    ArrowUp2,
+    ArrowDown2
+  },
   props: {
     activeColor: {
       type: String,

src/packages/__VUE/menu/index.vue

@@ -10,12 +10,12 @@
         >
           <view class="nut-menu__title" :class="getClasses(item.state.showPopup)">
             <view class="nut-menu__title-text">{{ item.renderTitle() }}</view>
-            <nut-icon
-              v-bind="$attrs"
-              :name="titleIcon || (direction === 'up' ? 'arrow-up' : 'down-arrow')"
-              size="10"
-              class="nut-menu__title-icon"
-            ></nut-icon>
+            <span class="nut-menu__title-icon">
+              <slot name="icon">
+                <ArrowUp2 v-if="direction === 'up'" />
+                <ArrowDown2 v-else />
+              </slot>
+            </span>
           </view>
         </view>
       </template>
@@ -28,7 +28,12 @@ import { reactive, provide, computed, ref, onMounted, onUnmounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useRect } from '@/packages/utils/useRect';
 const { componentName, create } = createComponent('menu');
+import { ArrowUp2, ArrowDown2 } from '@nutui/icons-vue';
 export default create({
+  components: {
+    ArrowUp2,
+    ArrowDown2
+  },
   props: {
     activeColor: {
       type: String,

src/packages/__VUE/menuitem/index.scss

@@ -7,7 +7,7 @@
 }
 
 .nut-menu-item {
-  &.active {
+  .active {
     font-weight: $menu-active-item-font-weight;
     color: $menu-item-active-text-color !important;
   }
@@ -30,7 +30,9 @@
     display: flex;
     align-items: center;
 
-    i {
+    .nut-menu-item__span {
+      display: flex;
+      align-items: center;
       margin-right: $menu-item-option-i-margin-right;
     }
   }

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

@@ -39,16 +39,18 @@
             :style="{ 'flex-basis': 100 / cols + '%' }"
             @click="onClick(option)"
           >
-            <nut-icon
+            <span
+              class="nut-menu-item__span"
+              v-if="option.value === modelValue"
               :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>
+            >
+              <slot name="icon">
+                <Check v-bind="$attrs" :color="parent.props.activeColor"></Check>
+              </slot>
+            </span>
             <view
               :class="{
                 activeTitleClass: option.value === modelValue,
@@ -68,9 +70,10 @@
 import { reactive, PropType, inject, getCurrentInstance, computed, onUnmounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('menu-item');
-import Icon from '../icon/index.taro.vue';
 import Popup from '../popup/index.taro.vue';
 import NutScrollView from '../scrollView/index.taro.vue';
+import { Check } from '@nutui/icons-vue-taro';
+
 let _zIndex = 2000;
 
 export default create({
@@ -97,7 +100,7 @@ export default create({
     }
   },
   components: {
-    [Icon.name]: Icon,
+    Check,
     [Popup.name]: Popup,
     NutScrollView
   },

src/packages/__VUE/menuitem/index.vue

@@ -38,13 +38,15 @@
           :style="{ 'flex-basis': 100 / cols + '%' }"
           @click="onClick(option)"
         >
-          <nut-icon
-            v-bind="$attrs"
-            :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }"
+          <span
+            class="nut-menu-item__span"
             v-if="option.value === modelValue"
-            :name="optionIcon"
-            :color="parent.props.activeColor"
-          ></nut-icon>
+            :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }"
+          >
+            <slot name="icon">
+              <Check v-bind="$attrs" :color="parent.props.activeColor"></Check>
+            </slot>
+          </span>
           <view
             :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }"
             :style="{ color: option.value === modelValue ? parent.props.activeColor : '' }"
@@ -60,9 +62,8 @@
 import { reactive, PropType, inject, getCurrentInstance, computed, onUnmounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('menu-item');
-import Icon from '../icon/index.vue';
 import Popup from '../popup/index.vue';
-
+import { Check } from '@nutui/icons-vue';
 export default create({
   props: {
     title: String,
@@ -87,8 +88,8 @@ export default create({
     }
   },
   components: {
-    [Icon.name]: Icon,
-    [Popup.name]: Popup
+    [Popup.name]: Popup,
+    Check
   },
   emits: ['update:modelValue', 'change', 'open', 'close'],
   setup(props, { emit, slots }) {

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

@@ -12,7 +12,7 @@
       @click="handleClick"
       v-if="direction == 'across'"
     >
-      <view class="nut-noticebar__page-lefticon" v-if="iconShow">
+      <view class="nut-noticebar__page-lefticon">
         <slot name="left-icon" v-if="$slots['left-icon']"> </slot>
         <component :is="renderIcon(leftIcon)" v-else></component>
       </view>
@@ -208,14 +208,6 @@ export default create({
       };
     });
 
-    const iconShow = computed(() => {
-      if (props.leftIcon == 'close') {
-        return false;
-      } else {
-        return true;
-      }
-    });
-
     const barStyle = computed(() => {
       let style: {
         [props: string]: any;
@@ -237,14 +229,6 @@ export default create({
         transform: `translateX(${state.firstRound ? 0 : state.wrapWidth + 'px'})`
       };
     });
-
-    const iconBg = computed(() => {
-      let iconBg = '';
-      if (props.leftIcon) {
-        iconBg = props.leftIcon;
-      }
-      return iconBg;
-    });
     const horseLampStyle = computed(() => {
       let styles = {};
       if (props.complexAm) {
@@ -414,10 +398,8 @@ export default create({
       ...toRefs(state),
       isEllipsis,
       classes,
-      iconShow,
       barStyle,
       contentStyle,
-      iconBg,
       horseLampStyle,
       wrap,
       content,

src/packages/__VUE/noticebar/index.vue

@@ -12,7 +12,7 @@
       @click="handleClick"
       v-if="direction == 'across'"
     >
-      <view class="nut-noticebar__page-lefticon" v-if="iconShow">
+      <view class="nut-noticebar__page-lefticon">
         <slot name="left-icon" v-if="$slots['left-icon']"> </slot>
         <component :is="renderIcon(leftIcon)" v-else></component>
       </view>
@@ -216,14 +216,6 @@ export default create({
       };
     });
 
-    const iconShow = computed(() => {
-      if (props.leftIcon == 'close') {
-        return false;
-      } else {
-        return true;
-      }
-    });
-
     const barStyle = computed(() => {
       let style: {
         [props: string]: any;
@@ -245,13 +237,6 @@ export default create({
         transform: `translateX(${state.firstRound ? 0 : state.wrapWidth + 'px'})`
       };
     });
-    const iconBg = computed(() => {
-      let iconBg = '';
-      if (props.leftIcon) {
-        iconBg = props.leftIcon;
-      }
-      return iconBg;
-    });
     const horseLampStyle = computed(() => {
       let styles = {};
       if (props.complexAm) {
@@ -410,10 +395,8 @@ export default create({
       ...toRefs(state),
       isEllipsis,
       classes,
-      iconShow,
       barStyle,
       contentStyle,
-      iconBg,
       horseLampStyle,
       wrap,
       content,

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

@@ -71,10 +71,13 @@ import { useTaroRect } from '@/packages/utils/useTaroRect';
 import { rect } from '@/packages/utils/useRect';
 import { isArray } from '@/packages/utils/util';
 import Taro from '@tarojs/taro';
+import Popup from '../popup/index.taro.vue';
 
 export default create({
   inheritAttrs: false,
-  components: {},
+  components: {
+    [Popup.name]: Popup
+  },
   props: {
     visible: { type: Boolean, default: false },
     list: { type: Array as PropType<import('./type').PopoverList[]>, default: [] },

src/packages/__VUE/popover/index.vue

@@ -37,8 +37,12 @@ import { computed, watch, ref, PropType, CSSProperties, onMounted, h } from 'vue
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { isArray } from '@/packages/utils/util';
 import { useRect, rect } from '@/packages/utils/useRect';
+import Popup from '../popup/index.vue';
 const { create } = createComponent('popover');
 export default create({
+  components: {
+    [Popup.name]: Popup
+  },
   props: {
     visible: { type: Boolean, default: false },
     list: { type: Array as PropType<import('./type').PopoverList[]>, default: [] },

src/packages/__VUE/radio/demo.vue

@@ -57,8 +57,16 @@
     <nut-cell-group :title="translate('icon')">
       <nut-cell>
         <nut-radio-group v-model="radioVal5">
-          <nut-radio label="1" icon-name="checklist" icon-active-name="checklist">{{ translate('icon') }}</nut-radio>
-          <nut-radio label="2" icon-name="checklist" icon-active-name="checklist">{{ translate('icon') }}</nut-radio>
+          <nut-radio label="1">
+            {{ translate('icon') }}
+            <template #icon> <Checklist /> </template>
+            <template #checkedIcon> <Checklist color="red" /> </template>
+          </nut-radio>
+          <nut-radio label="2">
+            {{ translate('icon') }}
+            <template #icon> <Checklist /> </template>
+            <template #checkedIcon> <Checklist color="red" /> </template>
+          </nut-radio>
         </nut-radio-group>
       </nut-cell>
     </nut-cell-group>
@@ -79,6 +87,7 @@ import { createComponent } from '@/packages/utils/create';
 import { reactive, toRefs } from 'vue';
 const { createDemo, translate } = createComponent('radio');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Checklist } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -106,6 +115,9 @@ const initTranslate = () =>
   });
 export default createDemo({
   props: {},
+  components: {
+    Checklist
+  },
   setup() {
     initTranslate();
     const data = reactive({

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

@@ -9,11 +9,11 @@ Used to make a single selection in a set of alternatives
 ``` ts
 import { createApp } from 'vue';
 import { Radio,RadioGroup,Icon } from '@nutui/nutui';
-
+import { Checklist } from '@nutui/icons-vue'
 const app = createApp();
 app.use(Radio);
 app.use(RadioGroup);
-app.use(Icon);
+app.use(Checklist);
 ```
 ### Basic Usage
 
@@ -135,7 +135,7 @@ Bind the **label** of the current option through **v-model**. And it must be use
 
 ### Custom icon
 
-It is suggested to modify `icon-name` and `icon-active-name`
+Customize the icon through the slot, it is recommended to set the `icon` and `checkedIcon` two slots at the same time
 
 :::demo
 
@@ -144,8 +144,16 @@ It is suggested to modify `icon-name` and `icon-active-name`
   <nut-cell-group title="Radio Custom icon">
     <nut-cell>
       <nut-radio-group v-model="radioVal">
-        <nut-radio label="1" icon-name="checklist" icon-active-name="checklist">Custom icon</nut-radio>
-        <nut-radio label="2" icon-name="checklist" icon-active-name="checklist">Custom icon</nut-radio>
+        <nut-radio label="1">
+          Custom icon
+          <template #icon> <Checklist /> </template>
+          <template #checkedIcon> <Checklist color="red" /> </template>
+        </nut-radio>
+        <nut-radio label="2">
+          Custom icon
+          <template #icon> <Checklist /> </template>
+          <template #checkedIcon> <Checklist color="red" /> </template>
+        </nut-radio>
       </nut-radio-group>
     </nut-cell>
   </nut-cell-group>
@@ -204,13 +212,13 @@ It is suggested to modify `icon-name` and `icon-active-name`
 |------------------|--------------------------------------------------------------|-------------------------|-------------------|
 | disabled         | Disable selection                                           | Boolean                 | `false`           |
 | icon-size        | [Icon Size](#/en-US/icon)                                           | String、Number          | `18`              |
-| icon-name        | [Icon Name](#en-US//icon)，Before selection (it is suggested to modify it together with `icon-active-name`) | String                  | `'check-normal'`  |
-| icon-active-name | [Icon Name](#en-US//icon)，After selection (it is suggested to modify it together with `icon-name`)       | String                  | `'check-checked'` |
-| icon-class-prefix | Custom icon class name prefix, used to use custom icons        | String                  | `nut-icon` |
-| icon-font-class-name | Basic class name of custom icon font        | String                  | `nutui-iconfont` |
 | label            | Radio box ID                                                  | String、Number、Boolean | -                 |
 | shape            | Shape, optional values are `button`、`round`                                | String                  | round             |
-
+### Radio Slots
+| Name | Description |
+|-|-|
+| icon | Icon when not selected |
+| checkedIcon | Icon when selected |
 ### RadioGroup Props
 
 | Attribute          | Description                                          | Type                    | Default     |

src/packages/__VUE/radio/doc.md

@@ -8,12 +8,12 @@
 
 ``` ts
 import { createApp } from 'vue';
-import { Radio,RadioGroup,Icon } from '@nutui/nutui';
-
+import { Radio,RadioGroup } from '@nutui/nutui';
+import { Checklist } from '@nutui/icons-vue';
 const app = createApp();
 app.use(Radio);
 app.use(RadioGroup);
-app.use(Icon);
+app.use(Checklist);
 ```
 ### 基础用法
 
@@ -135,7 +135,7 @@ app.use(Icon);
 
 ### 自定义图标
 
-建议 `icon-name` `icon-active-name` 一起修改
+通过slot自定义图标，建议同时设置`icon`和`checkedIcon`两个插槽
 
 :::demo
 
@@ -144,8 +144,16 @@ app.use(Icon);
   <nut-cell-group title="Radio自定义图标">
     <nut-cell>
       <nut-radio-group v-model="radioVal">
-        <nut-radio label="1" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
-        <nut-radio label="2" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
+        <nut-radio label="1">
+          自定义图标
+          <template #icon> <Checklist /> </template>
+          <template #checkedIcon> <Checklist color="red" /> </template>
+        </nut-radio>
+        <nut-radio label="2">
+          自定义图标
+          <template #icon> <Checklist /> </template>
+          <template #checkedIcon> <Checklist color="red" /> </template>
+        </nut-radio>
       </nut-radio-group>
     </nut-cell>
   </nut-cell-group>
@@ -204,13 +212,14 @@ app.use(Icon);
 |------------------|--------------------------------------------------------------|-------------------------|-------------------|
 | disabled         | 是否禁用选择                                                 | Boolean                 | `false`           |
 | icon-size        | [图标尺寸](#/zh-CN/component/icon)                                           | String、Number          | `18`              |
-| icon-name        | [图标名称](#/zh-CN/component/icon)，选中前(建议和`icon-active-name`一起修改) | String                  | `'check-normal'`  |
-| icon-active-name | [图标名称](#/zh-CN/component/icon)，选中后(建议和`icon-name`一起修改)        | String                  | `'check-checked'` |
-| icon-class-prefix | 自定义 icon 类名前缀，用于使用自定义图标        | String                  | `nut-icon` |
-| icon-font-class-name | 自定义 icon 字体基础类名        | String                  | `nutui-iconfont` |
 | label            | 单选框标识                                                   | String、Number、Boolean | -                 |
 | shape            | 形状，可选值为 button、round                                 | String                  | round             |
 
+### Radio Slots
+| 名称 | 说明 |
+|-|-|
+| icon | 未选中时的图标 |
+| checkedIcon | 选中时的图标 |
 ### RadioGroup Props
 
 | 字段          | 说明                                          | 类型                    | 默认值     |

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

@@ -8,12 +8,12 @@
 
 ``` ts
 import { createApp } from 'vue';
-import { Radio,RadioGroup,Icon } from '@nutui/nutui-taro';
-
+import { Radio,RadioGroup } from '@nutui/nutui-taro';
+import { Checklist } from '@nutui/icons-vue-taro';
 const app = createApp();
 app.use(Radio);
 app.use(RadioGroup);
-app.use(Icon);
+app.use(Checklist);
 ```
 ### 基础用法
 
@@ -135,7 +135,7 @@ app.use(Icon);
 
 ### 自定义图标
 
-建议 `icon-name` `icon-active-name` 一起修改
+通过slot自定义图标，建议同时设置`icon`和`checkedIcon`两个插槽
 
 :::demo
 
@@ -144,8 +144,16 @@ app.use(Icon);
   <nut-cell-group title="Radio自定义图标">
     <nut-cell>
       <nut-radio-group v-model="radioVal">
-        <nut-radio label="1" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
-        <nut-radio label="2" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
+        <nut-radio label="1">
+          自定义图标
+          <template #icon> <Checklist /> </template>
+          <template #checkedIcon> <Checklist color="red" /> </template>
+        </nut-radio>
+        <nut-radio label="2">
+          自定义图标
+          <template #icon> <Checklist /> </template>
+          <template #checkedIcon> <Checklist color="red" /> </template>
+        </nut-radio>
       </nut-radio-group>
     </nut-cell>
   </nut-cell-group>
@@ -204,13 +212,13 @@ app.use(Icon);
 |------------------|--------------------------------------------------------------|-------------------------|-------------------|
 | disabled         | 是否禁用选择                                                 | Boolean                 | `false`           |
 | icon-size        | [图标尺寸](#/zh-CN/component/icon)                                           | String、Number          | `18`              |
-| icon-name        | [图标名称](#/zh-CN/component/icon)，选中前(建议和`icon-active-name`一起修改) | String                  | `'check-normal'`  |
-| icon-active-name | [图标名称](#/zh-CN/component/icon)，选中后(建议和`icon-name`一起修改)        | String                  | `'check-checked'` |
-| icon-class-prefix | 自定义 icon 类名前缀，用于使用自定义图标        | String                  | `nut-icon` |
-| icon-font-class-name | 自定义 icon 字体基础类名        | String                  | `nutui-iconfont` |
 | label            | 单选框标识                                                   | String、Number、Boolean | -                 |
 | shape            | 形状，可选值为 button、round                                 | String                  | round             |
-
+### Radio Slots
+| 名称 | 说明 |
+|-|-|
+| icon | 未选中时的图标 |
+| checkedIcon | 选中时的图标 |
 ### RadioGroup Props
 
 | 字段          | 说明                                          | 类型                    | 默认值     |

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

@@ -1,10 +1,15 @@
 <script lang="ts">
 import { computed, h, inject } from 'vue';
-import nutIcon from '../icon/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('radio');
+import { CheckNormal, CheckChecked } from '@nutui/icons-vue-taro';
+import { pxCheck } from '@/packages/utils/pxCheck';
 
 export default create({
+  components: {
+    CheckNormal,
+    CheckChecked
+  },
   props: {
     disabled: {
       type: Boolean,
@@ -18,25 +23,9 @@ export default create({
       type: [String, Number, Boolean],
       default: ''
     },
-    iconName: {
-      type: String,
-      default: 'check-normal'
-    },
-    iconActiveName: {
-      type: String,
-      default: 'check-checked'
-    },
     iconSize: {
       type: [String, Number],
       default: ''
-    },
-    iconClassPrefix: {
-      type: String,
-      default: 'nut-icon'
-    },
-    iconFontClassName: {
-      type: String,
-      default: 'nutui-iconfont'
     }
   },
   setup(props, { emit, slots }) {
@@ -59,13 +48,18 @@ export default create({
     });
 
     const renderIcon = () => {
-      const { iconName, iconSize, iconActiveName, iconClassPrefix, iconFontClassName } = props;
-      return h(nutIcon, {
-        name: isCurValue.value ? iconActiveName : iconName,
-        size: iconSize,
-        class: color.value,
-        classPrefix: iconClassPrefix,
-        fontClassName: iconFontClassName
+      const { iconSize } = props;
+      const iconNodeMap = {
+        CheckNormal: slots.icon ? slots.icon : CheckNormal,
+        Checked: slots.checkedIcon ? slots.checkedIcon : CheckChecked
+      };
+      const iconNode = !isCurValue.value ? iconNodeMap.CheckNormal : iconNodeMap.Checked;
+      const size = pxCheck(iconSize);
+      return h(iconNode, {
+        width: size,
+        height: size,
+        size: size,
+        class: color.value
       });
     };
 

src/packages/__VUE/radio/index.vue

@@ -1,10 +1,15 @@
 <script lang="ts">
 import { computed, h, inject } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import nutIcon from '../icon/index.vue';
 const { componentName, create } = createComponent('radio');
+import { CheckNormal, CheckChecked } from '@nutui/icons-vue';
+import { pxCheck } from '@/packages/utils/pxCheck';
 
 export default create({
+  components: {
+    CheckNormal,
+    CheckChecked
+  },
   props: {
     disabled: {
       type: Boolean,
@@ -18,25 +23,9 @@ export default create({
       type: [String, Number, Boolean],
       default: ''
     },
-    iconName: {
-      type: String,
-      default: 'check-normal'
-    },
-    iconActiveName: {
-      type: String,
-      default: 'check-checked'
-    },
     iconSize: {
       type: [String, Number],
       default: ''
-    },
-    iconClassPrefix: {
-      type: String,
-      default: 'nut-icon'
-    },
-    iconFontClassName: {
-      type: String,
-      default: 'nutui-iconfont'
     }
   },
   setup(props, { emit, slots }) {
@@ -59,13 +48,18 @@ export default create({
     });
 
     const renderIcon = () => {
-      const { iconName, iconSize, iconActiveName, iconClassPrefix, iconFontClassName } = props;
-      return h(nutIcon, {
-        name: isCurValue.value ? iconActiveName : iconName,
-        size: iconSize,
-        class: color.value,
-        classPrefix: iconClassPrefix,
-        fontClassName: iconFontClassName
+      const { iconSize } = props;
+      const iconNodeMap = {
+        CheckNormal: slots.icon ? slots.icon : CheckNormal,
+        Checked: slots.checkedIcon ? slots.checkedIcon : CheckChecked
+      };
+      const iconNode = !isCurValue.value ? iconNodeMap.CheckNormal : iconNodeMap.Checked;
+      const size = pxCheck(iconSize);
+      return h(iconNode, {
+        width: size,
+        height: size,
+        size: size,
+        class: color.value
       });
     };
 

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

@@ -150,64 +150,8 @@ test('radio icon-size test', async () => {
   });
 
   const items: any = wrapper.findAll('.nut-radio');
-  expect((items[0].findAll('i') as any)[0].element.style.fontSize).toEqual('25px');
-  expect((items[1].findAll('i') as any)[0].element.style.fontSize).toEqual('12px');
-});
-
-test('radio icon-name test', async () => {
-  const wrapper = mount({
-    components: {
-      'nut-radio-group': RadioGroup,
-      'nut-radio': Radio
-    },
-    template: `
-      <template>
-        <nut-radio-group v-model="radioVal" direction="horizontal">
-          <nut-radio label="1" icon-size="25" icon-name="checklist" icon-active-name="checklist"></nut-radio>
-          <nut-radio label="2" icon-size="12"></nut-radio>
-        </nut-radio-group>
-      </template>
-    `,
-    setup() {
-      const state = reactive({
-        radioVal: ''
-      });
-      return {
-        ...toRefs(state)
-      };
-    }
-  });
-
-  const items = wrapper.findAll('.nut-radio');
-  expect((items[0].findAll('i') as any)[0].classes()).toContain('nut-icon-checklist');
-});
-
-test('radio label test', async () => {
-  const wrapper = mount({
-    components: {
-      'nut-radio-group': RadioGroup,
-      'nut-radio': Radio
-    },
-    template: `
-      <template>
-        <nut-radio-group v-model="radioVal" direction="horizontal">
-          <nut-radio icon-size="25" label="testlabel"></nut-radio>
-          <nut-radio label="2" icon-size="12"></nut-radio>
-        </nut-radio-group>
-      </template>
-    `,
-    setup() {
-      const state = reactive({
-        radioVal: ''
-      });
-      return {
-        ...toRefs(state)
-      };
-    }
-  });
-
-  const items = wrapper.findAll('.nut-radio');
-  expect((items[0].findAll('i') as any)[0].find('testlabel')).toBeTruthy();
+  expect((items[0].findAll('svg') as any)[0].element.style.width).toEqual('25px');
+  expect((items[1].findAll('svg') as any)[0].element.style.height).toEqual('12px');
 });
 
 test('radio shape test', async () => {

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

@@ -30,8 +30,12 @@
 <script lang="ts">
 import { computed, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Popup from '../popup/index.taro.vue';
 const { componentName, create, translate } = createComponent('time-select');
 export default create({
+  components: {
+    [Popup.name]: Popup
+  },
   props: {
     visible: {
       type: Boolean,

src/packages/__VUE/timeselect/index.vue

@@ -31,8 +31,12 @@
 <script lang="ts">
 import { computed, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Popup from '../popup/index.vue';
 const { componentName, create, translate } = createComponent('time-select');
 export default create({
+  components: {
+    [Popup.name]: Popup
+  },
   props: {
     visible: {
       type: Boolean,

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

@@ -70,6 +70,7 @@ import { createComponent } from '@/packages/utils/create';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
 import { Close } from '@nutui/icons-vue-taro';
 import Taro from '@tarojs/taro';
+import Popover from '../popover/index.taro.vue';
 
 interface StepOptions {
   target: Element;
@@ -81,6 +82,7 @@ interface StepOptions {
 const { create } = createComponent('tour');
 export default create({
   components: {
+    [Popover.name]: Popover,
     Close
   },
   props: {

src/packages/__VUE/tour/index.vue

@@ -69,6 +69,7 @@ import { PopoverLocation } from '../popover/type';
 import { createComponent } from '@/packages/utils/create';
 import { useRect } from '@/packages/utils/useRect';
 import { Close } from '@nutui/icons-vue';
+import Popover from '../popover/index.vue';
 
 interface StepOptions {
   target: Element;
@@ -80,6 +81,7 @@ interface StepOptions {
 const { create } = createComponent('tour');
 export default create({
   components: {
+    [Popover.name]: Popover,
     Close
   },
   props: {

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

@@ -35,7 +35,11 @@
     </nut-cell-group>
     <nut-cell-group title="自定义图标">
       <nut-cell>
-        <nut-checkbox v-model="checkbox7" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-checkbox>
+        <nut-checkbox v-model="checkbox7"
+          >自定义图标
+          <template #icon> <Checklist /> </template>
+          <template #checkedIcon> <Checklist color="red" /> </template>
+        </nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="点击触发change事件">
@@ -110,7 +114,11 @@
 </template>
 <script lang="ts">
 import { reactive, ref, toRefs, Ref } from 'vue';
+import { Checklist } from '@nutui/icons-vue-taro';
 export default {
+  components: {
+    Checklist
+  },
   setup(props, context) {
     const group = ref(null) as Ref;
     const group2 = ref(null) as Ref;

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

@@ -57,8 +57,16 @@
     <nut-cell-group title="Radio自定义图标">
       <nut-cell>
         <nut-radio-group v-model="radioVal5">
-          <nut-radio label="1" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
-          <nut-radio label="2" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
+          <nut-radio label="1">
+            自定义图标
+            <template #icon> <Checklist /> </template>
+            <template #checkedIcon> <Checklist color="red" /> </template>
+          </nut-radio>
+          <nut-radio label="2">
+            自定义图标
+            <template #icon> <Checklist /> </template>
+            <template #checkedIcon> <Checklist color="red" /> </template>
+          </nut-radio>
         </nut-radio-group>
       </nut-cell>
     </nut-cell-group>
@@ -76,8 +84,12 @@
 
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { Checklist } from '@nutui/icons-vue-taro';
 export default {
   props: {},
+  components: {
+    Checklist
+  },
   setup() {
     const data = reactive({
       radioVal: 1,

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

@@ -26,8 +26,15 @@
     </nut-menu>
     <h2>自定义图标</h2>
     <nut-menu>
-      <nut-menu-item v-model="state.value1" :options="state.options1" titleIcon="joy-smile" />
-      <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" optionIcon="checklist" />
+      <template #icon>
+        <TriangleDown />
+      </template>
+      <nut-menu-item v-model="state.value1" :options="state.options1" />
+      <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2">
+        <template #icon>
+          <Checked></Checked>
+        </template>
+      </nut-menu-item>
     </nut-menu>
     <h2>向上展开</h2>
     <nut-menu direction="up">
@@ -44,7 +51,12 @@
 
 <script>
 import { ref, reactive, toRefs } from 'vue';
+import { TriangleDown, Checked } from '@nutui/icons-vue-taro';
 export default {
+  components: {
+    TriangleDown,
+    Checked
+  },
   props: {},
   setup() {
     const state = reactive({

vite.config.build.taro.vue.disperse.ts

@@ -1,8 +1,7 @@
 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
 import vue from '@vitejs/plugin-vue';
 import path from 'path';
-const fs = require('fs-extra');
+import fs from 'fs-extra';
 import config from './package.json';
 import configPkg from './src/config.json';
 
@@ -45,37 +44,6 @@ export default defineConfig({
           whitespace: 'preserve'
         }
       }
-    }),
-    dts({
-      insertTypesEntry: true,
-      copyDtsFiles: false,
-      cleanVueFileName: false,
-      outputDir: path.resolve(__dirname, './dist/types'),
-      include: path.resolve(__dirname, './src/packages/__VUE'),
-      beforeWriteFile: (filePath: string, content: string) => {
-        const fileContent = `import { App, PropType, CSSProperties } from 'vue';
-declare type Install<T> = T & {
-  install(app: App): void;
-};
-`;
-        const start = 'declare const _sfc_main:';
-        const end = ';\nexport default _sfc_main;\n';
-        let name = Object.keys(input).find((item: string) => item.toLowerCase() === filePath.split('/').slice(-2)[0]);
-        name = name ? name : ' ';
-        const remain = `
-declare module 'vue' {
-  interface GlobalComponents {
-      Nut${name}: typeof _sfc_main;
-  }
-}     
-      `;
-        const inputs = content.match(RegExp(`${start}([\\s\\S]*?)${end}`));
-        const changeContent = inputs && inputs.length ? `${start} Install<${inputs[1]}>${end}${remain}` : content;
-        return {
-          filePath,
-          content: fileContent + changeContent
-        };
-      }
     })
   ],
   build: {