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:

1
pnpm dlx jsr add @cerberus/icons

Note

The Cerberus Icons library currently only supports React.

Usage

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

1
import { LogoGithub } from '@cerberus-design/icons'
2

3
function App() {
4
  return (
5
    <div>
6
      <LogoGithub />
7
    </div>
8
  )
9
}

Size

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

1
import { LogoGithub } from '@cerberus-design/icons'
2

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

5
function App() {
6
  return (
7
    <div>
8
      <LogoGithub size={24} />
9
    </div>
10
  )
11
}

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.

1
import { LogoGithub } from '@cerberus-design/icons'
2
import { css } from '@cerberus/styled-system/css'
3

4
function App() {
5
  return (
6
    <div>
7
      <LogoGithub
8
        className={css({
9
          color: 'red',
10
        })}
11
      />
12
    </div>
13
  )
14
}

Accessibility

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

1
import { LogoGithub } from '@cerberus-design/icons'
2

3
function App() {
4
  return (
5
    <div>
6
      <LogoGithub aria-label="GitHub logo" />
7
    </div>
8
  )
9
}