import React, { HTMLAttributes } from 'react';
import '../../styles/colors.css';
import './Icon.scss';
export declare enum IconType {
    accountGroup = "account-group",
    alert = "alert",
    alertCircle = "alert-circle",
    alertCircleCheckOutline = "alert-circle-check-outline",
    alertCircleOutline = "alert-circle-outline",
    arrowCollapseDown = "arrow-collapse-down",
    arrowDown = "arrow-down",
    arrowLeft = "arrow-left",
    arrowRight = "arrow-right",
    arrowUp = "arrow-up",
    bell = "bell",
    chartAreaspline = "chart-areaspline",
    chartTimelineVariantShimmer = "chart-timeline-variant-shimmer",
    checkCircle = "check-circle",
    checkboxBlankCircle = "checkbox-blank-circle",
    checkboxBlankCircleOutline = "checkbox-blank-circle-outline",
    checkboxBlankOutline = "checkbox-blank-outline",
    checkboxMarked = "checkbox-marked",
    chevronDown = "chevron-down",
    chevronLeft = "chevron-left",
    chevronRight = "chevron-right",
    chevronUp = "chevron-up",
    close = "close",
    contentCopy = "content-copy",
    currencyUsd = "currency-usd",
    devTo = "dev-to",
    discord = "discord",
    dotsVertical = "dots-vertical",
    download = "download",
    earth = "earth",
    eye = "eye",
    eyeOff = "eye-off",
    facebook = "facebook",
    fileDocument = "file-document",
    fileDownload = "file-download",
    filterMenu = "filter-menu",
    forum = "forum",
    github = "github",
    googleController = "google-controller",
    hammerWrench = "hammer-wrench",
    humanHandsup = "human-handsup",
    information = "information",
    instagram = "instagram",
    lanConnect = "lan-connect",
    lanDisconnect = "lan-disconnect",
    link = "link",
    linkedin = "linkedin",
    loading = "loading",
    mapMarkerCheck = "map-marker-check",
    menu = "menu",
    menuRight = "menu-right",
    minus = "minus",
    notebookCheckOutline = "notebook-check-outline",
    openInNew = "open-in-new",
    pencil = "pencil",
    pinterest = "pinterest",
    play = "play",
    playBoxMultiple = "playBoxMultiple",
    plus = "plus",
    qrcode = "qrcode",
    radioboxBlank = "radiobox-blank",
    radioboxMarked = "radiobox-marked",
    reddit = "reddit",
    refresh = "refresh",
    slack = "slack",
    sortAscending = "sort-ascending",
    sortDescending = "sort-descending",
    sync = "sync",
    textBox = "text-box",
    thumbsUp = "thumbs-up",
    tnb = "tnb",
    trophy = "trophy",
    twitch = "twitch",
    twitter = "twitter",
    youtube = "youtube"
}
export interface IconProps extends HTMLAttributes<HTMLDivElement> {
    /** Optional. Extra classNames you can pass. Storybook options: black, white, primary, secondary, tertiary, alert. */
    className?: string;
    /** Optional. identifies a DOM node for testing purposes. */
    dataTestId?: string;
    /** Optional. disabled onClick event if onClick is passed. */
    disabled?: boolean;
    /** Required. pass in the icon type, using the IconType enum. */
    icon: IconType;
    /** Optional. add an onClick event handler. */
    onClick?(e?: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
    /** Optional. add an onKeyDown event handler. */
    onKeyDown?(e?: React.KeyboardEvent<HTMLDivElement>): void;
    /** Optional. size of the actual icon. */
    size?: number;
    /** Optional. size of the icon + paddings. Ignored if value is smaller than size.  */
    totalSize?: number | 'unset';
    /** Optional. disables focus. Only works if there is also an onClick handler.  */
    unfocusable?: boolean;
}
/**
 * Icon component with optional ability to pass in an onClick event handler.
 */
declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;
export { Icon };