import { PropType } from "vue";
import colorNames from "../utils/ColorNames";
declare const TYPE: readonly ["filled", "outlined"];
declare const SIZE: readonly ["xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "20px", "18px", "36px", "10px"];
declare const STATE: readonly ["font-light", "light", "dark", "default", "primary", "secondary", "success", "error", "warning", "white", "black", "root", "wiggle", "element", "element-light", "element-dark"];
export type IconState = typeof STATE[number];
export type IconType = typeof TYPE[number];
export type IconSize = typeof SIZE[number];
export type IconColor = typeof colorNames[number];
/**
 * Icons are symbols that visually communicate a message or action using a metaphor.
 * Icons often accompany the text to make it informative and easier to understand.
 */
declare const _default: import("vue/types/v3-define-component").DefineComponent<{
    /**
     * Required to locate svg file
     */
    name: {
        type: StringConstructor;
        required: true;
    };
    /**
     * 'filled' | 'outlined'
     */
    type: {
        type: PropType<"filled" | "outlined">;
        default: string;
        validator(value: IconType): boolean;
    };
    /**
     * 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | '20px' | '18px' | '36px' | '10px'
     */
    size: {
        type: PropType<"small" | "x-small" | "large" | "medium" | "x-large" | "xx-large" | "xx-small" | "xxx-large" | "20px" | "18px" | "36px" | "10px">;
        default: string;
        validator(value: IconSize): boolean;
    };
    /**
     * true | false
     * <br/> Used to display icon in disable state
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Used to rotate icon
     */
    rotate: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900' | 'primary-100' | 'primary-200' | 'primary-300' | 'primary-400' | 'primary-500' | 'secondary-100' | 'secondary-200' | 'secondary-300' | 'secondary-400' | 'secondary-500' | 'warning-100' | 'warning-200' | 'warning-300' | 'warning-400' | 'warning-500' | 'success-100' | 'success-200' | 'success-300' | 'success-400' | 'success-500' | 'danger-100' | 'danger-200' | 'danger-300' | 'danger-400' | 'danger-500' | 'color1-100' | 'color1-200' | 'color1-300' | 'color2-100' | 'color2-200' | 'color2-300' | 'color3-100' | 'color3-200' | 'color3-300' | 'color4-100' | 'color4-200' | 'color4-300' | 'color5-100' | 'color5-200' | 'color5-300' | 'color6-100' | 'color6-200' | 'color6-300'
     */
    color: {
        type: PropType<"gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "secondary-100" | "secondary-200" | "secondary-300" | "secondary-400" | "secondary-500" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "danger-100" | "danger-200" | "danger-300" | "danger-400" | "danger-500" | "color1-100" | "color1-200" | "color1-300" | "color2-100" | "color2-200" | "color2-300" | "color3-100" | "color3-200" | "color3-300" | "color4-100" | "color4-200" | "color4-300" | "color5-100" | "color5-200" | "color5-300" | "color6-100" | "color6-200" | "color6-300">;
        default: null;
        validator(value: IconColor): boolean;
    };
    /**
     * 'light' | 'dark' | 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'white' | 'black' | 'font-light' | 'wiggle' | 'root' | 'element' | 'element-light' | 'element-dark'
     */
    state: {
        type: PropType<"default" | "success" | "error" | "warning" | "primary" | "white" | "light" | "black" | "element-light" | "element" | "element-dark" | "font-light" | "secondary" | "dark" | "root" | "wiggle">;
        default: string;
        validator(value: IconState): boolean;
    };
    /**
     * true | false <br/> Used to enable/disable :hover, :active, :focus effects <br/> Default : true
     */
    effects: {
        type: BooleanConstructor;
        default: boolean;
    };
    animate: {
        type: BooleanConstructor;
        default: boolean;
    };
    tooltip: {
        type: StringConstructor;
        default: null;
    };
}, import("vue").Data, import("vue").Data, {
    tooltipObj(): string | {
        content: string;
        container: string;
        classes: string[];
    };
    svg(): string;
    computedName(): string;
}, {
    handleClick(event: MouseEvent): void;
}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
    /**
     * Required to locate svg file
     */
    name: {
        type: StringConstructor;
        required: true;
    };
    /**
     * 'filled' | 'outlined'
     */
    type: {
        type: PropType<"filled" | "outlined">;
        default: string;
        validator(value: IconType): boolean;
    };
    /**
     * 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | '20px' | '18px' | '36px' | '10px'
     */
    size: {
        type: PropType<"small" | "x-small" | "large" | "medium" | "x-large" | "xx-large" | "xx-small" | "xxx-large" | "20px" | "18px" | "36px" | "10px">;
        default: string;
        validator(value: IconSize): boolean;
    };
    /**
     * true | false
     * <br/> Used to display icon in disable state
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Used to rotate icon
     */
    rotate: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900' | 'primary-100' | 'primary-200' | 'primary-300' | 'primary-400' | 'primary-500' | 'secondary-100' | 'secondary-200' | 'secondary-300' | 'secondary-400' | 'secondary-500' | 'warning-100' | 'warning-200' | 'warning-300' | 'warning-400' | 'warning-500' | 'success-100' | 'success-200' | 'success-300' | 'success-400' | 'success-500' | 'danger-100' | 'danger-200' | 'danger-300' | 'danger-400' | 'danger-500' | 'color1-100' | 'color1-200' | 'color1-300' | 'color2-100' | 'color2-200' | 'color2-300' | 'color3-100' | 'color3-200' | 'color3-300' | 'color4-100' | 'color4-200' | 'color4-300' | 'color5-100' | 'color5-200' | 'color5-300' | 'color6-100' | 'color6-200' | 'color6-300'
     */
    color: {
        type: PropType<"gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "secondary-100" | "secondary-200" | "secondary-300" | "secondary-400" | "secondary-500" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "danger-100" | "danger-200" | "danger-300" | "danger-400" | "danger-500" | "color1-100" | "color1-200" | "color1-300" | "color2-100" | "color2-200" | "color2-300" | "color3-100" | "color3-200" | "color3-300" | "color4-100" | "color4-200" | "color4-300" | "color5-100" | "color5-200" | "color5-300" | "color6-100" | "color6-200" | "color6-300">;
        default: null;
        validator(value: IconColor): boolean;
    };
    /**
     * 'light' | 'dark' | 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'white' | 'black' | 'font-light' | 'wiggle' | 'root' | 'element' | 'element-light' | 'element-dark'
     */
    state: {
        type: PropType<"default" | "success" | "error" | "warning" | "primary" | "white" | "light" | "black" | "element-light" | "element" | "element-dark" | "font-light" | "secondary" | "dark" | "root" | "wiggle">;
        default: string;
        validator(value: IconState): boolean;
    };
    /**
     * true | false <br/> Used to enable/disable :hover, :active, :focus effects <br/> Default : true
     */
    effects: {
        type: BooleanConstructor;
        default: boolean;
    };
    animate: {
        type: BooleanConstructor;
        default: boolean;
    };
    tooltip: {
        type: StringConstructor;
        default: null;
    };
}>>, {
    type: "filled" | "outlined";
    animate: boolean;
    state: "default" | "success" | "error" | "warning" | "primary" | "white" | "light" | "black" | "element-light" | "element" | "element-dark" | "font-light" | "secondary" | "dark" | "root" | "wiggle";
    size: "small" | "x-small" | "large" | "medium" | "x-large" | "xx-large" | "xx-small" | "xxx-large" | "20px" | "18px" | "36px" | "10px";
    effects: boolean;
    color: "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "secondary-100" | "secondary-200" | "secondary-300" | "secondary-400" | "secondary-500" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "danger-100" | "danger-200" | "danger-300" | "danger-400" | "danger-500" | "color1-100" | "color1-200" | "color1-300" | "color2-100" | "color2-200" | "color2-300" | "color3-100" | "color3-200" | "color3-300" | "color4-100" | "color4-200" | "color4-300" | "color5-100" | "color5-200" | "color5-300" | "color6-100" | "color6-200" | "color6-300";
    rotate: number;
    disabled: boolean;
    tooltip: string;
}>;
export default _default;