chore(toast): use icons-vue component

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

@@ -257,34 +257,33 @@ toast.hide();
 
 ## API
 ### Methods
-| Methods                    | Description              | Attribute          | Return value     |
-| ------------------------- | ----------------------------------------------------------------------- | --------------- | ---------- |
-| Toast.text                | Show text toast   |  message｜ options | toast instance(message support incoming HTML) |
-| Toast.success             | Show success toast     | message｜ options| toast instance |
-| Toast.fail                | Show fail toast   | message｜ options| toast instance|
-| Toast.warn                | Show warn toast    | message｜ options | toast instance |
-| Toast.hide                | Close toast     | clearAll: boolean   | void       |
-| Toast.loading             | Show loading toast      | message｜ options | toast instance |
+| Methods       | Description        | Attribute         | Return value                                  |
+|---------------|--------------------|-------------------|-----------------------------------------------|
+| Toast.text    | Show text toast    | message｜ options | toast instance(message support incoming HTML) |
+| Toast.success | Show success toast | message｜ options | toast instance                                |
+| Toast.fail    | Show fail toast    | message｜ options | toast instance                                |
+| Toast.warn    | Show warn toast    | message｜ options | toast instance                                |
+| Toast.hide    | Close toast        | clearAll: boolean | void                                          |
+| Toast.loading | Show loading toast | message｜ options | toast instance                                |
 
 ### ToastOptions
 
-| 字段                | 说明                                                                          | 类型          | 默认值                        |
-| ------------------- | ----------------------------------------------------------------------------- | ------------- | ----------------------------- |
-| id                  | Identifier, share one instance at the same time, default to multiple instances| String/Number | -            |
-| duration            | Toast duration(ms), won't disappear if value is 0      | Number        | 2000                          |
-| title            | title     | String        |           -             |
-| center  | Whether to display in the middle of the page (display at the bottom when false) | Boolean| true                          |
-| bottom | The distance from the bottom of the page (px or %), which takes effect when option.center is false | String| 30px       |
-| text-align-center     | Whether the multi-line copy is centered           | Boolean       | true                          |
-| bgColor             | background color (transparency) | String        | rgba(0, 0, 0, 0.8)      |
-| custom-class         |   Custom Class          | String        |          -                   |
-| icon                | Custom Icon        | String        |         -                   |
-| icon-size    | Custom iconSize      | String        | 20                           |
-| size        | Text Size **small**/**base**/**large**          | String        | base      |
-| cover      | Whether to show the mask layer     | Boolean       | false |
-| cover-color   | Cover Color   | String        | rgba(0,0,0,0)             |
-| loading-rotate  | Whether the loading icon is rotated, only valid for the loading type  | Boolean | true                          |
-| close             | Callback function after close                   | function      | null                          |
-| close-on-click-overlay | 	Whether to close when overlay is clicked                  | Boolean       | false                         |
-| custom-class          | Custom Class                      | String       |               -          |
+| 字段                   | 说明                                                                                               | 类型          | 默认值             |
+|------------------------|----------------------------------------------------------------------------------------------------|---------------|--------------------|
+| id                     | Identifier, share one instance at the same time, default to multiple instances                     | String/Number | -                  |
+| duration               | Toast duration(ms), won't disappear if value is 0                                                  | Number        | 2000               |
+| title                  | title                                                                                              | String        | -                  |
+| center                 | Whether to display in the middle of the page (display at the bottom when false)                    | Boolean       | true               |
+| bottom                 | The distance from the bottom of the page (px or %), which takes effect when option.center is false | String        | 30px               |
+| text-align-center      | Whether the multi-line copy is centered                                                            | Boolean       | true               |
+| bgColor                | background color (transparency)                                                                    | String        | rgba(0, 0, 0, 0.8) |
+| custom-class           | Custom Class                                                                                       | String        | -                  |
+| icon                   | Custom Icon                                                                                        | Component     | -                  |
+| size                   | Text Size **small**/**base**/**large**                                                             | String        | base               |
+| cover                  | Whether to show the mask layer                                                                     | Boolean       | false              |
+| cover-color            | Cover Color                                                                                        | String        | rgba(0,0,0,0)      |
+| loading-rotate         | Whether the loading icon is rotated, only valid for the loading type                               | Boolean       | true               |
+| close                  | Callback function after close                                                                      | function      | null               |
+| close-on-click-overlay | Whether to close when overlay is clicked                                                           | Boolean       | false              |
+| custom-class           | Custom Class                                                                                       | String        | -                  |
 

