@xsolla/xui-rich-icon 0.95.0 → 0.97.0
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 +41 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# @xsolla/xui-rich-icon
|
|
2
|
+
|
|
3
|
+
Compound component for displaying icons, images, or initials in a shaped, sized container.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @xsolla/xui-rich-icon
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { RichIcon } from '@xsolla/xui-rich-icon';
|
|
15
|
+
|
|
16
|
+
// Icon component
|
|
17
|
+
<RichIcon size="md" variant="rounded">
|
|
18
|
+
<RichIcon.Icon component={<MyIcon />} />
|
|
19
|
+
</RichIcon>
|
|
20
|
+
|
|
21
|
+
// Image
|
|
22
|
+
<RichIcon size="lg" variant="circle">
|
|
23
|
+
<RichIcon.Icon src="https://example.com/avatar.png" />
|
|
24
|
+
</RichIcon>
|
|
25
|
+
|
|
26
|
+
// Initials
|
|
27
|
+
<RichIcon size="sm" variant="square">
|
|
28
|
+
<RichIcon.Text>JD</RichIcon.Text>
|
|
29
|
+
</RichIcon>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Exports
|
|
33
|
+
|
|
34
|
+
- `RichIcon` — Root container; `size` (`"sm"` | `"md"` | `"lg"` | `"xl"`), `variant` (`"circle"` | `"rounded"` | `"square"`)
|
|
35
|
+
- `RichIcon.Icon` — Content slot for an icon component or image URL (`src`, `component`, `color`)
|
|
36
|
+
- `RichIcon.Text` — Content slot for short text or initials; auto-sizes font to container
|
|
37
|
+
- `RichIconProps` — TypeScript props interface for `RichIcon`
|
|
38
|
+
- `RichIconIconProps` — TypeScript props interface for `RichIcon.Icon`
|
|
39
|
+
- `RichIconTextProps` — TypeScript props interface for `RichIcon.Text`
|
|
40
|
+
- `RichIconVariant` — Type: `"circle"` | `"rounded"` | `"square"`
|
|
41
|
+
- `RichIconSize` — Type: `"sm"` | `"md"` | `"lg"` | `"xl"`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-rich-icon",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.97.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-core": "0.
|
|
14
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.97.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.97.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8.0",
|