import { BoxProps, ChakraProps, ChakraComponent } from '@chakra-ui/react';
import { default as React } from 'react';
import { iconAlignArray, iconColorsArray, iconNamesArray, iconRotationsArray, iconSizesArray, iconVariantsArray } from './iconVariables';
export type IconAlign = typeof iconAlignArray[number];
export type IconColors = typeof iconColorsArray[number];
export type IconNames = typeof iconNamesArray[number];
export type IconRotations = typeof iconRotationsArray[number];
export type IconSizes = typeof iconSizesArray[number];
export type IconVariants = typeof iconVariantsArray[number];
export interface IconProps extends Pick<BoxProps, "className" | "id" | keyof ChakraProps> {
    /** Aligns the icon. */
    align?: IconAlign;
    /** Overrides default icon color (black). */
    color?: IconColors;
    /** Icons designated as decorative will be ignored by screenreaders. True
     * by default. */
    decorative?: boolean;
    /** Rotates the icon clockwise in increments of 90deg */
    iconRotation?: IconRotations;
    /** The name of the icon you want to use. */
    name?: IconNames;
    /** Sets the icon size. */
    size?: IconSizes;
    /** For accessibility purposes, the text passed in the `title` prop gets
     * rendered in a `title` element in the SVG. This descriptive text is not
     * visible but is needed for screenreaders to describe the graphic. */
    title?: string;
    /** FOR INTERNAL DS USE ONLY: the icon variant to display. */
    variant?: IconVariants;
}
/**
 * Renders SVG-based icons.
 */
export declare const Icon: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<IconProps> & React.RefAttributes<HTMLDivElement & SVGSVGElement>>, IconProps>;
export default Icon;