@enact/ui/Icon/Icon.d.ts

A collection of simplified unstyled cross-platform UI components for Enact

// Type definitions for ui/Icon

import { ForwardRefProps as ui_ForwardRef_ForwardRefProps } from "@enact/ui/ForwardRef";
import * as React from "react";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface IconBaseProps {
  /**
   * The icon content.
   *
   * May be specified as either:
   * *  A string that represents an icon from the   ,
   * *  An HTML entity string, Unicode reference or hex value (in the form '0x...'),
   * *  A URL specifying path to an icon image, or
   * *  An object representing a resolution independent resource (See   ).
   */
  children?: string | object;
  /**
 * Called with a reference to the root component.
 * 
 * When using   , the  `ref`  prop is forwarded to this component
as  `componentRef` .
 */
  componentRef?: object | Function;
  /**
 * Customizes the component by mapping the supplied collection of CSS class names to the
corresponding internal elements and states of this component.
 * 
 * The following classes are supported:
 * *  `icon`  - The root component class
 * *  `dingbat`  - Applied when the value of    is not
found in  
 * *  `large`  - Applied when  `size`  prop is  `'large'`
 * *  `pressed`  - Applied when  `pressed`  prop is  `true`
 * *  `small`  - Applied when  `size`  prop is  `'small'`
 */
  css?: object;
  /**
   * Flip the icon horizontally, vertically or both.
   */
  flip?: "both" | "horizontal" | "vertical";
  /**
 * The full list (hash) of supported icons.
 * 
 * The keys of this hash are the unique names of each icon. The values are the unicode
characters to insert in the icon. These will typically map to glyphs in your icon-font.
The format of the keys can be character, glyph, or entity reference that correctly
renders in a React + JSX string.
 */
  iconList?: object;
  /**
   * Applies the  `pressed`  CSS class.
   */
  pressed?: boolean;
  /**
 * The size of the button.
 * 
 * Applies the CSS class which can be customized by
  .
 */
  size?: string;
}
/**
 * A basic icon component structure without any behaviors applied to it.
 */

export class IconBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, IconBaseProps>
> {}

export interface IconDecoratorProps extends ui_ForwardRef_ForwardRefProps {}
export function IconDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & IconDecoratorProps>;

export interface IconProps
  extends Omit<Merge<IconBaseProps, IconDecoratorProps>, "componentRef"> {}
/**
 * An Icon component.
 */

export class Icon extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, IconProps>
> {}

export default Icon;