Icons

All icons are svg's that are rendered by react. This might sounds like we're just trying to be super fancy, but this gives us some advantages.

SVG is inline in the page, which allows us to control the size, colour, stroke (border) thickness via css.

Passing props

Given the icons are react components, we can pass props to control which shape we want.

• title string, used in the svg title. Each icon has their own default title. Eg: the loading icon has a title of "Loading"
• large - boolean, makes the icon larger by 25%. Default false
• left - boolean. Moves all padding to the righthand side, for when is display left aligned. (eg: in a button)
• className - supply your own classname
• onClick - function. When supplied will wrap an <a> around the icon, so is rendered as a link

For example, the VisibleIcon has two states where the "eye" is open and when it is closed. By default the icon is set to closed. To use the open state pass open as a prop.

<VisibleIcon open />
<VisibleIcon />

Not all icons have states