@onbeam/icons 1.2.5 → 1.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +130 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
# @onbeam/icons
|
|
2
|
+
|
|
3
|
+
A collection of icons (as React components) from the Beam design system, which can also be used standalone. [Click here](https://beam-packages.vercel.app/?path=/docs/theme-icons--docs) for an overview of all icons.
|
|
4
|
+
|
|
5
|
+
## Table of Contents
|
|
6
|
+
|
|
7
|
+
- [@onbeam/icons](#onbeamicons)
|
|
8
|
+
- [Table of Contents](#table-of-contents)
|
|
9
|
+
- [Installation](#installation)
|
|
10
|
+
- [Usage](#usage)
|
|
11
|
+
- [Tree-Shaking Support](#tree-shaking-support)
|
|
12
|
+
- [Icon Properties](#icon-properties)
|
|
13
|
+
- [Customization](#customization)
|
|
14
|
+
- [Examples](#examples)
|
|
15
|
+
- [Example 1: Basic usage](#example-1-basic-usage)
|
|
16
|
+
- [Example 2: In combination with `@onbeam/styled-system`](#example-2-in-combination-with-onbeamstyled-system)
|
|
17
|
+
- [Example 3: With `Icon` wrapper component](#example-3-with-icon-wrapper-component)
|
|
18
|
+
- [All `@onbeam` packages](#all-onbeam-packages)
|
|
19
|
+
|
|
20
|
+
## Installation
|
|
21
|
+
|
|
22
|
+
Install the package using your preferred package manager:
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @onbeam/icons
|
|
26
|
+
# or
|
|
27
|
+
yarn add @onbeam/icons
|
|
28
|
+
# or
|
|
29
|
+
pnpm add @onbeam/icons
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
To keep all `@onbeam` packages updated, you can use the CLI:
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npx @onbeam/cli update -d [directory]
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Usage
|
|
39
|
+
|
|
40
|
+
Import and use the icons in your project:
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import { BeamIcon } from "@onbeam/icons";
|
|
44
|
+
|
|
45
|
+
const MyComponent = () => {
|
|
46
|
+
return (
|
|
47
|
+
<div>
|
|
48
|
+
<BeamIcon width={16} height={16} />
|
|
49
|
+
</div>
|
|
50
|
+
);
|
|
51
|
+
};
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
> Note: Replace BeamIcon with the name of the icon you want to use.
|
|
55
|
+
|
|
56
|
+
## Tree-Shaking Support
|
|
57
|
+
|
|
58
|
+
This package is fully tree-shakable, ensuring that only the icons you import are included in your final bundle, optimizing your app's performance.
|
|
59
|
+
|
|
60
|
+
## Icon Properties
|
|
61
|
+
|
|
62
|
+
| Property | Type | Default | Description |
|
|
63
|
+
| --------- | ------ | --------- | -------------------------------------------- |
|
|
64
|
+
| width | number | "24" | Sets the width of the icon. |
|
|
65
|
+
| height | number | "24" | Sets the height of the icon. |
|
|
66
|
+
| className | string | undefined | Adds custom CSS classes to the icon element. |
|
|
67
|
+
|
|
68
|
+
## Customization
|
|
69
|
+
|
|
70
|
+
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`.
|
|
71
|
+
|
|
72
|
+
## Examples
|
|
73
|
+
|
|
74
|
+
### Example 1: Basic usage
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
import { BeamIcon } from "@onbeam/icons";
|
|
78
|
+
|
|
79
|
+
const App = () => (
|
|
80
|
+
<div>
|
|
81
|
+
<BeamIcon width={32} height={32} className="red" />
|
|
82
|
+
</div>
|
|
83
|
+
);
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Example 2: In combination with `@onbeam/styled-system`
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
import { BeamIcon } from "@onbeam/icons";
|
|
90
|
+
import { css } from "@onbeam/styled-system";
|
|
91
|
+
|
|
92
|
+
const App = () => (
|
|
93
|
+
<div>
|
|
94
|
+
<BeamIcon width={32} height={32} className={css({ color: "mono.100" })} />
|
|
95
|
+
</div>
|
|
96
|
+
);
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Example 3: With `Icon` wrapper component
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
import { BeamIcon } from "@onbeam/icons";
|
|
103
|
+
import { Icon } from "@onbeam/ui";
|
|
104
|
+
|
|
105
|
+
const App = () => (
|
|
106
|
+
<div>
|
|
107
|
+
<Icon size={32}>
|
|
108
|
+
<BeamIcon className={css({ color: "mono.100" })} />
|
|
109
|
+
</Icon>
|
|
110
|
+
</div>
|
|
111
|
+
);
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## All `@onbeam` packages
|
|
115
|
+
|
|
116
|
+
- [@onbeam/automation-api-client](https://www.npmjs.com/package/@onbeam/automation-api-client)
|
|
117
|
+
- [@onbeam/biome-config](https://www.npmjs.com/package/@onbeam/biome-config)
|
|
118
|
+
- [@onbeam/cli](https://www.npmjs.com/package/@onbeam/cli)
|
|
119
|
+
- [@onbeam/errors](https://www.npmjs.com/package/@onbeam/errors)
|
|
120
|
+
- [@onbeam/features](https://www.npmjs.com/package/@onbeam/features)
|
|
121
|
+
- [@onbeam/icons](https://www.npmjs.com/package/@onbeam/icons)
|
|
122
|
+
- [@onbeam/player-api-client](https://www.npmjs.com/package/@onbeam/player-api-client)
|
|
123
|
+
- [@onbeam/sdk](https://www.npmjs.com/package/@onbeam/sdk)
|
|
124
|
+
- [@onbeam/styled-system](https://www.npmjs.com/package/@onbeam/styled-system)
|
|
125
|
+
- [@onbeam/ui](https://www.npmjs.com/package/@onbeam/ui)
|
|
126
|
+
- [@onbeam/utils](https://www.npmjs.com/package/@onbeam/utils)
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
**That's it! Happy coding! 🌈**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onbeam/icons",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.7",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"import": "./dist/index.js"
|
|
20
20
|
}
|
|
21
21
|
},
|
|
22
|
-
"
|
|
23
|
-
"react": "
|
|
22
|
+
"peerDependencies": {
|
|
23
|
+
"react": ">=18"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@babel/types": "^7.23.0",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@types/react": "^18.2.0",
|
|
29
29
|
"barrelsby": "^2.8.1",
|
|
30
30
|
"tsup": "^8.0.2",
|
|
31
|
-
"@onbeam/typescript-config": "0.0.
|
|
31
|
+
"@onbeam/typescript-config": "0.0.1"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
34
34
|
"clean": "rm -rf components",
|