Icons

Icons are a common part of most applications and therefore we have a dedicated <Icon /> component to handle display of these. Icons use SVGs under the hood and because of this, they have their own special way of being used. A real icon usage example will look something like:

<Icon icon={ Icons.FontAwesome.ChevronRight } height="18" width="18" color="red" />

Most of the properties are easy to reason about, the only one of intetest is the icon prop. This takes an object of type IconDefinition. This is made up like so:

1. viewBox (string): A string defining the view box of the svg element. If you're using an icon library (e.g. IcoMoon, FontAwesome) then in most cases the value will be: "0 0 1024 1024".

2. paths (string[]): An array of strings that are the paths that make up the icon.

A full example of an icon would look like:

ChevronRight: {
    viewBox: "0 0 1024 1024",
    paths: [
        "M632.571 501.143l-424 424c-14.286 14.286-37.143 14.286-51.429 0l-94.857-94.857c-14.286-14.286-14.286-37.143 0-51.429l303.429-303.429-303.429-303.429c-14.286-14.286-14.286-37.143 0-51.429l94.857-94.857c14.286-14.286 37.143-14.286 51.429 0l424 424c14.286 14.286 14.286 37.143 0 51.429z"
    ]
}

Usually, the IconDefinition definitions are wrapped in an IconContainer object. The end result is something that looks like:

export const Icons: IconContainer = {

    FontAwesome: {

        ChevronRight: {
            viewBox: "0 0 1024 1024",
            paths: [
                "...path..."
            ]
        },

        // AnotherIcon: { ... }
    }
}

This can then be used throughout the application like so: Icons.FontAwesome.ChevronRight. This is a decent way of organising icons as it means your application only includes the icons that you wish to use and no more.

Why Not Icon Fonts?

We don't use icon fonts. The reason is because our components live within the web component Shadow DOM. Styles, such as CSS rules generally can't pierce the Shadow DOM which means that any component that wished to use icons would have to include the entire icon font stylesheet inside - and for libraries like FontAwesome, this can be quite large.

Note

It is possible to solve this issue to use Icon Fonts if we really wanted to. However it's our preference to use an explicit component to handle icon rendering in this manner.

How to Find New Icons

IconDefinition paths can be found using the IcoMoon App.

Find the icon you would like to use then inspect the source via a debugger. You will find a svg node which will have the necessary paths and viewBox. You can also use the app to import new icon packs.

There are other ways to grab the paths but this is usually the quickest / easiest and allows you to browse to pick out your icon too.

Icon Options / Colours

There aren't many more options to the <Icon /> component.

Spin

spin (boolean - default: false): Denotes whether the icon should spin or not.

Color

color (string - default: auto): The colour of the icon. This is a string value that can be a CSS color name, e.g. red, blue, etc, or a hex / rgb code, e.g. #000 or rgb(0, 0, 0).

If no value is specified, then auto will be used. This will also try to the resolve to the color style of the parent attribute. For example:

<div>
    <Icon ...props />
</div>

This will resolve to the color style on the <div> element.