Overview

The Cerberus Icons library is a optional library to add visual elements to your React app.

Installation

Install the Cerberus Icons library, with the package manager of your choice:

Terminal window
pnpm dlx jsr add @cerberus/icons

Usage

To use the Cerberus Icons library, import any icon component from the library:

import { LogoGithub } from '@cerberus/icons'


function App() {
  return (
    <div>
      <LogoGithub />
    </div>
  )
}

Size

You can set the size of the icon by passing a size prop. The default size is 16.

import { LogoGithub } from '@cerberus/icons'


// The sizes are 16, 20, 24, 32


function App() {
  return (
    <div>
      <LogoGithub size={24} />
    </div>
  )
}

Color

The icons inherit the color of the parent element. If you need to change the icon color to be different from the parent element, you can do so with custom styles.

import { LogoGithub } from '@cerberus/icons'
import { css } from '@cerberus/styled-system/css'


function App() {
  return (
    <div>
      <LogoGithub
        className={css({
          color: 'red',
        })}
      />
    </div>
  )
}

Accessibility

The icons are hidden by default. You can add an aria-label to the icon to provide a description for screen readers.

import { LogoGithub } from '@cerberus/icons'


function App() {
  return (
    <div>
      <LogoGithub aria-label="GitHub logo" />
    </div>
  )
}