@progress/kendo-vue-common/icons/SvgIcon.d.ts

Kendo UI for Vue Common Utilities package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { BaseIconProps } from './BaseIconProps';
import { IconVariant } from './models/variant';
/**
 * Specifies the SVG icon.
 */
export interface SVGIcon {
    /**
     * The unique name of the icon.
     */
    name: string;
    /**
     * The entire SVG content of the icon.
     */
    content: string;
    /**
     * The [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)
     * definition that should be used for the icon.
     */
    viewBox: string;
    /**
     * A map of variant names to their SVG content strings.
     * The available variants are typically `solid`, `outline`, and `duotone`.
     */
    variants?: {
        [key: string]: string;
    };
}
/**
 * @hidden
 */
export interface SvgIconHandle {
    /**
     * The SvgIconHandle element.
     */
    element: HTMLSpanElement | null;
}
/**
 * Represents the props of the [Kendo UI for Vue SvgIcon component]({% slug overview_svgicon %}).
 */
export interface SvgIconProps extends BaseIconProps {
    /**
     * Represents the name of the icon.
     */
    name?: string;
    /**
     * Specifies the SVG icon.
     *
     * * The possible keys are:
     * * `name`—The unique name of the icon.
     * * `content`—The entire SVG content of the icon.
     * * `viewBox`—The viewBox definition that should be used for the icon.
     * * `variants`—A map of variant names to their SVG content strings.
     */
    icon?: SVGIcon;
    /**
     * Specifies the variant of the SVG icon to render.
     *
     * When set, the component renders the SVG content for the specified variant
     * if available in the icon's `variants` map. If the variant is not found,
     * the default `content` is used as a fallback.
     *
     * The possible values are:
     * * `solid`—Renders a filled (solid) version of the icon.
     * * `outline`—Renders an outlined version of the icon.
     * * `duotone`—Renders a two-tone version of the icon.
     */
    variant?: IconVariant | string;
    /**
     * Specifies the viewBox of the custom SVG icon.
     */
    viewBox?: string;
    /**
     * Specifies a list of CSS classes that will be added to the svg element.
     */
    svgClassName?: string;
    /**
     * Sets additional CSS styles to the svg element.
     */
    svgStyle?: object;
}
/**
 * @hidden
 */
export interface SvgIconState {
}
/**
 * @hidden
 */
export interface SvgIconComputed {
    [key: string]: any;
}
/**
 * @hidden
 */
export interface SvgIconMethods {
    [key: string]: any;
}
/**
 * @hidden
 */
export interface SvgIconData {
}
/**
 * @hidden
 */
export interface SvgIconAll extends SvgIconMethods, SvgIconData, SvgIconComputed, SvgIconState {
}
/**
 * @hidden
 */
declare const SvgIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
    name: StringConstructor;
    icon: ObjectConstructor;
    themeColor: {
        type: StringConstructor;
    };
    size: {
        type: StringConstructor;
    };
    flip: {
        type: StringConstructor;
    };
    fillMode: {
        type: StringConstructor;
    };
    variant: {
        type: StringConstructor;
    };
    id: StringConstructor;
    ariaLabel: StringConstructor;
    title: StringConstructor;
    viewBox: {
        type: StringConstructor;
        default: string;
    };
    tabIndex: NumberConstructor;
    svgClassName: StringConstructor;
    svgStyle: ObjectConstructor;
}>, {}, {}, {
    wrapperClass(this: SvgIconAll): {
        [x: string]: any;
        [x: number]: any;
        'k-icon': boolean;
        'k-svg-icon': boolean;
        'k-flip-h': boolean;
        'k-flip-v': boolean;
    };
}, {
    handleClick(e: any): void;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
    click: any;
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
    name: StringConstructor;
    icon: ObjectConstructor;
    themeColor: {
        type: StringConstructor;
    };
    size: {
        type: StringConstructor;
    };
    flip: {
        type: StringConstructor;
    };
    fillMode: {
        type: StringConstructor;
    };
    variant: {
        type: StringConstructor;
    };
    id: StringConstructor;
    ariaLabel: StringConstructor;
    title: StringConstructor;
    viewBox: {
        type: StringConstructor;
        default: string;
    };
    tabIndex: NumberConstructor;
    svgClassName: StringConstructor;
    svgStyle: ObjectConstructor;
}>> & Readonly<{
    onClick?: (...args: any[] | unknown[]) => any;
}>, {
    viewBox: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export { SvgIcon };