Icon

Icons provide additional context to elements on the page.

Overview

Icon displays from a set of simple, square icons. Nebula includes a limited set which can be edited and expanded.

Register icons

There are a set of icons which correspond to the timing categories of registers supported by Kaluza, which are part of the default set.

Note that 'interval' and 'smart' are the same icon, since smart meters in EU are known as 'interval' meters in the AP region.

Usage

Icons should be paired with text, do not assume that the icon alone will be understood by everyone. On web it is recommended to use ems for icon sizes, so they should match the size of the text automatically (and responsively!).

Accessibility

Icons cannot be “read” by screen readers so they should be paired them with text and considered as purely decorative.

Always include text with icons. Use VisuallyHidden if necessary.

Variations

Icons will generally inherit the colour and size of their parent, but these can also be set manually.

Custom colour

Custom size

Customising icons

All custom icons should be on a square canvas and use "currentColor" as the default fill color. Props should be spread on the "svg" element.

You can override existing icons or add new icons by adding the IconProvider around your app:

import { IconProvider } from '@ovotech/nebula';

const Tree = (props: JSX.IntrinsicElements['svg']) => (
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
      ...
      fill="currentColor"
    />
</svg>
);

const Example = () => (
  <IconProvider icons={{ tree: Tree }}>
    <Icon name="tree" />
  </IconProvider>
);import { IconProvider } from '@ovotech/nebula';

const Tree = (props: JSX.IntrinsicElements['svg']) => (
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
      ...
      fill="currentColor"
    />
</svg>
);

const Example = () => (
  <IconProvider icons={{ tree: Tree }}>
    <Icon name="tree" />
  </IconProvider>
);

You can also use an svg file directly:

import { IconProvider } from '@ovotech/nebula';
import Tree from '../../svg/tree.svg';

const Example = () => (
  <IconProvider icons={{ tree: Tree }}>
    <Icon name="tree" />
  </IconProvider>
);import { IconProvider } from '@ovotech/nebula';
import Tree from '../../svg/tree.svg';

const Example = () => (
  <IconProvider icons={{ tree: Tree }}>
    <Icon name="tree" />
  </IconProvider>
);

Using Material UI icons (opens in new window) takes a little mapping of their props to work with the Icon component.

import { IconProvider } from '@ovotech/nebula';
import AccessAlarm from '@material-ui/icons/AccessAlarm';

const mapMaterialIcon = (Component: FunctionComponent) => ({
  color,
  width,
  style,
  ...rest
}: any) => <Component style={{ color, fontSize: width, ...style }} {...rest} />;

const Example = () => (
  <IconProvider icons={{
    alarm: mapMaterialIcon(AccessAlarm)
  }}>
    <Icon name="alarm" />
  </IconProvider>
)import { IconProvider } from '@ovotech/nebula';
import AccessAlarm from '@material-ui/icons/AccessAlarm';

const mapMaterialIcon = (Component: FunctionComponent) => ({
  color,
  width,
  style,
  ...rest
}: any) => <Component style={{ color, fontSize: width, ...style }} {...rest} />;

const Example = () => (
  <IconProvider icons={{
    alarm: mapMaterialIcon(AccessAlarm)
  }}>
    <Icon name="alarm" />
  </IconProvider>
)

Properties

Name	Values	Default
name	IconName
size	NumberString	1em
color	String
...	JSX.IntrinsicElements["svg"]