@commercetools-uikit/icons

Icons

Usage

import { ExportIcon } from '@commercetools-frontend/ui-kit';

<ExportIcon />;

Description

You can find a list of all available icons in the UIKit.

How to add new icons

• add the SVG file you got from the designer to @commercetools-frontend/ui-kit/icons/svg
• restart webpack (npm start in development)

Properties

Props	Type	Required	Values	Default	Description
size	string		'small', 'medium', 'big', 'scale'	'big'	Specifies the icon size (if scale is selected, the dimensions will scale according with the parents)
color	string		'solid', 'neutral60', 'info', 'primary', 'primary40', 'warning', 'error'	'solid'	Specifies the icon color

Where to use

Main use cases are:

• Buttons

  <SecondaryButton
    onClick={() => {}}
    iconLeft={<ExportIcon />}
    label={this.props.intl.formatMessage(messages.exportList)}
  />
  

• Icon Buttons

  <IconButton
    onClick={() => {}}
    icon={<ExportIcon />}
    label={this.props.intl.formatMessage(messages.exportList)}
  />