fix: issue 70

docs/docs/usage/icons.md

@@ -159,7 +159,7 @@ const ResolveCustomIcon = (props: IconProps) => {
     case 'default':
       return '👌';
     case 'loading':
-      return '...';
+      return '⏳';
     case 'info':
       return '🎈';
     case 'success':

docs/docs/usage/pass-props-to-custom-component.md

@@ -52,7 +52,7 @@ defineProps({
 ```
 :::
 
-- disable globally
+- enable globally
 
 ```ts
 app.use(

playground/src/pages/index.vue

@@ -18,7 +18,6 @@ const onOptionsChange = (opts: ToastOptions) => {
 
 function showToast() {
   toast(constomCompo, {
-    type: 'info',
     ...options.value,
     contentProps: {
       title: 'narges1',

src/components/Icons.tsx

@@ -72,22 +72,28 @@ const maybeIcon = (type: string): type is keyof typeof Icons => type in Icons;
 
 export function getIcon({ theme, type, isLoading, icon }: ToastOptions) {
   let Icon: undefined | IconType;
+
+  const loading = !!isLoading || type === 'loading';
+
   const iconProps = {
     theme,
     type,
   };
 
-  if (isLoading) {
-    Icon = Icons.spinner();
-  } else if (icon === false) {
-    Icon = undefined;
-  } else if (isComponent(icon as any)) {
+  if (loading && (icon === undefined || typeof icon === 'boolean')) return Icons.spinner();
+
+  if (icon === false) return undefined;
+
+  if (isComponent(icon as any)) {
     Icon = toRaw(icon);
   } else if (isFn(icon)) {
     // @ts-ignore
     const iconCreator: (props?: BuiltInIconProps) => VNode = icon;
 
+    iconProps.type = loading ? 'loading' : type;
+
     Icon = iconCreator(iconProps as BuiltInIconProps);
+    Icon = !Icon && loading ? Icons.spinner() : Icon;
   } else if (isVNode(icon)) {
     Icon = cloneVNode(icon, iconProps);
   } else if (isStr(icon) || isNum(icon)) {

src/core/toast.tsx

@@ -15,6 +15,14 @@ type OmitLoadingOptsToastOption = Omit<ToastOptions, 'isLoading' | 'draggable'>;
 
 let inThrottle = false;
 
+const loadingProps = {
+  isLoading: true,
+  autoClose: false,
+  closeOnClick: false,
+  closeButton: false,
+  draggable: false,
+} as ToastOptions;
+
 function getAllActiveToast() {
   const result: ToastOptions[] = [];
   const items = getAllToast();
@@ -59,13 +67,14 @@ function openToast(content: Content, type: ToastType, options = {} as ToastOptio
 
   options = {
     ...options,
+    ...options.type === 'loading' ? loadingProps : {},
     content,
     containerId: options.containerId || String(options.position),
   } as ToastOptions;
 
   const progress = Number(options?.progress);
 
-  if (progress < 0) {
+  if (!isNaN(progress) && progress < 0) {
     options.progress = 0;
   }
   if (progress > 1) {
@@ -136,13 +145,7 @@ toast.success =
 toast.loading = (content: Content, options?: OmitLoadingOptsToastOption) => openToast(
   content,
   TYPE.DEFAULT,
-  mergeOptions(options, {
-    isLoading: true,
-    autoClose: false,
-    closeOnClick: false,
-    closeButton: false,
-    draggable: false,
-  } as ToastOptions),
+  mergeOptions(options, loadingProps as ToastOptions),
 );
 
 /** dark toast */