From 723c51bac98bb751af44f13737fba12deb298dd4 Mon Sep 17 00:00:00 2001
From: weisheng <1780903673@qq.com>
Date: Thu, 18 Jul 2024 23:22:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Toast=20=E8=BD=BB=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=BA=93=E5=86=85=E7=BD=AE=E5=92=8C=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: #444
---
 docs/component/icon.md                        | 35 ++++++++++-----
 docs/component/toast.md                       | 24 ++++++++--
 src/App.vue                                   |  2 +
 src/iconfont/index.css                        | 18 ++++++++
 src/pages/toast/Index.vue                     | 29 ++++++++----
 .../components/common/abstracts/variable.scss |  8 +++-
 .../wot-design-uni/components/common/util.ts  |  2 +-
 .../components/wd-config-provider/types.ts    |  6 +++
 .../components/wd-loading/index.scss          |  2 +
 .../components/wd-loading/types.ts            |  6 +--
 .../components/wd-loading/wd-loading.vue      | 17 +++----
 .../components/wd-toast/index.scss            |  7 ++-
 .../components/wd-toast/index.ts              |  7 +--
 .../components/wd-toast/types.ts              | 16 ++++---
 .../components/wd-toast/wd-toast.vue          | 45 ++++++++++---------
 15 files changed, 153 insertions(+), 71 deletions(-)
 create mode 100644 src/iconfont/index.css

diff --git a/docs/component/icon.md b/docs/component/icon.md
index 8d265ae7..2877bab1 100644
--- a/docs/component/icon.md
+++ b/docs/component/icon.md
@@ -30,25 +30,40 @@
 ## 自定义图标
 如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。
 
-``` scss
-/* 引入第三方或自定义的字体图标样式 */
+
+``` css
+/* 路径 src/iconfont/index.css */
+
 @font-face {
-  font-family: 'my-icon';
-  src: url('./my-icon.ttf') format('truetype');
+  font-family: "fish";
+  src: url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff2?t=1721314121733') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff?t=1721314121733') format('woff'),
+       url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.ttf?t=1721314121733') format('truetype');
 }
 
