npm package: @onbeam/icons
Description: A collection of icons (as React components) from the Beam design system, which can also be used standalone. [Click here](https://packages.onbeam.com/?path=/docs/theme-icons--docs) for an overview of all icons.
Latest version: 2.0.7

# @onbeam/icons

A collection of icons (as React components) from the Beam design system, which can also be used standalone. [Click here](https://packages.onbeam.com/?path=/docs/theme-icons--docs) for an overview of all icons.

## Table of Contents

- [@onbeam/icons](#onbeamicons)
  - [Table of Contents](#table-of-contents)
  - [Installation](#installation)
  - [Usage](#usage)
  - [Tree-Shaking Support](#tree-shaking-support)
  - [Icon Properties](#icon-properties)
  - [Customization](#customization)
  - [Examples](#examples)
    - [Example 1: Basic usage](#example-1-basic-usage)
    - [Example 2: In combination with `@onbeam/styled-system`](#example-2-in-combination-with-onbeamstyled-system)
    - [Example 3: With `Icon` wrapper component](#example-3-with-icon-wrapper-component)
  - [All `@onbeam` packages](#all-onbeam-packages)

## Installation

Install the package using your preferred package manager:

```bash
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:

```bash
npx @onbeam/cli update -d [directory]
```

## Usage

Import and use the icons in your project:

```tsx
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

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

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

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

```tsx
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

```tsx
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](https://www.npmjs.com/package/@onbeam/automation-api-client)
- [@onbeam/biome-config](https://www.npmjs.com/package/@onbeam/biome-config)
- [@onbeam/cli](https://www.npmjs.com/package/@onbeam/cli)
- [@onbeam/errors](https://www.npmjs.com/package/@onbeam/errors)
- [@onbeam/features](https://www.npmjs.com/package/@onbeam/features)
- [@onbeam/icons](https://www.npmjs.com/package/@onbeam/icons)
- [@onbeam/player-api-client](https://www.npmjs.com/package/@onbeam/player-api-client)
- [@onbeam/sdk](https://www.npmjs.com/package/@onbeam/sdk)
- [@onbeam/styled-system](https://www.npmjs.com/package/@onbeam/styled-system)
- [@onbeam/ui](https://www.npmjs.com/package/@onbeam/ui)
- [@onbeam/utils](https://www.npmjs.com/package/@onbeam/utils)

---

**That's it! Happy coding! 🌈**