[new feature] Toast: add iconPrefix option (#3872)

src/toast/README.md

@@ -117,6 +117,7 @@ toast2.clear();
 | position | Can be set to `top` `middle` `bottom` | `string` | `middle` |
 | message | Message | `string` | `''` |
 | icon | Custom icon | `string` | - |
+| iconPrefix | Icon className prefix | `string` | `van-icon` |
 | mask | Whether to show mask | `boolean` | `false` |
 | forbidClick | Whether to forbid click background | `boolean` | `false` |
 | loadingType | Loading icon type, can be set to `spinner` | `string` | `circular` |

src/toast/README.zh-CN.md

@@ -117,6 +117,7 @@ toast2.clear();
 | position | 位置，可选值为 `top` `bottom` | `string` | `middle` | - |
 | message | 文本内容，支持通过`\n`换行 | `string` | `''` | - | - |
 | icon | 自定义图标，支持传入图标名称或图片链接，可选值见 Icon 组件 | `string` | - | 2.0.1 |
+| iconPrefix | 图标类名前缀 | `string` | `van-icon` | 2.0.9 |
 | mask | 是否显示背景遮罩层 | `boolean` | `false` | - |
 | forbidClick | 是否禁止背景点击 | `boolean` | `false` | - |
 | loadingType | 加载图标类型, 可选值为 `spinner` | `string` | `circular` | - |

src/toast/Toast.js

@@ -11,6 +11,7 @@ export default createComponent({
   props: {
     icon: String,
     className: null,
+    iconPrefix: String,
     loadingType: String,
     forbidClick: Boolean,
     message: [Number, String],
@@ -77,13 +78,13 @@ export default createComponent({
   },
 
   render(h) {
-    const { type, icon, message, loadingType } = this;
+    const { type, icon, message, iconPrefix, loadingType } = this;
 
     const hasIcon = icon || (type === 'success' || type === 'fail');
 
     function ToastIcon() {
       if (hasIcon) {
-        return <Icon class={bem('icon')} name={icon || type} />;
+        return <Icon class={bem('icon')} classPrefix={iconPrefix} name={icon || type} />;
       }
 
       if (type === 'loading') {

src/toast/index.js

@@ -12,6 +12,7 @@ const defaultOptions = {
   onClose: null,
   onOpened: null,
   duration: 3000,
+  iconPrefix: undefined,
   position: 'middle',
   forbidClick: false,
   loadingType: undefined,

src/toast/test/__snapshots__/index.spec.js.snap

@@ -12,6 +12,13 @@ exports[`icon prop 1`] = `
 </div>
 `;
 
+exports[`icon-prefix prop 1`] = `
+<div class="van-toast van-toast--middle" style="z-index: 2005;" name="van-fade"><i class="my-icon my-icon-star-o van-toast__icon">
+    <!----></i>
+  <div class="van-toast__text">Message</div>
+</div>
+`;
+
 exports[`show html toast 1`] = `
 <div class="van-toast van-toast--middle van-toast--text" style="z-index: 2003;" name="van-fade">
   <div class="van-toast__text">

src/toast/test/index.spec.js

@@ -60,6 +60,17 @@ test('icon prop', async () => {
   expect(toast.$el.outerHTML).toMatchSnapshot();
 });
 
+test('icon-prefix prop', async () => {
+  const toast = Toast({
+    message: 'Message',
+    icon: 'star-o',
+    iconPrefix: 'my-icon'
+  });
+
+  await later();
+  expect(toast.$el.outerHTML).toMatchSnapshot();
+});
+
 test('clear toast', () => {
   const toast1 = Toast();
   expect(toast1.value).toBeTruthy();