ui/Icon

An unstyled icon component to be customized by a theme or application.

Import Usage

import Icon from '@enact/ui/Icon';

Members

Icon   Component

An Icon component.

Import Usage

import Icon from '@enact/ui/Icon';

Extends: ui/Iconui/Icon.IconBase
Wrapped with: ui/Iconui/Icon.IconDecorator

IconBase   Component

A basic icon component structure without any behaviors applied to it.

Import Usage

import {IconBase} from '@enact/ui/Icon';

Properties

children

StringObject

The icon content.

May be specified as either:

• A string that represents an icon from the ui/Iconui/Icon.IconBase.iconList,

• 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 ui/resolutionui/resolution).

---

componentRef

ObjectFunction

Called with a reference to the root component.

When using ui/Iconui/Icon.Icon, the ref prop is forwarded to this component as componentRef.

---

css

Object

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 ui/Iconui/Icon.IconBase.icon is not found in ui/Iconui/Icon.IconBase.iconList

• large - Applied when size prop is 'large'

• pressed - Applied when pressed prop is true

• small - Applied when size prop is 'small'

---

flip

'both''horizontal''vertical'

Flip the icon horizontally, vertically or both.

---

iconList

Object

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.

Default: {}

---

pressed

Boolean

Applies the pressed CSS class.

Default: false

---

size

String

The size of the button.

Applies the CSS class which can be customized by /docs/developer-guide/theming//docs/developer-guide/theming/.

IconDecorator   Higher-Order Component

A higher-order component that adds behavior to ui/Iconui/Icon.IconBase.

Import Usage

import {IconDecorator} from '@enact/ui/Icon';

Includes: ui/ForwardRefui/ForwardRef.ForwardRef