import { FASTElement } from "@microsoft/fast-element";
/**
 * SvgIcon
 * @summary This component is used to dynamically load and display SVG icons.
 *
 * @example
 * ```html
 * <fabric-svg-icon
 *   name="example-icon"
 *   size="24"
 *   path="/icons/example-icon.svg"
 *   aria-hidden="true"
 *   focusable="false"
 *   role="img"
 * ></fabric-svg-icon>
 * ```
 *
 * @attr {string} name - The name of the SVG icon.
 * @attr {string} size - The size of the SVG icon.
 * @attr {string} path - The path to the SVG icon file.
 * @attr {string} aria-hidden - The aria-hidden attribute for accessibility.
 * @attr {string} focusable - Indicates whether the SVG icon is focusable.
 *
 * @prop {ElementStyles | undefined} computedStylesheet - The computed stylesheet for the SVG icon.
 * @prop {boolean} isLoading - Indicates whether the icon is currently loading.
 * @prop {boolean} isError - Indicates whether there was an error loading the icon.
 * @prop {string} name - The name of the SVG icon.
 * @prop {string} size - The size of the SVG icon.
 * @prop {string} path - The path to the SVG icon file.
 * @prop {string} ariaHidden - The aria-hidden attribute for accessibility.
 * @prop {string} focusable - Indicates whether the SVG icon is focusable.
 * @prop {string | null} role - The role attribute for accessibility (native property, reflects to/from the role attribute).
 *
 * @csspart svg - The SVG element representing the icon.
 * @cssprop --icon-height - Controls the default height of the SVG icon.
 * @cssprop --icon-width - Controls the default width of the SVG icon.
 *
 * @method nameChanged - Handles changes to the name attribute.
 * @method sizeChanged - Handles changes to the size attribute.
 * @method pathChanged - Handles changes to the path attribute.
 * @method checkAndResolveRenderPromise - Checks and resolves the render promise if conditions are met.
 * @method renderIcon - Renders the SVG icon.
 * @method renderErrorIcon - Renders an error icon when the SVG fails to load.
 * @method updateComputedStylesheet - Updates the computed stylesheet with the provided width and height.
 * @method updateSvgAttributes - Updates the attributes of the SVG element.
 *
 * @fires {CustomEvent} error - Dispatched when the icon fails to load.
 *
 * @extends FASTElement
 * @tagname fabric-svg-icon
 * @public
 */
export declare class SvgIcon extends FASTElement {
    /**
     * The computed stylesheet for the SVG icon.
     * @private
     * @type {ElementStyles | undefined}
     */
    private computedStylesheet?;
    /**
     * Indicates whether the icon is currently loading.
     * @private
     * @type {boolean}
     * @default true
     */
    private isLoading;
    /**
     * Indicates whether there was an error loading the icon.
     * @private
     * @type {boolean}
     * @default false
     */
    private isError;
    /**
     * The name of the SVG icon.
     * @public
     * @attr
     * @type {string}
     */
    name?: string;
    /**
     * Handles changes to the name attribute.
     * @public
     */
    nameChanged(): void;
    /**
     * The size of the SVG icon.
     * @public
     * @attr
     * @type {string}
     */
    size?: string;
    /**
     * Handles changes to the size attribute.
     * @public
     */
    sizeChanged(): void;
    /**
     * The path to the SVG icon file.
     * @public
     * @observable
     * @attr
     * @type {string}
     */
    path?: string;
    /**
     * Handles changes to the path attribute.
     * @public
     */
    pathChanged(): void;
    /**
     * The aria-hidden attribute for accessibility.
     * @public
     * @attr
     * @type {string}
     * @default true
     */
    ariaHidden: string;
    /**
     * Indicates whether the SVG icon is focusable.
     * @public
     * @attr
     * @type {string}
     * @default false
     */
    focusable: string;
    /**
     * The role attribute for accessibility.
     * @public
     * @type {string | null}
     * @default null
     */
    get role(): string | null;
    set role(value: string | null);
    /**
     * Resolver function for the render promise.
     * @private
     * @type {() => undefined | null}
     */
    private renderResolver;
    /**
     * Promise that resolves when the icon is rendered.
     * @private
     * @type {Promise<void>}
     */
    private renderPromise;
    /**
     * Called when the element is connected to the DOM.
     * @public
     */
    connectedCallback(): void;
    /**
     * Checks and resolves the render promise if conditions are met.
     * @private
     */
    private checkAndResolveRenderPromise;
    /**
     * Renders the SVG icon.
     * @private
     */
    private renderIcon;
    /**
     * Renders an error icon when the SVG fails to load.
     * @private
     */
    private renderErrorIcon;
    /**
     * Updates the computed stylesheet with the provided width and height.
     * @private
     * @param {string | undefined} width - The width of the SVG icon.
     * @param {string | undefined} height - The height of the SVG icon.
     */
    private updateComputedStylesheet;
    /**
     * Updates the attributes of the SVG element.
     * @private
     * @param {SVGSVGElement} svgElement - The SVG element to update.
     */
    private updateSvgAttributes;
}
//# sourceMappingURL=svg-icon.d.ts.map