-.my-icon {
-  font-family: 'my-icon';
+.fish {
+  font-family: "fish" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.my-icon-extra::before {
-  content: '\e626';
+.fish-kehuishouwu:before {
+  content: "\e627";
 }
+
+```
+```html
+<!-- app.vue -->
+ <style>
+@import '@/iconfont/index.css';
+</style>
 ```
 
 ```html
-<!-- 通过 class-prefix 指定类名为 my-icon -->
-<wd-icon class-prefix="my-icon" name="extra" />
+<!-- 通过 class-prefix 指定类名为 fish -->
+<wd-icon class-prefix="fish" name="kehuishouwu" />
 ```
 
 ## Attributes
diff --git a/docs/component/toast.md b/docs/component/toast.md
index 60e6f331..e9c5b04e 100644
--- a/docs/component/toast.md
+++ b/docs/component/toast.md
@@ -31,6 +31,25 @@ toast.warning('提示信息')
 toast.info('常规提示信息')
 ```
 
+## 使用图标
+可以使用`iconClass`指定图标，结合`classPrefix`可以使用自定义图标，参见[icon](/component/icon#自定义图标)。
+```ts
+// 使用组件库内部图标
+toast.show({
+  iconClass: 'star',
+  msg: '使用组件库内部图标'
+})
+```
+
+```ts
+// 使用自定义图标
+toast.show({
+  iconClass: 'kehuishouwu',
+  classPrefix: 'fish',
+  msg: '使用自定义图标'
+})
+```
+
 ## 提示位置
 
 ```typescript
@@ -89,9 +108,9 @@ toast.close()
 | msg          | 消息内容                                                                    | string     | -                         | -                      | -        |
 | duration     | 持续时间，单位 ms，为 0 时表示不自动关闭                                    | number     | -                         | 2000                   | -        |
 | iconName     | 图标类型                                                                    | string     | success / error / warning | -                      | -        |
-| iconSize     | 左侧图标尺寸                                                                | string     | -                         | 42px                   | -        |
+| iconSize     | 左侧图标尺寸                                                                | string     | -                         | -                   | -        |
 | iconClass    | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string     | -                         | -                      | -        |
-| customIcon   | 自定义图标，开启后可以通过 custom-icon-class 类名自定义图标                 | Boolean    | -                         | false                  | -        |
+| classPrefix   | 类名前缀，用于使用自定义图标                 | string    | -                         | -                  | -        |
 | position     | 提示信息框的位置                                                            | string     | top / middle / bottom     | middle                 | -        |
 | zIndex       | toast 层级                                                                  | number     | -                         | 100                    | -        |
 | loadingType  | [加载中图标类型](/component/loading)                                        | string     | ring                      | outline                | -        |
@@ -116,4 +135,3 @@ toast.close()
 | 类名              | 说明           | 最低版本 |
 | ----------------- | -------------- | -------- |
 | custom-class      | 根节点样式     | -        |
-| custom-icon-class | 自定义图标类名 | -        |
diff --git a/src/App.vue b/src/App.vue
index 818396d4..94406c4d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,6 +33,8 @@ onHide(() => {
 })
 </script>
 <style lang="scss">
+@import '@/iconfont/index.css';
+
 ::-webkit-scrollbar {
   width: 0;
   height: 0;
diff --git a/src/iconfont/index.css b/src/iconfont/index.css
new file mode 100644
index 00000000..7513706b
--- /dev/null
+++ b/src/iconfont/index.css
@@ -0,0 +1,18 @@
+@font-face {
+  font-family: "fish"; /* Project id 4626013 */
+  src: url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff2?t=1721314121733') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff?t=1721314121733') format('woff'),
+       url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.ttf?t=1721314121733') format('truetype');
+}
+
+.fish {
+  font-family: "fish" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.fish-kehuishouwu:before {
+  content: "\e627";
+}
diff --git a/src/pages/toast/Index.vue b/src/pages/toast/Index.vue
index 762b123f..e75e58a3 100644
--- a/src/pages/toast/Index.vue
+++ b/src/pages/toast/Index.vue
@@ -1,12 +1,3 @@
-<!--
- * @Author: weisheng
- * @Date: 2023-09-20 11:10:44
- * @LastEditTime: 2024-04-11 13:13:28
- * @LastEditors: weisheng
- * @Description: 
- * @FilePath: \wot-design-uni\src\pages\toast\Index.vue
- * 记得注释
--->
 <template>
   <view>
     <page-wraper>
@@ -20,6 +11,10 @@
         <wd-button @click="showWarnToast">警告toast</wd-button>
         <wd-button @click="showNormalToast">常规toast</wd-button>
       </demo-block>
+      <demo-block title="使用图标">
+        <wd-button @click="showInnerIconToast">内部图标</wd-button>
+        <wd-button @click="showCustomIconToast">自定义图标</wd-button>
+      </demo-block>
       <demo-block title="提示位置">
         <wd-button @click="showTopToast">顶部toast</wd-button>
         <wd-button @click="showBottomToast">底部toast</wd-button>
@@ -54,6 +49,7 @@ function showNormalToast() {
 function showTopToast() {
   toast.show({
     position: 'top',
+    iconClass: 'star',
     msg: '提示信息',
     closed() {
       console.log(232)
@@ -88,6 +84,21 @@ function showLoadingToast2() {
 function showLongToast() {
   toast.show('这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文案')
 }
+
+function showInnerIconToast() {
+  toast.show({
+    iconClass: 'star',
+    msg: '使用组件库内部图标'
+  })
+}
+
+function showCustomIconToast() {
+  toast.show({
+    iconClass: 'kehuishouwu',
+    classPrefix: 'fish',
+    msg: '使用自定义图标'
+  })
+}
 </script>
 <style lang="scss" scoped>
 :deep(button) {
diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
index 71b82b4e..b40a812a 100644
--- a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
+++ b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
@@ -630,10 +630,14 @@ $-toast-radius: var(--wot-toast-radius, 8px) !default; // 圆角大小
 $-toast-bg: var(--wot-toast-bg, $-overlay-bg) !default; // 背景色
 $-toast-fs: var(--wot-toast-fs, $-fs-content) !default; // 字号
 $-toast-with-icon-min-width: var(--wot-toast-with-icon-min-width, 150px) !default; // 有图标的情况下最小宽度
-$-toast-icon-size: var(--wot-toast-icon-size, 39px) !default; // 图标大小
+$-toast-icon-size: var(--wot-toast-icon-size, 32px) !default; // 图标大小
+$-toast-icon-margin-right: var(--wot-toast-icon-margin-right, 12px) !default; // 图标右边距
 $-toast-loading-padding: var(--wot-toast-loading-padding, 10px) !default; // loading 下的padding
 $-toast-box-shadow: var(--wot-toast-box-shadow, 0px 6px 16px 0px rgba(0, 0, 0, 0.08)) !default; // 外部阴影
 
+/* loading */
+$-loading-size: var(--wot-loading-size, 32px) !default; // loading 大小
+
 /* tooltip */
 $-tooltip-bg: var(--wot-tooltip-bg, rgba(38, 39, 40, 0.8)) !default; // 背景色
 $-tooltip-color: var(--wot-tooltip-color, $-color-white) !default; // 文字颜色
@@ -890,4 +894,4 @@ $-text-success-color: var(--wot-text-success-color, $-color-success) !default;
 /* video-preview */
 $-video-preview-bg: var(--wot-video-preview-bg, rgba(0, 0, 0, 0.8)) !default; // 背景色
 $-video-preview-close-color: var(--wot-video-preview-close-color, #fff) !default; // 图标颜色
-$-video-preview-close-font-size: var(--wot-video-preview-close-font-size, 20px) !default; // 图标大小
+$-video-preview-close-font-size: var(--wot-video-preview-close-font-size, 20px) !default; // 图标大小
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/common/util.ts b/src/uni_modules/wot-design-uni/components/common/util.ts
index 5d5a5c60..85cec091 100644
--- a/src/uni_modules/wot-design-uni/components/common/util.ts
+++ b/src/uni_modules/wot-design-uni/components/common/util.ts
@@ -22,7 +22,7 @@ function s4() {
  * @return {string} num+px
  */
 export function addUnit(num: number | string) {
-  return Number.isNaN(Number(num)) ? num : `${num}px`
+  return !isNumber(num) ? num : `${num}px`
 }
 
 /**
diff --git a/src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts b/src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts
index 244702f4..63e50779 100644
--- a/src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts
@@ -648,10 +648,15 @@ export type toastThemeVars = {
   toastFs?: string
   toastWithIconMinWidth?: string
   toastIconSize?: string
+  toastIconMarginRight?: string
   toastLoadingPadding?: string
   toastBoxShadow?: string
 }
 
+export type loadingThemeVars = {
+  loadingSize?: string
+}
+
 export type tooltipThemeVars = {
   tooltipBg?: string
   tooltipColor?: string
@@ -966,6 +971,7 @@ export type ConfigProviderThemeVars = baseThemeVars &
   tabsThemeVars &
   tagThemeVars &
   toastThemeVars &
+  loadingThemeVars &
   tooltipThemeVars &
   popoverThemeVars &
   gridItemThemeVars &
diff --git a/src/uni_modules/wot-design-uni/components/wd-loading/index.scss b/src/uni_modules/wot-design-uni/components/wd-loading/index.scss
index 32885ebd..bc995a7e 100644
--- a/src/uni_modules/wot-design-uni/components/wd-loading/index.scss
+++ b/src/uni_modules/wot-design-uni/components/wd-loading/index.scss
@@ -6,6 +6,8 @@
   line-height: 0;
   vertical-align: middle;
   display: inline-block;
+  width: $-loading-size;
+  height: $-loading-size;
 
   @include e(body) {
     width: 100%;
diff --git a/src/uni_modules/wot-design-uni/components/wd-loading/types.ts b/src/uni_modules/wot-design-uni/components/wd-loading/types.ts
index f4c2b83b..c997f2a8 100644
--- a/src/uni_modules/wot-design-uni/components/wd-loading/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-loading/types.ts
@@ -1,10 +1,10 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-15 20:40:34
- * @LastEditTime: 2024-05-27 18:49:28
+ * @LastEditTime: 2024-07-18 22:09:12
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-loading\types.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-loading/types.ts
  * 记得注释
  */
 import type { ExtractPropTypes } from 'vue'
@@ -25,7 +25,7 @@ export const loadingProps = {
   /**
    * 设置加载指示器大小
    */
-  size: makeNumericProp('32px')
+  size: makeNumericProp('')
 }
 
 export type LoadingProps = ExtractPropTypes<typeof loadingProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue b/src/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue
index 8246a04c..eb2de8f1 100644
--- a/src/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="rootClass" :style="rootStyle">
+  <view :class="`wd-loading ${props.customClass}`" :style="rootStyle">
     <view class="wd-loading__body">
       <view class="wd-loading__svg" :style="`background-image: url(${svg});`"></view>
     </view>
@@ -17,7 +17,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onBeforeMount, ref, watch } from 'vue'
+import { computed, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
 import base64 from '../common/base64'
 import { gradient, context, objToStyle, addUnit, isDef } from '../common/util'
 import { loadingProps } from './types'
@@ -39,7 +39,7 @@ const props = defineProps(loadingProps)
 
 const svg = ref<string>('')
 const intermediateColor = ref<string>('')
-const iconSize = ref<string | number>('32px')
+const iconSize = ref<string | number | null>(null)
 
 watch(
   () => props.size,
@@ -64,17 +64,14 @@ watch(
 )
 
 const rootStyle = computed(() => {
-  const style: Record<string, string | number> = {
-    width: iconSize.value,
-    height: iconSize.value
+  const style: CSSProperties = {}
+  if (isDef(iconSize.value)) {
+    style.height = addUnit(iconSize.value)
+    style.width = addUnit(iconSize.value)
   }
   return `${objToStyle(style)}; ${props.customStyle}`
 })
 
-const rootClass = computed(() => {
-  return `wd-loading  ${props.customClass}`
-})
-
 onBeforeMount(() => {
   intermediateColor.value = gradient(props.color, '#ffffff', 2)[1]
   buildSvg()
diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/index.scss b/src/uni_modules/wot-design-uni/components/wd-toast/index.scss
index 681319fc..460a3782 100644
--- a/src/uni_modules/wot-design-uni/components/wd-toast/index.scss
+++ b/src/uni_modules/wot-design-uni/components/wd-toast/index.scss
@@ -19,9 +19,10 @@
     text-align: left;
     font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif;
   }
-  @include e(icon) {
+  @include edeep(icon) {
     display: inline-block;
-    margin-right: 16px;
+    margin-right: $-toast-icon-margin-right;
+    font-size: $-toast-icon-size;
   }
   @include e(iconWrap){
     font-size: 0;
@@ -34,6 +35,8 @@
     height: 100%;
   }
   @include e(iconSvg){
+    width: $-toast-icon-size;
+    height: $-toast-icon-size;
     background-size: cover;
     background-repeat: no-repeat;
   }
diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/index.ts b/src/uni_modules/wot-design-uni/components/wd-toast/index.ts
index 5d81b84f..ccbd2b46 100644
--- a/src/uni_modules/wot-design-uni/components/wd-toast/index.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-toast/index.ts
@@ -1,10 +1,10 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-29 13:29:57
- * @LastEditTime: 2024-04-10 20:18:47
+ * @LastEditTime: 2024-07-18 23:16:16
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-toast\index.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-toast/index.ts
  * 记得注释
  */
 import { provide, ref } from 'vue'
@@ -25,9 +25,6 @@ export const defaultOptions: ToastOptions = {
   loadingType: 'outline',
   loadingColor: '#4D80F0',
   iconColor: '#4D80F0',
-  iconSize: 42,
-  loadingSize: 42,
-  customIcon: false,
   position: 'middle',
   show: false,
   zIndex: 100
diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/types.ts b/src/uni_modules/wot-design-uni/components/wd-toast/types.ts
index af2100cd..f1f126c0 100644
--- a/src/uni_modules/wot-design-uni/components/wd-toast/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-toast/types.ts
@@ -1,10 +1,10 @@
 /*
  * @Author: weisheng
  * @Date: 2023-06-19 12:47:57
- * @LastEditTime: 2024-04-11 13:03:38
+ * @LastEditTime: 2024-07-18 22:18:07
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-toast\types.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-toast/types.ts
  * 记得注释
  */
 import type { ExtractPropTypes } from 'vue'
@@ -24,9 +24,8 @@ export type ToastOptions = {
   iconSize?: number
   loadingType?: ToastLoadingType
   loadingColor?: string
-  iconColor?: string
   loadingSize?: number
-  customIcon?: boolean
+  iconColor?: string
   position?: ToastPositionType
   show?: boolean
   zIndex?: number
@@ -34,6 +33,14 @@ export type ToastOptions = {
    * 是否存在遮罩层
    */
   cover?: boolean
+  /**
+   * 图标类名
+   */
+  iconClass?: string
+  /**
+   * 类名前缀，用于使用自定义图标
+   */
+  classPrefix?: string
   /**
    * 完全展示后的回调函数
    */
@@ -63,7 +70,6 @@ export interface Toast {
 
 export const toastProps = {
   ...baseProps,
-  customIconClass: makeStringProp(''),
   selector: makeStringProp('')
 }
 
diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue b/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue
index 943c2acc..4e37542a 100644
--- a/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue
@@ -3,17 +3,16 @@
   <wd-transition name="fade" :show="show" :custom-style="transitionStyle" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave">
     <view :class="rootClass">
       <!--iconName优先级更高-->
-      <wd-loading v-if="iconName === 'loading'" :type="loadingType" :color="loadingColor" custom-class="wd-toast__icon" :customStyle="loadingStyle" />
+      <wd-loading v-if="iconName === 'loading'" :type="loadingType" :color="loadingColor" :size="loadingSize" custom-class="wd-toast__icon" />
       <view
         class="wd-toast__iconWrap wd-toast__icon"
         v-else-if="iconName === 'success' || iconName === 'warning' || iconName === 'info' || iconName === 'error'"
-        :style="`width:${iconSize}px; height:${iconSize}px`"
       >
         <view class="wd-toast__iconBox">
-          <view class="wd-toast__iconSvg" :style="`background-image: url(${svgStr}); width:${iconSize}px; height:${iconSize}px`"></view>
+          <view class="wd-toast__iconSvg" :style="svgStyle"></view>
         </view>
       </view>
-      <view v-else-if="customIcon" class="wd-toast__icon custom-icon-class" />
+      <wd-icon v-else-if="iconClass" custom-class="wd-toast__icon" :size="iconSize" :class-prefix="classPrefix" :name="iconClass"></wd-icon>
       <!--文本-->
       <view v-if="msg" class="wd-toast__msg">{{ msg }}</view>
     </view>
@@ -36,21 +35,23 @@ import { computed, inject, onBeforeMount, ref, watch, type CSSProperties } from
 import base64 from '../common/base64'
 import { defaultOptions, toastDefaultOptionKey, toastIcon } from '.'
 import { toastProps, type ToastLoadingType, type ToastOptions } from './types'
-import { isDef, isFunction, objToStyle } from '../common/util'
+import { addUnit, isDef, isFunction, objToStyle } from '../common/util'
 
 const props = defineProps(toastProps)
 
 const iconName = ref<string>('') // 图标类型
-const customIcon = ref<boolean>(false)
 const msg = ref<string>('') // 消息内容
 const position = ref<string>('middle')
 const show = ref<boolean>(false)
 const zIndex = ref<number>(100)
 const loadingType = ref<ToastLoadingType>('outline')
 const loadingColor = ref<string>('#4D80F0')
-const iconSize = ref<number>(42)
+const iconSize = ref<string>() // 图标大小
+const loadingSize = ref<string>() // loading大小
 const svgStr = ref<string>('') // 图标
 const cover = ref<boolean>(false) // 是否存在遮罩层
+const classPrefix = ref<string>('wd-icon') // 图标前缀
+const iconClass = ref<string>('') // 图标类名
 
 let opened: (() => void) | null = null
 
@@ -99,23 +100,23 @@ const transitionStyle = computed(() => {
   return objToStyle(style)
 })
 
-/**
- * 加载自定义样式
- */
-const loadingStyle = computed(() => {
-  const style: CSSProperties = {
-    display: 'inline-block',
-    'margin-right': '16px'
-  }
-  return objToStyle(style)
-})
-
 const rootClass = computed(() => {
   return `wd-toast ${props.customClass} wd-toast--${position.value} ${
-    (iconName.value !== 'loading' || msg.value) && (iconName.value || customIcon.value) ? 'wd-toast--with-icon' : ''
+    (iconName.value !== 'loading' || msg.value) && (iconName.value || iconClass.value) ? 'wd-toast--with-icon' : ''
   } ${iconName.value === 'loading' && !msg.value ? 'wd-toast--loading' : ''}`
 })
 
+const svgStyle = computed(() => {
+  const style: CSSProperties = {
+    backgroundImage: `url(${svgStr.value})`
+  }
+  if (isDef(iconSize.value)) {
+    style.width = iconSize.value
+    style.height = iconSize.value
+  }
+  return objToStyle(style)
+})
+
 onBeforeMount(() => {
   buildSvg()
 })
@@ -149,14 +150,16 @@ function reset(option: ToastOptions) {
 
     if (show.value) {
       iconName.value = isDef(option.iconName!) ? option.iconName! : ''
-      customIcon.value = isDef(option.customIcon!) ? option.customIcon! : false
+      iconClass.value = isDef(option.iconClass!) ? option.iconClass! : ''
       msg.value = isDef(option.msg!) ? option.msg! : ''
       position.value = isDef(option.position!) ? option.position! : 'middle'
       zIndex.value = isDef(option.zIndex!) ? option.zIndex! : 100
       loadingType.value = isDef(option.loadingType!) ? option.loadingType! : 'outline'
       loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : '#4D80F0'
-      iconSize.value = isDef(option.iconSize!) ? option.iconSize! : 42
+      iconSize.value = isDef(option.iconSize) ? addUnit(option.iconSize) : option.iconSize
+      loadingSize.value = isDef(option.loadingSize) ? addUnit(option.loadingSize) : option.loadingSize
       cover.value = isDef(option.cover!) ? option.cover! : false
+      classPrefix.value = isDef(option.classPrefix) ? option.classPrefix : 'wd-icon'
       closed = isFunction(option.closed) ? option.closed : null
       opened = isFunction(option.opened) ? option.opened : null
     }