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:
1pnpm 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:
1import { LogoGithub } from '@cerberus-design/icons'2
3function 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
.
1import { LogoGithub } from '@cerberus-design/icons'2
3// The sizes are 16, 20, 24, 324
5function 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.
1import { LogoGithub } from '@cerberus-design/icons'2import { css } from '@cerberus/styled-system/css'3
4function App() {5 return (6 <div>7 <LogoGithub8 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.
1import { LogoGithub } from '@cerberus-design/icons'2
3function App() {4 return (5 <div>6 <LogoGithub aria-label="GitHub logo" />7 </div>8 )9}