@ausbom/icon v0.21.3

@ausbom/icon

SystemIcon

import { SystemIcon } from '@ausbom/icon';
import ArrowLeft16 from '@ausbom/icon/lib/icons/system/ArrowLeft16';

<SystemIcon
  icon={ArrowLeft16}
  size={16}
  primaryColor="#1E1E1E"
  secondaryColor="#707070"
/>

Available system icons

There are a number of system icons available as React components. You'll find them in @ausbom/icon/lib/icons/system.

Each of these icon components can take a primaryColor and secondaryColor. While it's recommended to use them with the SystemIcon component, it is possible to render them by themselves.

Example:

import { SystemIcon } from '@ausbom/icon';
import ArrowLeft16 from '@ausbom/icon/lib/icons/system/ArrowLeft16'

// Used as standalone
<ArrowLeft16 primaryColor="#1E1E1E" secondaryColor="#707070" />

// Used with SystemIcon
<SystemIcon
  icon={ArrowLeft16}
  size={16}
  primaryColor="#1E1E1E"
  secondaryColor="#707070"
/>

Each icon provided by the design system is intended to be used at a certain size. Make sure you're using an icon that is designed to be displayed at the size you need.

Bring your own icons

If your project needs an icon that isn't provided in the design system, you can still use SystemIcon. The icon property can take any React component that renders SVG.

Example:

import { SystemIcon } from '@ausbom/icon';

const MyCustomIcon = props => {
  return (
    <svg>
      <path fill={props.primaryColor} class="__primary" ... />
      <path fill={props.secondaryColor} class="__secondary" ... />
    </svg>
  )
}

// Used with SystemIcon
<SystemIcon
  icon={MyCustomIcon}
  size={16}
  primaryColor="#1E1E1E"
  secondaryColor="#707070"
/>

Colourising system icons

Elements inside system icon SVG's use the classes .__primary and .__secondary. This allows dual-coloured icons to be colourised by CSS if needed. This can be useful for things like hover states.

Add these classes to the correct elements for any dual-coloured icon components that you provide.

.my-component .icon {
  .__primary {
    fill: red;
  }

  .__secondary {
    fill: blue;
  }
}