src/packages/__VUE/toast/doc.md

@@ -257,34 +257,33 @@ toast.hide();
 
 ## API
 ### 方法
-| 方法名                    | 说明                                                                    | 参数            | 返回值     |
-| ------------------------- | ----------------------------------------------------------------------- | --------------- | ---------- |
-| Toast.text                | 展示文字提示                                                            |  message｜ options | toast 实例(message支持传入HTML) |
-| Toast.success             | 展示成功提示                                                            | message｜ options| toast 实例 |
-| Toast.fail                | 展示失败提示                                                            | message｜ options| toast 实例 |
-| Toast.warn                | 展示警告提示                                                            | message｜ options | toast 实例 |
-| Toast.hide                | 关闭提示                                                                | 默认关闭所有实例，可传id关闭指定实例   | void       |
-| Toast.loading             | 展示加载提示                                                            | message｜ options | toast 实例 |
+| 方法名        | 说明         | 参数                                 | 返回值                          |
+|---------------|--------------|--------------------------------------|---------------------------------|
+| Toast.text    | 展示文字提示 | message｜ options                    | toast 实例(message支持传入HTML) |
+| Toast.success | 展示成功提示 | message｜ options                    | toast 实例                      |
+| Toast.fail    | 展示失败提示 | message｜ options                    | toast 实例                      |
+| Toast.warn    | 展示警告提示 | message｜ options                    | toast 实例                      |
+| Toast.hide    | 关闭提示     | 默认关闭所有实例，可传id关闭指定实例 | void                            |
+| Toast.loading | 展示加载提示 | message｜ options                    | toast 实例                      |
 
 ### ToastOptions 数据结构
 
