Icons

Purpose

The icon package provides approved svg's for use in wegekit related applications.

Usage

import Icon, { IconWidth } from '@wedgekit/icons';

const Example = () => (
  <IconWidth iconWidth={64}>
    <Icon> save </Icon>
  </IconWidth>
);

render(<Example />);

Props

children

Type: IconTag

Required: ✅

The child of an Icon component is an IconTag. An IconTag is a snake-cased name of a provided icon. A full list can be found here

className

Type: string

required: ❌

This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.

color

Type: ColorTag

Required: ❌

Icon color. All ColorTag options can be found here.

disabled

Type: boolean

Required: ❌

A disabled icon will have a not-allowed cursor styling.

Development

Icons offers a yarn start command for watching changes made on the module. It is important to note that the expectation is that this is only really useful when doing development on the Icon component. Any changes to the svg folder would not be compiled unless yarn build:icons is manually run. Typically the work of adding icons versus working on the Icon component will be done separately, so this will be rare.

Named Exports

Icons offers a few icons component with unique animations and stylings. They are listed here with links to their own doc pages.

Chevron - A horizontal chevron than can switch between facing up or down

IconWidth - A wrapper used to size a child icon component

Interactivewrapper - An Icon Button

Note: InteractiveWrapper is no longer recommended. Instead please use IconButton

Sort - A sort icon that can be styled to indicate descending or ascending order