@ausbom/icon

@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 a number of system icons available as React components. You can 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 just 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, ensure that you are 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 because the icon prop can take any React component that renders SVG

In order for your icon to

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"
/>

Colorising provided system icons with CSS

Classes (.__primary and .__secondary) are applied to elements inside the provided system icon SVGs so that dual-colored icons can be colorised by css if needed. This can be useful for things like hover states.

For dual-colored icon components that you provide yourself, you'll need to add these classes to the correct elements.

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

  .__secondary {
    fill: blue;
  }
}