import { LitElement, type PropertyValues } from 'lit';
import type { IconMeta } from './registry/types.js';
/**
 * The icon component allows visualizing collections of pre-registered SVG icons.
 *
 * @element igc-icon
 *
 * @remarks
 * The icon component renders SVG icons from registered icon collections. Icons can be:
 * - Loaded from the internal collection (built-in icons)
 * - Registered dynamically using `registerIcon` or `registerIconFromText`
 * - Referenced by aliases that resolve differently based on the active theme
 *
 * Icons automatically adapt to the current theme when used within an `igc-theme-provider`.
 * The component subscribes to the icon registry and updates automatically when icons
 * are registered or references are updated.
 *
 * @example
 * ```html
 * <!-- Use a built-in icon -->
 * <igc-icon name="star"></igc-icon>
 *
 * <!-- Use an icon from a specific collection -->
 * <igc-icon name="search" collection="material"></igc-icon>
 *
 * <!-- Mirror the icon for RTL layouts -->
 * <igc-icon name="arrow-forward" mirrored></igc-icon>
 * ```
 *
 * @example
 * ```typescript
 * // Register a custom icon
 * import { registerIconFromText } from 'igniteui-webcomponents';
 *
 * const customIconSvg = '<svg viewBox="0 0 24 24">...</svg>';
 * registerIconFromText('custom-icon', customIconSvg, 'my-collection');
 * ```
 */
export default class IgcIconComponent extends LitElement {
    static readonly tagName = "igc-icon";
    static styles: import("lit").CSSResult[];
    static register(): void;
    private readonly _internals;
    private readonly _theming;
    private _boundIconLoaded?;
    private _svg;
    /**
     * The name of the icon glyph to draw.
     *
     * @attr name
     *
     * @remarks
     * The icon name can be:
     * - A direct reference to a registered icon in the specified collection
     * - An alias that resolves to different icons based on the current theme
     *
     * When the icon name or collection changes, the component automatically
     * fetches and renders the new icon.
     */
    name: string;
    /**
     * The name of the registered collection for look up of icons.
     *
     * @attr collection
     * @default "default"
     *
     * @remarks
     * Collections allow organizing icons into logical groups. The "default"
     * collection is used for most icons.
     * Custom collections can be created by registering icons with a specific collection name.
     */
    collection: string;
    /**
     * Whether to flip the icon horizontally. Useful for RTL (right-to-left) layouts.
     *
     * @attr mirrored
     * @default false
     *
     * @remarks
     * When true, the icon is flipped horizontally using CSS transform.
     * This is particularly useful for directional icons (arrows, chevrons)
     * in right-to-left language contexts.
     */
    mirrored: boolean;
    /** @internal */
    connectedCallback(): void;
    /** @internal */
    disconnectedCallback(): void;
    protected update(props: PropertyValues<this>): void;
    /**
     * Callback invoked when an icon is registered or updated in the registry.
     * Re-fetches the icon if it matches this component's name and collection.
     *
     * @param name - The name of the registered icon
     * @param collection - The collection of the registered icon
     */
    private _iconLoaded;
    /**
     * Fetches and updates the icon from the registry.
     *
     * @remarks
     * This method:
     * 1. Resolves the icon reference based on the current theme
     * 2. Retrieves the SVG content from the registry
     * 3. Updates the component's rendered SVG
     * 4. Sets the appropriate ARIA label from the icon's title
     *
     */
    private _getIcon;
    protected render(): import("lit-html").TemplateResult<1>;
    protected registerIcon(name: string, url: string, collection?: string): Promise<void>;
    protected registerIconFromText(name: string, iconText: string, collection?: string): void;
    protected setIconRef(name: string, collection: string, icon: IconMeta): void;
}
declare global {
    interface HTMLElementTagNameMap {
        'igc-icon': IgcIconComponent;
    }
}