naive-ui 2.33.4 → 2.34.0

package/es/_internal/clear/src/styles/index.cssr.js

@@ -1,11 +1,11 @@
 import { cB, c, cE } from '../../../../_utils/cssr';
-import { iconSwitchTransition } from '../../../../_styles/transitions/icon-switch.cssr'; // vars:
+import { iconSwitchTransition } from '../../../../_styles/transitions/icon-switch.cssr';
+// vars:
 // --n-bezier
 // --n-clear-color
 // --n-clear-size
 // --n-clear-color-hover
 // --n-clear-color-pressed
-
 export default cB('base-clear', `
  flex-shrink: 0;
  height: 1em;

package/es/_internal/close/src/styles/index.cssr.js

@@ -1,4 +1,5 @@
-import { cB, cM, c, cNotM } from '../../../../_utils/cssr'; // vars:
+import { cB, cM, c, cNotM } from '../../../../_utils/cssr';
+// vars:
 // --n-close-border-radius
 // --n-close-color-hover
 // --n-close-color-pressed
@@ -6,7 +7,6 @@ import { cB, cM, c, cNotM } from '../../../../_utils/cssr'; // vars:
 // --n-close-icon-color-hover
 // --n-close-icon-color-pressed
 // --n-close-icon-color-disabled
-
 export default cB('base-close', `
  display: flex;
  align-items: center;

package/es/_internal/index.d.ts

@@ -4,6 +4,7 @@ export { NBaseClose } from './close';
 export { NBaseIcon } from './icon';
 export { default as NBaseFocusDetector } from './focus-detector';
 export { default as NBaseLoading } from './loading';
+export type { BaseLoadingExposedProps } from './loading';
 export { default as NInternalSelectMenu } from './select-menu';
 export type { InternalSelectMenuRef } from './select-menu';
 export { default as NBaseWave } from './wave';

package/es/_internal/loading/index.d.ts

@@ -1 +1,2 @@
 export { default } from './src/Loading';
+export type { BaseLoadingExposedProps } from './src/Loading';

package/es/_internal/loading/src/Loading.d.ts

@@ -1,16 +1,16 @@
-declare const _default: import("vue").DefineComponent<{
-    clsPrefix: {
-        type: StringConstructor;
-        required: true;
-    };
-    scale: {
+import { ExtractPublicPropTypes } from '../../../_utils';
+declare const exposedLoadingProps: {
+    strokeWidth: {
         type: NumberConstructor;
         default: number;
     };
-    radius: {
-        type: NumberConstructor;
-        default: number;
+    stroke: {
+        type: StringConstructor;
+        default: undefined;
     };
+};
+export declare type BaseLoadingExposedProps = ExtractPublicPropTypes<typeof exposedLoadingProps>;
+declare const _default: import("vue").DefineComponent<{
     strokeWidth: {
         type: NumberConstructor;
         default: number;
@@ -19,15 +19,14 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    show: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;
         required: true;
     };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     scale: {
         type: NumberConstructor;
         default: number;
@@ -36,6 +35,7 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     strokeWidth: {
         type: NumberConstructor;
         default: number;
@@ -44,10 +44,22 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
     show: {
         type: BooleanConstructor;
         default: boolean;
     };
+    scale: {
+        type: NumberConstructor;
+        default: number;
+    };
+    radius: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>>, {
     show: boolean;
     stroke: string;

package/es/_internal/loading/src/Loading.js

@@ -2,34 +2,31 @@ import { h, defineComponent, toRef } from 'vue';
 import { useStyle } from '../../../_mixins';
 import NIconSwitchTransition from '../../icon-switch-transition';
 import style from './styles/index.cssr';
+const exposedLoadingProps = {
+    strokeWidth: {
+        type: Number,
+        default: 28
+    },
+    stroke: {
+        type: String,
+        default: undefined
+    }
+};
 export default defineComponent({
     name: 'BaseLoading',
-    props: {
-        clsPrefix: {
+    props: Object.assign({ clsPrefix: {
             type: String,
             required: true
-        },
-        scale: {
+        }, show: {
+            type: Boolean,
+            default: true
+        }, scale: {
             type: Number,
             default: 1
-        },
-        radius: {
+        }, radius: {
             type: Number,
             default: 100
-        },
-        strokeWidth: {
-            type: Number,
-            default: 28
-        },
-        stroke: {
-            type: String,
-            default: undefined
-        },
-        show: {
-            type: Boolean,
-            default: true
-        }
-    },
+        } }, exposedLoadingProps),
     setup(props) {
         useStyle('-base-loading', style, toRef(props, 'clsPrefix'));
     },

package/es/_internal/scrollbar/src/styles/index.cssr.js

@@ -1,12 +1,12 @@
 import { cB, c, cM, cE } from '../../../../_utils/cssr';
-import { fadeInTransition } from '../../../../_styles/transitions/fade-in.cssr'; // vars:
+import { fadeInTransition } from '../../../../_styles/transitions/fade-in.cssr';
+// vars:
 // --n-scrollbar-bezier
 // --n-scrollbar-color
 // --n-scrollbar-color-hover
 // --n-scrollbar-width
 // --n-scrollbar-height
 // --n-scrollbar-border-radius
-
 export default cB('scrollbar', `
  overflow: hidden;
  position: relative;

package/es/_internal/select-menu/src/styles/index.cssr.js

@@ -1,8 +1,8 @@
 import { c, cB, cE, cM, cNotM } from '../../../../_utils/cssr';
-import { fadeInScaleUpTransition } from '../../../../_styles/transitions/fade-in-scale-up.cssr'; // --n-loading-color
+import { fadeInScaleUpTransition } from '../../../../_styles/transitions/fade-in-scale-up.cssr';
+// --n-loading-color
 // --n-loading-size
 // --n-option-padding-right
-
 export default cB('base-select-menu', `
  line-height: 1.5;
  outline: none;

package/es/_internal/selection/src/Selection.js

@@ -456,7 +456,7 @@ export default defineComponent({
                     ? renderLabel(option, true)
                     : render(option[labelField], option, true)
             }))));
-            const originalTags = (maxTagCountNumeric
+            const createOriginalTagNodes = () => (maxTagCountNumeric
                 ? this.selectedOptions.slice(0, maxTagCount)
                 : this.selectedOptions).map(createTag);
             const input = filterable ? (h("div", { class: `${clsPrefix}-base-selection-input-tag`, ref: "inputTagElRef", key: "__input-tag__" },
@@ -482,7 +482,7 @@ export default defineComponent({
                     display: 'flex',
                     overflow: 'hidden'
                 } }, {
-                default: () => originalTags,
+                default: createOriginalTagNodes,
                 counter: renderCounter,
                 tail: () => input
             })) : (h(VOverflow, { ref: "overflowRef", updateCounter: this.updateCounter, getCounter: this.getCounter, style: {
@@ -490,12 +490,12 @@ export default defineComponent({
                     display: 'flex',
                     overflow: 'hidden'
                 } }, {
-                default: () => originalTags,
+                default: createOriginalTagNodes,
                 counter: renderCounter
-            }))) : maxTagCountNumeric ? (originalTags.concat(counter)) : (originalTags);
+            }))) : maxTagCountNumeric ? (createOriginalTagNodes().concat(counter)) : (createOriginalTagNodes());
             const renderPopover = useMaxTagCount
                 ? () => (h("div", { class: `${clsPrefix}-base-selection-popover` }, maxTagCountResponsive
-                    ? originalTags
+                    ? createOriginalTagNodes()
                     : this.selectedOptions.map(createTag)))
                 : undefined;
             const popoverProps = useMaxTagCount

package/es/_internal/selection/src/styles/index.cssr.js

@@ -1,4 +1,5 @@
-import { c, cB, cE, cM, cNotM } from '../../../../_utils/cssr'; // vars:
+import { c, cB, cE, cM, cNotM } from '../../../../_utils/cssr';
+// vars:
 // --n-bezier
 // --n-border
 // --n-border-active
@@ -25,7 +26,6 @@ import { c, cB, cE, cM, cNotM } from '../../../../_utils/cssr'; // vars:
 // --n-loading-color
 // ...clear vars
 // ...form item vars
-
 export default c([cB('base-selection', `
  position: relative;
  z-index: auto;

package/es/_internal/slot-machine/src/styles/index.cssr.js

@@ -1,7 +1,7 @@
 import { c, cB, cE, cM } from '../../../../_utils/cssr';
 import { fadeInWidthExpandTransition } from '../../../../_styles/transitions/fade-in-width-expand.cssr';
-import { fadeUpWidthExpandTransition } from '../../../../_styles/transitions/fade-up-width-expand.cssr'; // ease-out: cubic-bezier(0, 0, .2, 1)
-
+import { fadeUpWidthExpandTransition } from '../../../../_styles/transitions/fade-up-width-expand.cssr';
+// ease-out: cubic-bezier(0, 0, .2, 1)
 export default c([c('@keyframes n-base-slot-machine-fade-up-in', `
  from {
  transform: translateY(60%);
@@ -52,7 +52,8 @@ export default c([c('@keyframes n-base-slot-machine-fade-up-in', `
  max-width: .6em;
  `, [fadeUpWidthExpandTransition({
   duration: '.2s'
-}), // use 0s, not 0
+}),
+// use 0s, not 0
 fadeInWidthExpandTransition({
   duration: '.2s',
   delay: '0s'

package/es/_styles/global/index.cssr.js

@@ -4,7 +4,8 @@ const {
   fontSize,
   fontFamily,
   lineHeight
-} = commonVariables; // All the components need the style
+} = commonVariables;
+// All the components need the style
 // It is static and won't be changed in the app's lifetime
 // If user want to overrides it they need to use `n-global-style` is provided
 //
@@ -14,7 +15,6 @@ const {
 // -webkit-tap-hilight-color:
 // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
 // In some android devices, there will be the style.
-
 export default c('body', `
  margin: 0;
  font-size: ${fontSize};

package/es/alert/src/styles/index.cssr.js

@@ -1,5 +1,6 @@
 import { c, cB, cE, cM } from '../../../_utils/cssr';
-import { fadeInHeightExpandTransition } from '../../../_styles/transitions/fade-in-height-expand.cssr'; // vars:
+import { fadeInHeightExpandTransition } from '../../../_styles/transitions/fade-in-height-expand.cssr';
+// vars:
 // --n-bezier
 // --n-color
 // --n-close-color-hover
@@ -23,7 +24,6 @@ import { fadeInHeightExpandTransition } from '../../../_styles/transitions/fade-
 // --n-padding
 // --n-icon-margin-left
 // --n-icon-margin-right
-
 export default cB('alert', `
  line-height: var(--n-line-height);
  border-radius: var(--n-border-radius);

package/es/anchor/src/styles/index.cssr.js

@@ -1,4 +1,5 @@
-import { c, cE, cB, cM, cNotM } from '../../../_utils/cssr'; // vars:
+import { c, cE, cB, cM, cNotM } from '../../../_utils/cssr';
+// vars:
 // --n-link-color
 // --n-link-font-size
 // --n-link-text-color
@@ -11,7 +12,6 @@ import { c, cE, cB, cM, cNotM } from '../../../_utils/cssr'; // vars:
 // --n-rail-width
 // --n-link-padding
 // --n-link-border-radius
-
 export default cB('anchor', `
  position: relative;
 `, [cNotM('block', `

package/es/auto-complete/src/styles/index.cssr.js

@@ -1,8 +1,8 @@
 import { c, cB } from '../../../_utils/cssr';
-import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
+import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr';
+// vars:
 // --n-bezier
 // --n-menu-box-shadow
-
 export default c([cB('auto-complete', `
  z-index: auto;
  position: relative;

package/es/avatar/src/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { PropType, VNodeChild } from 'vue';
+import { PropType, VNodeChild, ImgHTMLAttributes } from 'vue';
 import { IntersectionObserverOptions } from '../../image/src/utils';
 import type { ExtractPublicPropTypes } from '../../_utils';
 import type { Size, ObjectFit } from './interface';
@@ -25,6 +25,7 @@ export declare const avatarProps: {
     readonly onLoad: PropType<(e: Event) => void>;
     readonly renderPlaceholder: PropType<() => VNodeChild>;
     readonly renderFallback: PropType<() => VNodeChild>;
+    readonly imgProps: PropType<ImgHTMLAttributes>;
     /** @deprecated */
     readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
@@ -91,6 +92,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onLoad: PropType<(e: Event) => void>;
     readonly renderPlaceholder: PropType<() => VNodeChild>;
     readonly renderFallback: PropType<() => VNodeChild>;
+    readonly imgProps: PropType<ImgHTMLAttributes>;
     /** @deprecated */
     readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
@@ -178,6 +180,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onLoad: PropType<(e: Event) => void>;
     readonly renderPlaceholder: PropType<() => VNodeChild>;
     readonly renderFallback: PropType<() => VNodeChild>;
+    readonly imgProps: PropType<ImgHTMLAttributes>;
     /** @deprecated */
     readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {

package/es/avatar/src/Avatar.js

@@ -17,7 +17,7 @@ export const avatarProps = Object.assign(Object.assign({}, useTheme.props), { si
     }, bordered: {
         type: Boolean,
         default: undefined
-    }, onError: Function, fallbackSrc: String, intersectionObserverOptions: Object, lazy: Boolean, onLoad: Function, renderPlaceholder: Function, renderFallback: Function, 
+    }, onError: Function, fallbackSrc: String, intersectionObserverOptions: Object, lazy: Boolean, onLoad: Function, renderPlaceholder: Function, renderFallback: Function, imgProps: Object, 
     /** @deprecated */
     color: String });
 export default defineComponent({
@@ -74,10 +74,12 @@ export default defineComponent({
             return props.bordered || false;
         });
         const handleError = (e) => {
+            var _a;
             if (!shouldStartLoadingRef.value)
                 return;
             hasLoadErrorRef.value = true;
-            const { onError } = props;
+            const { onError, imgProps } = props;
+            (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onError) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
             if (onError) {
                 onError(e);
             }
@@ -167,8 +169,10 @@ export default defineComponent({
             shouldStartLoading: shouldStartLoadingRef,
             loaded: loadedRef,
             mergedOnLoad: (e) => {
-                const { onLoad } = props;
+                var _a;
+                const { onLoad, imgProps } = props;
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+                (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onLoad) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
                 loadedRef.value = true;
             }
         };
@@ -198,17 +202,13 @@ export default defineComponent({
                     }));
                 }
                 else if (src) {
-                    return h('img', {
-                        loading: isImageSupportNativeLazy && lazy ? 'lazy' : 'eager',
-                        src: isImageSupportNativeLazy
+                    const { imgProps } = this;
+                    return h('img', Object.assign(Object.assign({}, imgProps), { loading: isImageSupportNativeLazy && lazy ? 'lazy' : 'eager', src: isImageSupportNativeLazy
                             ? src
                             : shouldStartLoading || loaded
                                 ? src
-                                : undefined,
-                        onLoad: mergedOnLoad,
-                        'data-image-src': src,
-                        onError: this.handleError,
-                        style: [
+                                : undefined, onLoad: mergedOnLoad, 'data-image-src': src, onError: this.handleError, style: [
+                            imgProps === null || imgProps === void 0 ? void 0 : imgProps.style,
                             { objectFit: this.objectFit },
                             placeholderNode
                                 ? {
@@ -218,8 +218,7 @@ export default defineComponent({
                                     position: 'absolute'
                                 }
                                 : ''
-                        ]
-                    });
+                        ] }));
                 }
             });
         }

package/es/avatar/src/styles/index.cssr.js

@@ -1,4 +1,5 @@
-import { c, cE, cB, insideModal, insidePopover } from '../../../_utils/cssr'; // vars:
+import { c, cE, cB, insideModal, insidePopover } from '../../../_utils/cssr';
+// vars:
 // --n-font-size
 // --n-border-radius
 // --n-color
@@ -6,7 +7,6 @@ import { c, cE, cB, insideModal, insidePopover } from '../../../_utils/cssr'; //
 // --n-color-popover
 // --n-bezier
 // --n-merged-size
-
 export default cB('avatar', `
  width: var(--n-merged-size);
  height: var(--n-merged-size);

package/es/avatar-group/index.d.ts

@@ -1,2 +1,2 @@
 export { default as NAvatarGroup, avatarGroupProps } from './src/AvatarGroup';
-export type { AvatarGroupProps } from './src/AvatarGroup';
+export type { AvatarGroupProps, AvatarGroupOption } from './src/AvatarGroup';

package/es/avatar-group/src/AvatarGroup.d.ts

@@ -4,14 +4,14 @@ import type { ExtractPublicPropTypes } from '../../_utils';
 export interface AvatarGroupInjection {
     size?: Size | undefined;
 }
-interface AvatarOption {
+export interface AvatarGroupOption {
     src: string;
 }
 export declare const avatarGroupProps: {
     readonly max: NumberConstructor;
     readonly maxStyle: PropType<string | CSSProperties>;
     readonly options: {
-        readonly type: PropType<AvatarOption[]>;
+        readonly type: PropType<AvatarGroupOption[]>;
         readonly default: () => never[];
     };
     readonly vertical: BooleanConstructor;
@@ -73,7 +73,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly max: NumberConstructor;
     readonly maxStyle: PropType<string | CSSProperties>;
     readonly options: {
-        readonly type: PropType<AvatarOption[]>;
+        readonly type: PropType<AvatarGroupOption[]>;
         readonly default: () => never[];
     };
     readonly vertical: BooleanConstructor;
@@ -264,8 +264,8 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    restOptions: import("vue").ComputedRef<AvatarOption[] | undefined>;
-    displayedOptions: import("vue").ComputedRef<AvatarOption[]>;
+    restOptions: import("vue").ComputedRef<AvatarGroupOption[] | undefined>;
+    displayedOptions: import("vue").ComputedRef<AvatarGroupOption[]>;
     cssVars: import("vue").ComputedRef<{
         '--n-gap': string;
     }>;
@@ -273,7 +273,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly max: NumberConstructor;
     readonly maxStyle: PropType<string | CSSProperties>;
     readonly options: {
-        readonly type: PropType<AvatarOption[]>;
+        readonly type: PropType<AvatarGroupOption[]>;
         readonly default: () => never[];
     };
     readonly vertical: BooleanConstructor;
@@ -331,6 +331,6 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }>>, {
     readonly vertical: boolean;
-    readonly options: AvatarOption[];
+    readonly options: AvatarGroupOption[];
 }>;
 export default _default;

package/es/avatar-group/src/styles/avatar-group-rtl.cssr.js

@@ -1,5 +1,5 @@
-import { c, cB, cM, cNotM } from '../../../_utils/cssr'; // --n-gap
-
+import { c, cB, cM, cNotM } from '../../../_utils/cssr';
+// --n-gap
 export default cB('avatar-group', [cM('rtl', `
  direction: rtl;
  `, [cNotM('vertical', `

package/es/avatar-group/src/styles/avatar-group.cssr.js

@@ -1,5 +1,5 @@
-import { c, cB, cM, cNotM } from '../../../_utils/cssr/index'; // --n-gap
-
+import { c, cB, cM, cNotM } from '../../../_utils/cssr/index';
+// --n-gap
 export default cB('avatar-group', `
  flex-wrap: nowrap;
  display: inline-flex;

package/es/back-top/src/styles/index.cssr.js

@@ -1,5 +1,6 @@
 import { c, cB, cM } from '../../../_utils/cssr';
-import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
+import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr';
+// vars:
 // --n-bezier
 // --n-border-radius
 // --n-height
@@ -13,7 +14,6 @@ import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-sc
 // --n-icon-color-hover
 // --n-icon-color-pressed
 // --n-text-color
-
 export default cB('back-top', `
  position: fixed;
  right: 40px;

package/es/badge/src/styles/index.cssr.js

@@ -1,12 +1,12 @@
 import { c, cB, cM } from '../../../_utils/cssr';
-import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
+import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr';
+// vars:
 // --n-color
 // --n-ripple-color
 // --n-bezier
 // --n-ripple-bezier
 // --n-font-size
 // --n-font-family
-
 export default c([c('@keyframes badge-wave-spread', {
   from: {
     boxShadow: '0 0 0.5px 0px var(--n-ripple-color)',

package/es/breadcrumb/src/styles/index.cssr.js

@@ -1,4 +1,5 @@
-import { c, cB, cE, cM } from '../../../_utils/cssr'; // vars:
+import { c, cB, cE, cM } from '../../../_utils/cssr';
+// vars:
 // --n-font-size
 // --n-bezier
 // --n-item-text-color
@@ -11,7 +12,6 @@ import { c, cB, cE, cM } from '../../../_utils/cssr'; // vars:
 // --n-item-color-hover
 // --n-item-color-active
 // --n-item-line-height
-
 export default cB('breadcrumb', `
  white-space: nowrap;
  cursor: default;

package/es/button/src/Button.d.ts

@@ -1,4 +1,4 @@
-import { PropType, ButtonHTMLAttributes, ExtractPropTypes } from 'vue';
+import { PropType, ButtonHTMLAttributes, ExtractPropTypes, VNodeChild } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { Type, Size } from './interface';
 export declare const buttonProps: {
@@ -33,6 +33,7 @@ export declare const buttonProps: {
         readonly default: "default";
     };
     readonly dashed: BooleanConstructor;
+    readonly renderIcon: PropType<() => VNodeChild>;
     readonly iconPlacement: {
         readonly type: PropType<"left" | "right">;
         readonly default: "left";
@@ -696,6 +697,7 @@ declare const Button: import("vue").DefineComponent<{
         readonly default: "default";
     };
     readonly dashed: BooleanConstructor;
+    readonly renderIcon: PropType<() => VNodeChild>;
     readonly iconPlacement: {
         readonly type: PropType<"left" | "right">;
         readonly default: "left";
@@ -1413,6 +1415,7 @@ declare const Button: import("vue").DefineComponent<{
         readonly default: "default";
     };
     readonly dashed: BooleanConstructor;
+    readonly renderIcon: PropType<() => VNodeChild>;
     readonly iconPlacement: {
         readonly type: PropType<"left" | "right">;
         readonly default: "left";

package/es/button/src/Button.js

@@ -22,7 +22,7 @@ export const buttonProps = Object.assign(Object.assign({}, useTheme.props), { co
     }, type: {
         type: String,
         default: 'default'
-    }, dashed: Boolean, iconPlacement: {
+    }, dashed: Boolean, renderIcon: Function, iconPlacement: {
         type: String,
         default: 'left'
     }, attrType: {
@@ -445,11 +445,11 @@ const Button = defineComponent({
             ], tabindex: this.mergedFocusable ? 0 : -1, type: this.attrType, style: this.cssVars, disabled: this.disabled, onClick: this.handleClick, onBlur: this.handleBlur, onMousedown: this.handleMousedown, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown },
             this.iconPlacement === 'right' && children,
             h(NFadeInExpandTransition, { width: true }, {
-                default: () => resolveWrappedSlot(this.$slots.icon, (children) => (this.loading || children) && (h("span", { class: `${mergedClsPrefix}-button__icon`, style: {
+                default: () => resolveWrappedSlot(this.$slots.icon, (children) => (this.loading || this.renderIcon || children) && (h("span", { class: `${mergedClsPrefix}-button__icon`, style: {
                         margin: isSlotEmpty(this.$slots.default) ? '0' : ''
                     } },
                     h(NIconSwitchTransition, null, {
-                        default: () => this.loading ? (h(NBaseLoading, { clsPrefix: mergedClsPrefix, key: "loading", class: `${mergedClsPrefix}-icon-slot`, strokeWidth: 20 })) : (h("div", { key: "icon", class: `${mergedClsPrefix}-icon-slot`, role: "none" }, children))
+                        default: () => this.loading ? (h(NBaseLoading, { clsPrefix: mergedClsPrefix, key: "loading", class: `${mergedClsPrefix}-icon-slot`, strokeWidth: 20 })) : (h("div", { key: "icon", class: `${mergedClsPrefix}-icon-slot`, role: "none" }, this.renderIcon ? this.renderIcon() : children))
                     }))))
             }),
             this.iconPlacement === 'left' && children,

package/es/button/src/styles/index.cssr.js

@@ -1,7 +1,8 @@
 import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr';
 import { fadeInWidthExpandTransition } from '../../../_styles/transitions/fade-in-width-expand.cssr';
 import { iconSwitchTransition } from '../../../_styles/transitions/icon-switch.cssr';
-import { isBrowser } from '../../../_utils'; // vars:
+import { isBrowser } from '../../../_utils';
+// vars:
 // --n-bezier
 // --n-bezier-ease-out
 // --n-ripple-duration
@@ -34,7 +35,6 @@ import { isBrowser } from '../../../_utils'; // vars:
 //
 // private-vars:
 // --n-border-color-xxx, used for custom color
-
 export default c([cB('button', `
  margin: 0;
  font-weight: var(--n-font-weight);