@onbeam/icons

A collection of icons (as React components) from the Beam design system, which can also be used standalone. Click here for an overview of all icons.

Table of Contents

• @onbeam/icons
  • Table of Contents
  • Installation
  • Usage
  • Tree-Shaking Support
  • Icon Properties
  • Customization
  • Examples
    • Example 1: Basic usage
    • Example 2: In combination with @onbeam/styled-system
    • Example 3: With Icon wrapper component
  • All @onbeam packages

Installation

Install the package using your preferred package manager:

npm install @onbeam/icons
# or
yarn add @onbeam/icons
# or
pnpm add @onbeam/icons

To keep all @onbeam packages updated, you can use the CLI:

npx @onbeam/cli update -d [directory]

Usage

Import and use the icons in your project:

import { BeamIcon } from "@onbeam/icons";

const MyComponent = () => {
  return (
    <div>
      <BeamIcon width={16} height={16} />
    </div>
  );
};

Note: Replace BeamIcon with the name of the icon you want to use.

Tree-Shaking Support

This package is fully tree-shakable, ensuring that only the icons you import are included in your final bundle, optimizing your app's performance.

Icon Properties

| Property | Type | Default | Description | | --------- | ------ | --------- | -------------------------------------------- | | width | number | "24" | Sets the width of the icon. | | height | number | "24" | Sets the height of the icon. | | className | string | undefined | Adds custom CSS classes to the icon element. |

Customization

You can customize icons by passing size or using CSS classes. For advanced customization, consider wrapping the icons in your own components to define default styles or using the Icon wrapper component from @onbeam/ui.

Examples

Example 1: Basic usage

import { BeamIcon } from "@onbeam/icons";

const App = () => (
  <div>
    <BeamIcon width={32} height={32} className="red" />
  </div>
);

Example 2: In combination with @onbeam/styled-system

import { BeamIcon } from "@onbeam/icons";
import { css } from "@onbeam/styled-system";

const App = () => (
  <div>
    <BeamIcon width={32} height={32} className={css({ color: "mono.100" })} />
  </div>
);

Example 3: With Icon wrapper component

import { BeamIcon } from "@onbeam/icons";
import { Icon } from "@onbeam/ui";

const App = () => (
  <div>
    <Icon size={32}>
      <BeamIcon className={css({ color: "mono.100" })} />
    </Icon>
  </div>
);

All @onbeam packages

• @onbeam/automation-api-client
• @onbeam/biome-config
• @onbeam/cli
• @onbeam/errors
• @onbeam/features
• @onbeam/icons
• @onbeam/player-api-client
• @onbeam/sdk
• @onbeam/styled-system
• @onbeam/ui
• @onbeam/utils

That's it! Happy coding! 🌈