-| 字段                | 说明                                                                          | 类型          | 默认值                        |
-| ------------------- | ----------------------------------------------------------------------------- | ------------- | ----------------------------- |
-| id                  | 标识符，相同时共用一个实例，默认为多个实例 | String/Number | -                       |
-| duration            | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失      | Number        | 2000                          |
-| title            | 标题     | String        |           -             |
-| center              | 是否展示在页面中部（为false时展示在底部）                                     | Boolean       | true                          |
-| bottom              | 距页面底部的距离（像素或者百分比），option.center为false时生效                          | String       | 30px                    |
-| text-align-center     | 多行文案是否居中                                                              | Boolean       | true                          |
-| bg-color             | 背景颜色（透明度）                                                            | String        | rgba(0, 0, 0, 0.8)      |
-| custom-class         | 自定义类名                                                                    | String        |          -                   |
-| icon                | 自定义图标，**支持图片链接或base64格式**                                        | String        |         -                   |
-| icon-size                | 自定义图标尺寸                                      | String        | 20                           |
-| size                | 文案尺寸，**small**/**base**/**large**三选一                                                  | String        | base                      |
-| cover               | 是否显示遮罩层                                          | Boolean       | false |
-| cover-color          | 遮罩层颜色，默认透明                                                          | String        | rgba(0,0,0,0)             |
-| loading-rotate       | loading图标是否旋转，仅对loading类型生效                                      | Boolean       | true                          |
-| close             | 关闭时触发的事件                                                              | function      | null                          |
-| close-on-click-overlay | 是否在点击遮罩层后关闭提示                                                    | Boolean       | false                         |
-| custom-class          | 提示框class                                                        | String       |               -          |
+| 字段                   | 说明                                                           | 类型          | 默认值             |
+|------------------------|----------------------------------------------------------------|---------------|--------------------|
+| id                     | 标识符，相同时共用一个实例，默认为多个实例                     | String/Number | -                  |
+| duration               | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失              | Number        | 2000               |
+| title                  | 标题                                                           | String        | -                  |
+| center                 | 是否展示在页面中部（为false时展示在底部）                      | Boolean       | true               |
+| bottom                 | 距页面底部的距离（像素或者百分比），option.center为false时生效 | String        | 30px               |
+| text-align-center      | 多行文案是否居中                                               | Boolean       | true               |
+| bg-color               | 背景颜色（透明度）                                             | String        | rgba(0, 0, 0, 0.8) |
+| custom-class           | 自定义类名                                                     | String        | -                  |
+| icon                   | 自定义图标，**直接传入Component 或者 h函数**                   | Component     | -                  |
+| size                   | 文案尺寸，**small**/**base**/**large**三选一                   | String        | base               |
+| cover                  | 是否显示遮罩层                                                 | Boolean       | false              |
+| cover-color            | 遮罩层颜色，默认透明                                           | String        | rgba(0,0,0,0)      |
+| loading-rotate         | loading图标是否旋转，仅对loading类型生效                       | Boolean       | true               |
+| close                  | 关闭时触发的事件                                               | function      | null               |
+| close-on-click-overlay | 是否在点击遮罩层后关闭提示                                     | Boolean       | false              |
+| custom-class           | 提示框class                                                    | String        | -                  |
 

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

@@ -77,7 +77,7 @@ export default {
 | text-align-center      | 多行文案是否居中                                                        | Boolean      | true                          |
 | bg-color               | 背景颜色（透明度）                                                      | String       | "rgba(0, 0, 0, 0.8)"          |
 | custom-class           | 自定义类名                                                              | String       | ""                            |
-| icon                   | 自定义图标，**对应icon组件，支持图片链接**                              | String       | ""                            |
+| icon                   | 自定义图标，**直接传入Component 或者 h函数**                            | Component    | -                             |
 | size                   | 文案尺寸，**small**/**base**/**large**三选一                            | String       | "base"                        |
 | cover                  | 是否显示遮罩层，loading类型默认显示                                     | Boolean      | loading类型true/其他类型false |
 | cover-color            | 遮罩层颜色，默认透明                                                    | String       | "rgba(0,0,0,0)"               |

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

@@ -21,7 +21,7 @@
           }"
         >
           <view v-if="hasIcon" class="nut-toast-icon-wrapper">
-            <nut-icon size="20" color="#ffffff" v-bind="$attrs" :name="iconName"></nut-icon>
+            <component :is="renderIcon(iconName)" color="#ffffff"></component>
           </view>
           <div v-if="title" class="nut-toast-title">
             {{ title }}
@@ -33,14 +33,12 @@
   </Transition>
 </template>
 <script lang="ts">
