Home Docs Gallery Fiddle
versionCodeSandbox

Documentation

IntroConceptsWidgetsChartsExamples
General Purpose
ButtonUploadButtonSectionHeadingFlexBoxResizerIconProgressBarTextHighlightedSearchText
General Purpose
Collections
GridTree GridList
Collections
Form
TextFieldNumberFieldDateFieldLookupFieldCheckboxRadioSelectTextAreaDateTimeFieldCalendarMonthFieldMonthPickerColorFieldColorPickerSlidersSwitchesLabelsLabeledContainerFieldGroupValidationGroupValidator
Form
Navigation
MenuTabHScrollerLinkLinkButton
Navigation
Containers
PureContainerHtmlElementContentResolverIsolatedScopeDetachedScope
Containers
Overlays
OverlaysWindowsMsgBoxToastTooltipsFlyweight TooltipsContextMenuDropdown
Overlays
Report Edit

Icons

import {Icon} from 'cx/widgets';

The Icon is used to render icons.

Index
<Icon name="calendar" />
<Icon name="calculator" style="color:blue" />
<Icon name="bug" style="background:yellow"/>
<Icon name="pencil" />
Copied!Cx Fiddle

Configuration

PropertyDescriptionType
name

Name under which the icon is registered.

string
baseClass

Base CSS class to be applied to the element. Default is icon.

string
class
className

Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.

string/object
style

Style object applied to the wrapper div. Used for setting the dimensions of the element.

string/object

Registering Icons

Cx includes only a couple of icons. Additional icon sets need to be registered.

The following example shows how to register FontAwesome icon set.

registerFactory
Icon.registerFactory((name, props) => {
    props = { ...props };
    props.className = `fa fa-${name} ${props.className || ''}`;
    return <i {...props} />
});
Copied!

Individual icons can be registered using Icon.register method.