@uzum-tech/ui 2.0.0-beta.9 → 2.0.0

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

@@ -1 +1,3 @@
 export { default as UBaseIcon } from './src/Icon';
+export { iconProps, UIcon } from './src/UIcon';
+export type { Depth, GenericUIcon, IconNameOf, IconProps } from './src/UIcon';

package/es/_internal/icon/index.mjs

@@ -1 +1,2 @@
-export { default as UBaseIcon } from "./src/Icon.mjs";
+export { default as UBaseIcon } from "./src/Icon.mjs";
+export { iconProps, UIcon } from "./src/UIcon.mjs";

package/es/_internal/icon/src/UIcon.d.ts

@@ -0,0 +1,126 @@
+import type { IconPackBase, IconPackRegistry } from '@uzum-tech/icons';
+import type { Component, PropType, VNodeChild } from 'vue';
+import type { ExtractPublicPropTypes } from '../../../_utils';
+import type { IconPackName } from '../../../config-provider/src/internal-interface';
+export type Depth = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' | undefined;
+export type IconNameOf<P extends IconPackName> = IconPackRegistry extends Record<P, infer Pack> ? Pack extends IconPackBase<infer Name> ? Name : string : string;
+export declare const iconProps: {
+    readonly depth: PropType<Depth>;
+    readonly size: PropType<number | string>;
+    readonly color: StringConstructor;
+    readonly component: PropType<Component>;
+    readonly name: PropType<string>;
+    readonly pack: PropType<IconPackName>;
+    readonly onClick: PropType<(e: MouseEvent) => void>;
+    readonly theme: PropType<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>>;
+};
+export type IconProps = ExtractPublicPropTypes<typeof iconProps>;
+declare const UIconImpl: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly depth: PropType<Depth>;
+    readonly size: PropType<number | string>;
+    readonly color: StringConstructor;
+    readonly component: PropType<Component>;
+    readonly name: PropType<string>;
+    readonly pack: PropType<IconPackName>;
+    readonly onClick: PropType<(e: MouseEvent) => void>;
+    readonly theme: PropType<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>>;
+}>, {
+    mergedClsPrefix: import("vue").Ref<string, string>;
+    resolvedPackedIcon: import("vue").ComputedRef<VNodeChild>;
+    mergedStyle: import("vue").ComputedRef<{
+        fontSize: string | undefined;
+        color: string | undefined;
+    }>;
+    cssVars: import("vue").ComputedRef<{
+        '--u-bezier': string;
+        '--u-color': string;
+        '--u-opacity': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string, string> | undefined;
+    onRender: (() => void) | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly depth: PropType<Depth>;
+    readonly size: PropType<number | string>;
+    readonly color: StringConstructor;
+    readonly component: PropType<Component>;
+    readonly name: PropType<string>;
+    readonly pack: PropType<IconPackName>;
+    readonly onClick: PropType<(e: MouseEvent) => void>;
+    readonly theme: PropType<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type IconBaseProps = Omit<IconProps, 'name' | 'pack'>;
+export type GenericUIcon = <P extends IconPackName = IconPackName>(props: IconBaseProps & {
+    pack?: P;
+    name?: IconNameOf<P>;
+}) => any;
+export declare const UIcon: typeof UIconImpl & GenericUIcon;
+export {};

package/es/_internal/icon/src/UIcon.mjs

@@ -0,0 +1,131 @@
+import { computed, defineComponent, h } from 'vue';
+import { useConfig, useTheme, useThemeClass } from "../../../_mixins/index.mjs";
+import { formatLength, warn } from "../../../_utils/index.mjs";
+import style from "../../../icon/src/styles/index.cssr.mjs";
+import { iconLight } from "../../../icon/styles/index.mjs";
+import UBaseIcon from "./Icon.mjs";
+export const iconProps = Object.assign(Object.assign({}, useTheme.props), {
+  depth: [String, Number],
+  size: [Number, String],
+  color: String,
+  component: Object,
+  name: String,
+  pack: String,
+  onClick: Function
+});
+const UIconImpl = defineComponent({
+  _n_icon__: true,
+  name: 'Icon',
+  props: iconProps,
+  setup(props) {
+    const {
+      mergedClsPrefixRef,
+      mergedIconPacksRef,
+      inlineThemeDisabled
+    } = useConfig(props);
+    const themeRef = useTheme('Icon', '-icon', style, iconLight, props, mergedClsPrefixRef);
+    const cssVarsRef = computed(() => {
+      const {
+        depth
+      } = props;
+      const {
+        common: {
+          cubicBezierEaseInOut
+        },
+        self
+      } = themeRef.value;
+      if (depth !== undefined) {
+        const {
+          color,
+          [`opacity${depth}Depth`]: opacity
+        } = self;
+        return {
+          '--u-bezier': cubicBezierEaseInOut,
+          '--u-color': color,
+          '--u-opacity': opacity
+        };
+      }
+      return {
+        '--u-bezier': cubicBezierEaseInOut,
+        '--u-color': '',
+        '--u-opacity': ''
+      };
+    });
+    const themeClassHandle = inlineThemeDisabled ? useThemeClass('icon', computed(() => `${props.depth || 'd'}`), cssVarsRef, props) : undefined;
+    const resolvedPackedIconRef = computed(() => {
+      const {
+        name,
+        pack
+      } = props;
+      if (!name) return null;
+      const config = mergedIconPacksRef === null || mergedIconPacksRef === void 0 ? void 0 : mergedIconPacksRef.value;
+      if (!config) {
+        warn('icon', 'no icon packs configured on `u-config-provider`');
+        return null;
+      }
+      const targetName = pack !== null && pack !== void 0 ? pack : config.defaultPackName;
+      const target = config.packs.find(p => p.name === targetName);
+      if (!target) {
+        warn('icon', `icon pack "${targetName}" not found`);
+        return null;
+      }
+      if (config.async) {
+        return target.renderAsyncIcon(name);
+      }
+      if (!('renderIcon' in target)) {
+        warn('icon', `pack "${target.name}" is async-only, set \`async: true\` on \`u-config-provider :icon-packs\``);
+        return null;
+      }
+      return target.renderIcon(name);
+    });
+    return {
+      mergedClsPrefix: mergedClsPrefixRef,
+      resolvedPackedIcon: resolvedPackedIconRef,
+      mergedStyle: computed(() => {
+        const {
+          size,
+          color
+        } = props;
+        return {
+          fontSize: formatLength(size),
+          color
+        };
+      }),
+      cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+      themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+      onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+    };
+  },
+  render() {
+    var _a;
+    const {
+      $parent,
+      depth,
+      mergedClsPrefix,
+      component,
+      onRender,
+      themeClass,
+      resolvedPackedIcon
+    } = this;
+    if ((_a = $parent === null || $parent === void 0 ? void 0 : $parent.$options) === null || _a === void 0 ? void 0 : _a._n_icon__) {
+      warn('icon', 'don\'t wrap `u-icon` inside `u-icon`');
+    }
+    onRender === null || onRender === void 0 ? void 0 : onRender();
+    return h(UBaseIcon, {
+      clsPrefix: mergedClsPrefix,
+      role: 'img',
+      class: [`${mergedClsPrefix}-icon`, themeClass, {
+        [`${mergedClsPrefix}-icon--depth`]: depth,
+        [`${mergedClsPrefix}-icon--color-transition`]: depth !== undefined
+      }],
+      style: [this.cssVars, this.mergedStyle],
+      onClick: this.onClick
+    }, {
+      default: () => {
+        var _a, _b;
+        return resolvedPackedIcon !== null && resolvedPackedIcon !== void 0 ? resolvedPackedIcon : component ? h(component) : (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a);
+      }
+    });
+  }
+});
+export const UIcon = UIconImpl;

package/es/_mixins/use-config.d.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { Breakpoints, GlobalComponentConfig, RtlEnabledState } from '../config-provider/src/internal-interface';
+import type { Breakpoints, GlobalComponentConfig, IconPacksConfig, RtlEnabledState } from '../config-provider/src/internal-interface';
 type UseConfigProps = Readonly<{
     bordered?: boolean;
     [key: string]: unknown;
@@ -14,6 +14,7 @@ export default function useConfig(props?: UseConfigProps, options?: {
     mergedClsPrefixRef: Ref<string>;
     mergedBreakpointsRef: Ref<Breakpoints> | undefined;
     mergedComponentPropsRef: Ref<GlobalComponentConfig | undefined> | undefined;
+    mergedIconPacksRef: Ref<IconPacksConfig | undefined> | undefined;
     namespaceRef: ComputedRef<string | undefined>;
 };
 export declare function useMergedClsPrefix(): Ref<string>;

package/es/_mixins/use-config.mjs

@@ -10,6 +10,7 @@ export default function useConfig(props = {}, options = {
     inlineThemeDisabled: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.inlineThemeDisabled,
     mergedRtlRef: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedRtlRef,
     mergedComponentPropsRef: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedComponentPropsRef,
+    mergedIconPacksRef: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedIconPacksRef,
     mergedBreakpointsRef: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointsRef,
     mergedBorderedRef: computed(() => {
       var _a, _b;

package/es/components.d.ts

@@ -34211,6 +34211,7 @@ export declare const UConfigProvider: import("vue").DefineComponent<import("vue"
     readonly themeOverrides: import("vue").PropType<import("./config-provider").GlobalThemeOverrides | null>;
     readonly componentOptions: import("vue").PropType<import("./config-provider").GlobalComponentConfig>;
     readonly icons: import("vue").PropType<import("./config-provider").GlobalIconConfig>;
+    readonly iconPacks: import("vue").PropType<import("./config-provider").IconPacksConfig>;
     readonly breakpoints: import("vue").PropType<import("./config-provider/src/internal-interface").Breakpoints>;
     readonly breakpointProps: import("vue").PropType<import("./config-provider").BreakpointProps>;
     readonly breakpointThemeOverrides: import("vue").PropType<import("./config-provider").BreakpointThemeOverrides>;
@@ -34260,6 +34261,7 @@ export declare const UConfigProvider: import("vue").DefineComponent<import("vue"
     readonly themeOverrides: import("vue").PropType<import("./config-provider").GlobalThemeOverrides | null>;
     readonly componentOptions: import("vue").PropType<import("./config-provider").GlobalComponentConfig>;
     readonly icons: import("vue").PropType<import("./config-provider").GlobalIconConfig>;
+    readonly iconPacks: import("vue").PropType<import("./config-provider").IconPacksConfig>;
     readonly breakpoints: import("vue").PropType<import("./config-provider/src/internal-interface").Breakpoints>;
     readonly breakpointProps: import("vue").PropType<import("./config-provider").BreakpointProps>;
     readonly breakpointThemeOverrides: import("vue").PropType<import("./config-provider").BreakpointThemeOverrides>;
@@ -65458,11 +65460,117 @@ export declare const UHighlight: import("vue").DefineComponent<import("vue").Ext
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export type * from './icon';
 export { iconProps } from './icon';
-export declare const UIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    readonly depth: import("vue").PropType<import("./icon/src/Icon").Depth>;
+export declare const UIcon: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        readonly depth: import("vue").PropType<import("./_internal/icon").Depth>;
+        readonly size: import("vue").PropType<number | string>;
+        readonly color: StringConstructor;
+        readonly component: import("vue").PropType<import("vue").Component>;
+        readonly name: import("vue").PropType<string>;
+        readonly pack: import("vue").PropType<import("./config-provider").IconPackName>;
+        readonly onClick: import("vue").PropType<(e: MouseEvent) => void>;
+        readonly theme: import("vue").PropType<import("./_mixins").Theme<"Icon", {
+            color: string;
+            opacity1Depth: string;
+            opacity2Depth: string;
+            opacity3Depth: string;
+            opacity4Depth: string;
+            opacity5Depth: string;
+        }, any>>;
+        readonly themeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Icon", {
+            color: string;
+            opacity1Depth: string;
+            opacity2Depth: string;
+            opacity3Depth: string;
+            opacity4Depth: string;
+            opacity5Depth: string;
+        }, any>>>;
+        readonly builtinThemeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Icon", {
+            color: string;
+            opacity1Depth: string;
+            opacity2Depth: string;
+            opacity3Depth: string;
+            opacity4Depth: string;
+            opacity5Depth: string;
+        }, any>>>;
+    }>> & Readonly<{}>, {
+        mergedClsPrefix: import("vue").Ref<string, string>;
+        resolvedPackedIcon: import("vue").ComputedRef<import("vue").VNodeChild>;
+        mergedStyle: import("vue").ComputedRef<{
+            fontSize: string | undefined;
+            color: string | undefined;
+        }>;
+        cssVars: import("vue").ComputedRef<{
+            '--u-bezier': string;
+            '--u-color': string;
+            '--u-opacity': string;
+        }> | undefined;
+        themeClass: import("vue").Ref<string, string> | undefined;
+        onRender: (() => void) | undefined;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        readonly depth: import("vue").PropType<import("./_internal/icon").Depth>;
+        readonly size: import("vue").PropType<number | string>;
+        readonly color: StringConstructor;
+        readonly component: import("vue").PropType<import("vue").Component>;
+        readonly name: import("vue").PropType<string>;
+        readonly pack: import("vue").PropType<import("./config-provider").IconPackName>;
+        readonly onClick: import("vue").PropType<(e: MouseEvent) => void>;
+        readonly theme: import("vue").PropType<import("./_mixins").Theme<"Icon", {
+            color: string;
+            opacity1Depth: string;
+            opacity2Depth: string;
+            opacity3Depth: string;
+            opacity4Depth: string;
+            opacity5Depth: string;
+        }, any>>;
+        readonly themeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Icon", {
+            color: string;
+            opacity1Depth: string;
+            opacity2Depth: string;
+            opacity3Depth: string;
+            opacity4Depth: string;
+            opacity5Depth: string;
+        }, any>>>;
+        readonly builtinThemeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Icon", {
+            color: string;
+            opacity1Depth: string;
+            opacity2Depth: string;
+            opacity3Depth: string;
+            opacity4Depth: string;
+            opacity5Depth: string;
+        }, any>>>;
+    }>> & Readonly<{}>, {
+        mergedClsPrefix: import("vue").Ref<string, string>;
+        resolvedPackedIcon: import("vue").ComputedRef<import("vue").VNodeChild>;
+        mergedStyle: import("vue").ComputedRef<{
+            fontSize: string | undefined;
+            color: string | undefined;
+        }>;
+        cssVars: import("vue").ComputedRef<{
+            '--u-bezier': string;
+            '--u-color': string;
+            '--u-opacity': string;
+        }> | undefined;
+        themeClass: import("vue").Ref<string, string> | undefined;
+        onRender: (() => void) | undefined;
+    }, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    readonly depth: import("vue").PropType<import("./_internal/icon").Depth>;
     readonly size: import("vue").PropType<number | string>;
     readonly color: StringConstructor;
     readonly component: import("vue").PropType<import("vue").Component>;
+    readonly name: import("vue").PropType<string>;
+    readonly pack: import("vue").PropType<import("./config-provider").IconPackName>;
     readonly onClick: import("vue").PropType<(e: MouseEvent) => void>;
     readonly theme: import("vue").PropType<import("./_mixins").Theme<"Icon", {
         color: string;
@@ -65488,8 +65596,9 @@ export declare const UIcon: import("vue").DefineComponent<import("vue").ExtractP
         opacity4Depth: string;
         opacity5Depth: string;
     }, any>>>;
-}>, {
+}>> & Readonly<{}>, {
     mergedClsPrefix: import("vue").Ref<string, string>;
+    resolvedPackedIcon: import("vue").ComputedRef<import("vue").VNodeChild>;
     mergedStyle: import("vue").ComputedRef<{
         fontSize: string | undefined;
         color: string | undefined;
@@ -65501,37 +65610,7 @@ export declare const UIcon: import("vue").DefineComponent<import("vue").ExtractP
     }> | undefined;
     themeClass: import("vue").Ref<string, string> | undefined;
     onRender: (() => void) | undefined;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly depth: import("vue").PropType<import("./icon/src/Icon").Depth>;
-    readonly size: import("vue").PropType<number | string>;
-    readonly color: StringConstructor;
-    readonly component: import("vue").PropType<import("vue").Component>;
-    readonly onClick: import("vue").PropType<(e: MouseEvent) => void>;
-    readonly theme: import("vue").PropType<import("./_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>>;
-    readonly themeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>>>;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("./_internal/icon").GenericUIcon;
 export type * from './icon-bar';
 export { iconBarItemProps, iconBarProps } from './icon-bar';
 export declare const UIconBar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/es/config-provider/src/ConfigProvider.d.ts

@@ -1,7 +1,7 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { Hljs } from '../../_mixins';
 import type { UDateLocale, ULocale } from '../../locales';
-import type { GlobalComponentConfig, GlobalIconConfig, GlobalTheme, GlobalThemeOverrides } from './interface';
+import type { GlobalComponentConfig, GlobalIconConfig, GlobalTheme, GlobalThemeOverrides, IconPacksConfig } from './interface';
 import type { BreakpointMode, BreakpointProps, Breakpoints, BreakpointThemeOverrides, RtlProp } from './internal-interface';
 import type { Katex } from './katex';
 export declare const configProviderProps: {
@@ -28,6 +28,7 @@ export declare const configProviderProps: {
     readonly themeOverrides: PropType<GlobalThemeOverrides | null>;
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
+    readonly iconPacks: PropType<IconPacksConfig>;
     readonly breakpoints: PropType<Breakpoints>;
     readonly breakpointProps: PropType<BreakpointProps>;
     readonly breakpointThemeOverrides: PropType<BreakpointThemeOverrides>;
@@ -73,6 +74,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     readonly themeOverrides: PropType<GlobalThemeOverrides | null>;
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
+    readonly iconPacks: PropType<IconPacksConfig>;
     readonly breakpoints: PropType<Breakpoints>;
     readonly breakpointProps: PropType<BreakpointProps>;
     readonly breakpointThemeOverrides: PropType<BreakpointThemeOverrides>;
@@ -122,6 +124,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     readonly themeOverrides: PropType<GlobalThemeOverrides | null>;
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
+    readonly iconPacks: PropType<IconPacksConfig>;
     readonly breakpoints: PropType<Breakpoints>;
     readonly breakpointProps: PropType<BreakpointProps>;
     readonly breakpointThemeOverrides: PropType<BreakpointThemeOverrides>;

package/es/config-provider/src/ConfigProvider.mjs

@@ -29,6 +29,7 @@ export const configProviderProps = {
   themeOverrides: Object,
   componentOptions: Object,
   icons: Object,
+  iconPacks: Object,
   breakpoints: Object,
   breakpointProps: Object,
   breakpointThemeOverrides: Object,
@@ -172,6 +173,12 @@ export default defineComponent({
       } = props;
       return icons === undefined ? UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedIconsRef.value : icons;
     });
+    const mergedIconPacksRef = computed(() => {
+      const {
+        iconPacks
+      } = props;
+      return iconPacks === undefined ? UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedIconPacksRef.value : iconPacks;
+    });
     const updateWindowWidth = () => {
       if (isBrowser) {
         windowWidthRef.value = window.innerWidth;
@@ -281,6 +288,7 @@ export default defineComponent({
       mergedSsrBreakpointWidthRef,
       mergedRtlRef,
       mergedIconsRef,
+      mergedIconPacksRef,
       mergedComponentPropsRef,
       mergedBreakpointPropsRef,
       mergedBreakpointThemeOverridesRef,

package/es/config-provider/src/interface.d.ts

@@ -13,4 +13,4 @@ export type GlobalThemeOverrides = {
 } & {
     [key in keyof GlobalThemeWithoutCommon]?: ExtractThemeOverrides<GlobalThemeWithoutCommon[key]>;
 };
-export type { BreakpointMode, BreakpointProps, BreakpointThemeOverrides, GlobalComponentConfig, GlobalIconConfig } from './internal-interface';
+export type { BreakpointMode, BreakpointProps, BreakpointThemeOverrides, GlobalComponentConfig, GlobalIconConfig, IconPackName, IconPacksConfig } from './internal-interface';

package/es/config-provider/src/internal-interface.d.ts

@@ -1,3 +1,4 @@
+import type { AnyIconPack, IconPackRegistry } from '@uzum-tech/icons';
 import type { CNode } from 'css-render';
 import type { Ref, VNodeChild } from 'vue';
 import type { AccountOptionTheme } from '../../_internal/account-option/styles';
@@ -406,6 +407,12 @@ export interface GlobalComponentConfig {
     Header?: HeaderProps;
     InputOtp?: InputOtpProps;
 }
+export type IconPackName = keyof IconPackRegistry extends never ? string : keyof IconPackRegistry & string;
+export interface IconPacksConfig {
+    packs: AnyIconPack[];
+    defaultPackName: IconPackName;
+    async?: boolean;
+}
 export interface GlobalIconConfig {
     attach?: () => VNodeChild;
     cancel?: () => VNodeChild;
@@ -461,6 +468,7 @@ export interface ConfigProviderInjection {
     mergedKatexRef: Ref<Katex | undefined>;
     mergedComponentPropsRef: Ref<GlobalComponentConfig | undefined>;
     mergedIconsRef: Ref<GlobalIconConfig | undefined>;
+    mergedIconPacksRef: Ref<IconPacksConfig | undefined>;
     mergedThemeRef: Ref<GlobalTheme | undefined>;
     mergedThemeOverridesRef: Ref<GlobalThemeOverrides | undefined>;
     mergedRtlRef: Ref<RtlEnabledState | undefined>;