-import { computed, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { Component, computed, PropType, watch } from 'vue';
+import { createComponent, renderIcon } from '@/packages/utils/create';
 const { create } = createComponent('toast');
-import Icon from '../icon/index.taro.vue';
+import { Failure, Loading, Success, Tips } from '@nutui/icons-vue-taro';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  components: {},
   props: {
     id: String,
     msg: String,
@@ -65,7 +63,10 @@ export default create({
       type: [String, Number],
       default: 'base'
     },
-    icon: String,
+    icon: {
+      type: Object as PropType<Component>,
+      default: () => {}
+    },
     textAlignCenter: {
       type: Boolean,
       default: true
@@ -150,11 +151,11 @@ export default create({
         return props.icon;
       } else {
         return {
-          success: 'success',
-          fail: 'failure',
-          warn: 'tips',
-          loading: 'loading'
-        }[props.type];
+          success: Success,
+          fail: Failure,
+          warn: Tips,
+          loading: Loading
+        }[props.type] as any;
       }
     });
     const toastBodyClass = computed(() => {
@@ -181,7 +182,8 @@ export default create({
       hasIcon,
       iconName,
       toastBodyClass,
-      onAfterLeave
+      onAfterLeave,
+      renderIcon
     };
   }
 });

src/packages/__VUE/toast/index.ts

@@ -1,6 +1,7 @@
 import { createVNode, render, h } from 'vue';
 import Toast from './index.vue';
 import { CreateComponent } from '@/packages/utils/create';
+import { Failure, Loading, Success, Tips } from '@nutui/icons-vue';
 const defaultOptions = {
   msg: '',
   id: '',
@@ -98,19 +99,19 @@ export const ToastFunction = {
   },
   success(msg: string, opts = {}) {
     errorMsg(msg);
-    return mountToast({ icon: 'success', ...opts, msg, type: 'success' });
+    return mountToast({ icon: Success, ...opts, msg, type: 'success' });
   },
   fail(msg: string, opts = {}) {
     errorMsg(msg);
-    return mountToast({ icon: 'failure', ...opts, msg, type: 'fail' });
+    return mountToast({ icon: Failure, ...opts, msg, type: 'fail' });
   },
   warn(msg: string, opts = {}) {
     errorMsg(msg);
-    return mountToast({ icon: 'tips', ...opts, msg, type: 'warn' });
+    return mountToast({ icon: Tips, ...opts, msg, type: 'warn' });
   },
   loading(msg: string, opts = {}) {
     return mountToast({
-      icon: 'loading',
+      icon: Loading,
       ...opts,
       msg,
       type: 'loading'

src/packages/__VUE/toast/index.vue

@@ -17,7 +17,7 @@
         }"
       >
         <view v-if="hasIcon" :class="toastIconWrapperClass">
-          <nut-icon :size="iconSize" v-bind="$attrs" color="#ffffff" :name="icon"></nut-icon>
+          <component :is="renderIcon(icon)" color="#ffffff"></component>
         </view>
         <div v-if="title" class="nut-toast-title">
           {{ title }}
@@ -28,14 +28,11 @@
   </Transition>
 </template>
 <script lang="ts">
-import { toRefs, toRef, reactive, computed, watch, onMounted } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { reactive, computed, watch, onMounted, PropType, Component } from 'vue';
+import { createComponent, renderIcon } from '@/packages/utils/create';
 const { create } = createComponent('toast');
-import Icon from '../icon/index.vue';
 export default create({
-  components: {
-    [Icon.name]: Icon
-  },
+  components: {},
   props: {
     id: String,
     msg: String,
@@ -57,11 +54,10 @@ export default create({
       type: [String, Number],
       default: 'base'
     },
-    iconSize: {
-      type: String,
-      default: '20'
+    icon: {
+      type: Object as PropType<Component>,
+      default: () => {}
     },
-    icon: String,
     textAlignCenter: {
       type: Boolean,
       default: true
@@ -173,7 +169,8 @@ export default create({
       hasIcon,
       toastBodyClass,
       toastIconWrapperClass,
-      onAfterLeave
+      onAfterLeave,
+      renderIcon
     };
   }
 });

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

@@ -70,16 +70,4 @@ describe('component toast', () => {
     let toast: any = wrapper.find('.custom');
     expect(toast.exists()).toBe(true);
   });
-  test('should change icon size when using icon-size prop', async () => {
-    const wrapper = mount(Toast, {
-      props: {
-        icon: 'success',
-        iconSize: '30'
-      }
-    });
-
-    await sleep();
-    let icon: any = wrapper.find('.nut-icon');
-    expect(icon.element.style.fontSize).toEqual('30px');
-  });
 });