feat(Toast): add iconSize option (#8338)

src/icon/README.zh-CN.md

@@ -97,7 +97,7 @@ import 'vant/lib/icon/local.css';
 | dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge | 图标右上角徽标的内容 | _number \| string_ | - |
 | color | 图标颜色 | _string_ | `inherit` |
-| size | 图标大小，如 `20px` `2em`，默认单位为`px` | _number \| string_ | `inherit` |
+| size | 图标大小，如 `20px` `2em`，默认单位为 `px` | _number \| string_ | `inherit` |
 | class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` |
 | tag | HTML 标签 | _string_ | `i` |
 

src/toast/README.md

@@ -153,6 +153,7 @@ Toast.resetDefaultOptions('loading');
 | position | Can be set to `top` `middle` `bottom` | _string_ | `middle` |
 | message | Message | _string_ | `''` |
 | icon | Custom icon | _string_ | - |
+| iconSize | Custom icon size | _number \| string_ | `36px` |
 | iconPrefix | Icon className prefix | _string_ | `van-icon` |
 | overlay | Whether to show overlay | _boolean_ | `false` |
 | forbidClick | Whether to forbid click background | _boolean_ | `false` |

src/toast/README.zh-CN.md

@@ -166,6 +166,7 @@ Toast.resetDefaultOptions('loading');
 | position | 位置，可选值为 `top` `bottom` | _string_ | `middle` |
 | message | 文本内容，支持通过`\n`换行 | _string_ | `''` | - |
 | icon | 自定义图标，支持传入[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| iconSize | 自定义图标大小，如 `20px` `2em`，默认单位为 `px` | _number \| string_ | `36px` |
 | iconPrefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | overlay | 是否显示背景遮罩层 | _boolean_ | `false` |
 | forbidClick | 是否禁止背景点击 | _boolean_ | `false` |

src/toast/Toast.tsx

@@ -29,6 +29,7 @@ export default defineComponent({
     show: Boolean,
     overlay: Boolean,
     message: [Number, String],
+    iconSize: [Number, String],
     className: UnknownProp,
     iconPrefix: String,
     loadingType: String as PropType<LoadingType>,
@@ -89,6 +90,7 @@ export default defineComponent({
         return (
           <Icon
             name={icon || type}
+            size={props.iconSize}
             class={bem('icon')}
             classPrefix={iconPrefix}
           />

src/toast/index.tsx

@@ -14,6 +14,7 @@ export type ToastOptions = {
   overlay?: boolean;
   duration?: number;
   teleport?: TeleportProps['to'];
+  iconSize?: number | string;
   position?: ToastPosition;
   className?: unknown;
   transition?: string;
@@ -36,6 +37,7 @@ const defaultOptions: ToastOptions = {
   onOpened: undefined,
   duration: 2000,
   teleport: 'body',
+  iconSize: undefined,
   iconPrefix: undefined,
   position: 'middle',
   transition: 'van-fade',

src/toast/test/index.spec.ts

@@ -61,3 +61,16 @@ test('create a forbidClick toast', async () => {
     document.body.classList.contains('van-toast--unclickable')
   ).toBeFalsy();
 });
+
+test('should change icon size when using icon-size prop', async () => {
+  const wrapper = mount(Toast, {
+    props: {
+      show: true,
+      icon: 'success',
+      iconSize: '10',
+    },
+  });
+
+  await later();
+  expect(wrapper.find('.van-icon').style.fontSize).toEqual('10px');
+});