import { ThemeableComponent } from "../../common";
import { DuetColor, DuetIconName, DuetIconSize, DuetMargin, DuetTheme } from "../../common-types";
export declare class DuetIcon implements ThemeableComponent {
    svgContent: string;
    /**
     * Reference to host HTML element.
     */
    element: HTMLElement;
    /**
     * Theme of the icon. This setting will be overridden when you set the color
     * property
     */
    theme: DuetTheme;
    /**
     * A raw SVG string.
     */
    icon: string;
    /**
     * A URL from which to load an icon.
     */
    src: string;
    /**
     * Icon name from Duet to display.
     */
    name: DuetIconName;
    /**
     * Controls the margin of the component.
     */
    margin: DuetMargin;
    /**
     * Whether the icon changes its size responsively or not.
     */
    responsive: boolean;
    /**
     * Custom color to be used for the icon, as a design token entered in camelCase
     * or kebab-case. Example: "color-primary". This property can also be set to
     * "currentColor" which forces the icon to use the CSS text color of parent
     * element instead. Useful when you want to control the color in stylesheet
     * instead.
     */
    color: DuetColor;
    /**
     * Custom color to be used for a circular background, as a design token entered
     * in camelCase or kebab-case. Using this option the icon will always be resized
     * to $size-icon-medium on mobile viewports. Example: "color-primary".
     */
    background: DuetColor;
    /**
     * @internal
     * Opacity of the background. Possible value in between 0-1. For example 0.75.
     */
    backgroundOpacity: number;
    /**
     * @internal
     * Rotation of the background. Possible value in between 0-360. For example 30.
     */
    backgroundRotation: number;
    /**
     * Icon size. Entered as one of the icon size design tokens.
     */
    size: DuetIconSize;
    /**
     * Custom color to be used for a circular border and icon outline, as a design
     * token entered in camelCase or kebab-case. Using this option the icon will
     * always be resized to $size-icon-medium on mobile viewports.
     * Example: "color-primary".
     */
    outline: DuetColor;
    /**
     * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size.
     */
    shape: "circle" | "brand" | "brand-rotated";
    /**
     * Component lifecycle events.
     */
    componentWillLoad(): Promise<void>;
    loadIcon(newValue: any, oldValue: any): Promise<void>;
    /**
     * render() function.
     * Always the last one in the class.
     */
    render(): any;
}