@xsolla/xui-rich-icon 0.149.1 → 0.151.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 +68 -195
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,25 +1,34 @@
|
|
|
1
|
-
#
|
|
1
|
+
# RichIcon
|
|
2
2
|
|
|
3
|
-
A cross-platform React component for displaying icons, images, or
|
|
3
|
+
A cross-platform React compound component for displaying icons, images, or initials in a styled container with selectable shape and size.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-rich-icon
|
|
9
|
-
# or
|
|
10
|
-
yarn add @xsolla/xui-rich-icon
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
##
|
|
11
|
+
## Imports
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
```tsx
|
|
14
|
+
import {
|
|
15
|
+
RichIcon,
|
|
16
|
+
type RichIconProps,
|
|
17
|
+
type RichIconIconProps,
|
|
18
|
+
type RichIconTextProps,
|
|
19
|
+
type RichIconVariant,
|
|
20
|
+
type RichIconSize,
|
|
21
|
+
} from '@xsolla/xui-rich-icon';
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Quick start
|
|
16
25
|
|
|
17
26
|
```tsx
|
|
18
27
|
import * as React from 'react';
|
|
19
28
|
import { RichIcon } from '@xsolla/xui-rich-icon';
|
|
20
29
|
import { Star } from '@xsolla/xui-icons-base';
|
|
21
30
|
|
|
22
|
-
export default function
|
|
31
|
+
export default function QuickStart() {
|
|
23
32
|
return (
|
|
24
33
|
<RichIcon size="md" variant="rounded">
|
|
25
34
|
<RichIcon.Icon>
|
|
@@ -30,59 +39,55 @@ export default function WithIcon() {
|
|
|
30
39
|
}
|
|
31
40
|
```
|
|
32
41
|
|
|
33
|
-
|
|
42
|
+
## API Reference
|
|
34
43
|
|
|
35
|
-
|
|
36
|
-
import * as React from 'react';
|
|
37
|
-
import { RichIcon } from '@xsolla/xui-rich-icon';
|
|
44
|
+
### `<RichIcon>` (root)
|
|
38
45
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
```
|
|
46
|
+
| Prop | Type | Default | Description |
|
|
47
|
+
| --- | --- | --- | --- |
|
|
48
|
+
| `children` | `ReactNode` | — | **Required.** `RichIcon.Icon` and/or `RichIcon.Text` descendants. |
|
|
49
|
+
| `variant` | `"rounded" \| "circle" \| "square"` | `"rounded"` | Container shape. |
|
|
50
|
+
| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Container size. |
|
|
47
51
|
|
|
48
|
-
|
|
52
|
+
Inherits `BoxProps` — additional layout props are spread onto the root `Box`.
|
|
49
53
|
|
|
50
|
-
|
|
51
|
-
import * as React from 'react';
|
|
52
|
-
import { RichIcon } from '@xsolla/xui-rich-icon';
|
|
54
|
+
### `<RichIcon.Icon>`
|
|
53
55
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
</RichIcon>
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
```
|
|
56
|
+
| Prop | Type | Default | Description |
|
|
57
|
+
| --- | --- | --- | --- |
|
|
58
|
+
| `src` | `string` | — | Image URL rendered as a background image. |
|
|
59
|
+
| `component` | `ReactNode` | — | Custom node (e.g. a Lucide icon) when `src` isn't supplied. |
|
|
60
|
+
| `children` | `ReactNode` | — | Falls back when neither `src` nor `component` is set. |
|
|
61
|
+
| `color` | `string` | — | Forwarded to the inner `Box` via spread, but **not applied to the icon child** — wrap the icon in your own coloured wrapper if you need to recolour it. |
|
|
64
62
|
|
|
65
|
-
|
|
63
|
+
Inherits `BoxProps` and `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
|
|
66
64
|
|
|
67
|
-
|
|
68
|
-
import { RichIcon } from '@xsolla/xui-rich-icon';
|
|
65
|
+
### `<RichIcon.Text>`
|
|
69
66
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
67
|
+
| Prop | Type | Default | Description |
|
|
68
|
+
| --- | --- | --- | --- |
|
|
69
|
+
| `children` | `ReactNode` | — | **Required.** Text content (typically initials). |
|
|
70
|
+
|
|
71
|
+
Inherits `TextProps` and `ThemeOverrideProps`. Font size is driven by the parent `RichIcon`'s `size` (10/12/14/18 for sm/md/lg/xl).
|
|
72
|
+
|
|
73
|
+
### Sizes and shapes
|
|
74
|
+
|
|
75
|
+
| Size | Container |
|
|
76
|
+
| --- | --- |
|
|
77
|
+
| `sm` | 24×24 |
|
|
78
|
+
| `md` | 32×32 |
|
|
79
|
+
| `lg` | 40×40 |
|
|
80
|
+
| `xl` | 64×64 |
|
|
81
|
+
|
|
82
|
+
| Variant | Border radius |
|
|
83
|
+
| --- | --- |
|
|
84
|
+
| `square` | `0` |
|
|
85
|
+
| `rounded` | `8` |
|
|
86
|
+
| `circle` | `1000` |
|
|
82
87
|
|
|
83
88
|
## Examples
|
|
84
89
|
|
|
85
|
-
###
|
|
90
|
+
### Variants
|
|
86
91
|
|
|
87
92
|
```tsx
|
|
88
93
|
import * as React from 'react';
|
|
@@ -92,67 +97,30 @@ import { User } from '@xsolla/xui-icons-base';
|
|
|
92
97
|
export default function Variants() {
|
|
93
98
|
return (
|
|
94
99
|
<div style={{ display: 'flex', gap: 16 }}>
|
|
95
|
-
<RichIcon size="lg" variant="square">
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
<RichIcon size="lg" variant="rounded">
|
|
99
|
-
<RichIcon.Icon><User size={24} /></RichIcon.Icon>
|
|
100
|
-
</RichIcon>
|
|
101
|
-
<RichIcon size="lg" variant="circle">
|
|
102
|
-
<RichIcon.Icon><User size={24} /></RichIcon.Icon>
|
|
103
|
-
</RichIcon>
|
|
104
|
-
</div>
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
### Different Sizes
|
|
110
|
-
|
|
111
|
-
```tsx
|
|
112
|
-
import * as React from 'react';
|
|
113
|
-
import { RichIcon } from '@xsolla/xui-rich-icon';
|
|
114
|
-
import { Heart } from '@xsolla/xui-icons-base';
|
|
115
|
-
|
|
116
|
-
export default function Sizes() {
|
|
117
|
-
return (
|
|
118
|
-
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
|
119
|
-
<RichIcon size="sm" variant="rounded">
|
|
120
|
-
<RichIcon.Icon><Heart size={14} /></RichIcon.Icon>
|
|
121
|
-
</RichIcon>
|
|
122
|
-
<RichIcon size="md" variant="rounded">
|
|
123
|
-
<RichIcon.Icon><Heart size={18} /></RichIcon.Icon>
|
|
124
|
-
</RichIcon>
|
|
125
|
-
<RichIcon size="lg" variant="rounded">
|
|
126
|
-
<RichIcon.Icon><Heart size={24} /></RichIcon.Icon>
|
|
127
|
-
</RichIcon>
|
|
128
|
-
<RichIcon size="xl" variant="rounded">
|
|
129
|
-
<RichIcon.Icon><Heart size={32} /></RichIcon.Icon>
|
|
130
|
-
</RichIcon>
|
|
100
|
+
<RichIcon size="lg" variant="square"><RichIcon.Icon><User size={24} /></RichIcon.Icon></RichIcon>
|
|
101
|
+
<RichIcon size="lg" variant="rounded"><RichIcon.Icon><User size={24} /></RichIcon.Icon></RichIcon>
|
|
102
|
+
<RichIcon size="lg" variant="circle"><RichIcon.Icon><User size={24} /></RichIcon.Icon></RichIcon>
|
|
131
103
|
</div>
|
|
132
104
|
);
|
|
133
105
|
}
|
|
134
106
|
```
|
|
135
107
|
|
|
136
|
-
###
|
|
108
|
+
### Initials
|
|
137
109
|
|
|
138
110
|
```tsx
|
|
139
111
|
import * as React from 'react';
|
|
140
112
|
import { RichIcon } from '@xsolla/xui-rich-icon';
|
|
141
113
|
|
|
142
|
-
export default function
|
|
114
|
+
export default function Initials() {
|
|
143
115
|
const users = [
|
|
144
116
|
{ name: 'John Doe', initials: 'JD' },
|
|
145
117
|
{ name: 'Alice Smith', initials: 'AS' },
|
|
146
|
-
{ name: 'Bob Wilson', initials: 'BW' },
|
|
147
118
|
];
|
|
148
|
-
|
|
149
119
|
return (
|
|
150
120
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
151
121
|
{users.map(({ name, initials }) => (
|
|
152
122
|
<RichIcon key={name} size="md" variant="circle" aria-label={name}>
|
|
153
|
-
<RichIcon.
|
|
154
|
-
<RichIcon.Text>{initials}</RichIcon.Text>
|
|
155
|
-
</RichIcon.Icon>
|
|
123
|
+
<RichIcon.Text>{initials}</RichIcon.Text>
|
|
156
124
|
</RichIcon>
|
|
157
125
|
))}
|
|
158
126
|
</div>
|
|
@@ -160,118 +128,23 @@ export default function UserInitials() {
|
|
|
160
128
|
}
|
|
161
129
|
```
|
|
162
130
|
|
|
163
|
-
###
|
|
131
|
+
### Image
|
|
164
132
|
|
|
165
133
|
```tsx
|
|
166
134
|
import * as React from 'react';
|
|
167
135
|
import { RichIcon } from '@xsolla/xui-rich-icon';
|
|
168
|
-
import { Shield, Zap, Globe } from '@xsolla/xui-icons-base';
|
|
169
|
-
|
|
170
|
-
export default function FeatureIcons() {
|
|
171
|
-
const features = [
|
|
172
|
-
{ icon: <Shield size={24} />, title: 'Secure' },
|
|
173
|
-
{ icon: <Zap size={24} />, title: 'Fast' },
|
|
174
|
-
{ icon: <Globe size={24} />, title: 'Global' },
|
|
175
|
-
];
|
|
176
136
|
|
|
137
|
+
export default function ImageExample() {
|
|
177
138
|
return (
|
|
178
|
-
<
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
<RichIcon size="xl" variant="rounded">
|
|
182
|
-
<RichIcon.Icon>{icon}</RichIcon.Icon>
|
|
183
|
-
</RichIcon>
|
|
184
|
-
<p style={{ marginTop: 8 }}>{title}</p>
|
|
185
|
-
</div>
|
|
186
|
-
))}
|
|
187
|
-
</div>
|
|
188
|
-
);
|
|
189
|
-
}
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
### Game Platform Icons
|
|
193
|
-
|
|
194
|
-
```tsx
|
|
195
|
-
import * as React from 'react';
|
|
196
|
-
import { RichIcon } from '@xsolla/xui-rich-icon';
|
|
197
|
-
import { Steam, Playstation, Xbox } from '@xsolla/xui-icons-brand';
|
|
198
|
-
|
|
199
|
-
export default function PlatformIcons() {
|
|
200
|
-
return (
|
|
201
|
-
<div style={{ display: 'flex', gap: 12 }}>
|
|
202
|
-
<RichIcon size="lg" variant="rounded">
|
|
203
|
-
<RichIcon.Icon component={<Steam size={24} />} />
|
|
204
|
-
</RichIcon>
|
|
205
|
-
<RichIcon size="lg" variant="rounded">
|
|
206
|
-
<RichIcon.Icon component={<Playstation size={24} />} />
|
|
207
|
-
</RichIcon>
|
|
208
|
-
<RichIcon size="lg" variant="rounded">
|
|
209
|
-
<RichIcon.Icon component={<Xbox size={24} />} />
|
|
210
|
-
</RichIcon>
|
|
211
|
-
</div>
|
|
139
|
+
<RichIcon size="lg" variant="circle" aria-label="Profile">
|
|
140
|
+
<RichIcon.Icon src="https://example.com/avatar.jpg" />
|
|
141
|
+
</RichIcon>
|
|
212
142
|
);
|
|
213
143
|
}
|
|
214
144
|
```
|
|
215
145
|
|
|
216
|
-
## API Reference
|
|
217
|
-
|
|
218
|
-
### RichIcon
|
|
219
|
-
|
|
220
|
-
**RichIconProps:**
|
|
221
|
-
|
|
222
|
-
| Prop | Type | Default | Description |
|
|
223
|
-
| :--- | :--- | :------ | :---------- |
|
|
224
|
-
| children | `ReactNode` | - | RichIcon.Icon child component. |
|
|
225
|
-
| variant | `"rounded" \| "circle" \| "square"` | `"rounded"` | Container shape. |
|
|
226
|
-
| size | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Container size. |
|
|
227
|
-
|
|
228
|
-
### RichIcon.Icon
|
|
229
|
-
|
|
230
|
-
**RichIconIconProps:**
|
|
231
|
-
|
|
232
|
-
| Prop | Type | Default | Description |
|
|
233
|
-
| :--- | :--- | :------ | :---------- |
|
|
234
|
-
| src | `string` | - | Image URL (displays as background). |
|
|
235
|
-
| component | `ReactNode` | - | Custom icon component. |
|
|
236
|
-
| children | `ReactNode` | - | Child content (icon or text). |
|
|
237
|
-
| color | `string` | - | Icon color override. |
|
|
238
|
-
|
|
239
|
-
### RichIcon.Text
|
|
240
|
-
|
|
241
|
-
**RichIconTextProps:**
|
|
242
|
-
|
|
243
|
-
| Prop | Type | Default | Description |
|
|
244
|
-
| :--- | :--- | :------ | :---------- |
|
|
245
|
-
| children | `string` | - | Text content (typically initials). |
|
|
246
|
-
|
|
247
|
-
## Size Specifications
|
|
248
|
-
|
|
249
|
-
| Size | Dimensions | Font Size |
|
|
250
|
-
| :--- | :--------- | :-------- |
|
|
251
|
-
| `sm` | 24x24 | 10px |
|
|
252
|
-
| `md` | 32x32 | 12px |
|
|
253
|
-
| `lg` | 40x40 | 14px |
|
|
254
|
-
| `xl` | 64x64 | 18px |
|
|
255
|
-
|
|
256
|
-
## Variant Shapes
|
|
257
|
-
|
|
258
|
-
| Variant | Border Radius |
|
|
259
|
-
| :------ | :------------ |
|
|
260
|
-
| `square` | 0px |
|
|
261
|
-
| `rounded` | 8px |
|
|
262
|
-
| `circle` | 1000px |
|
|
263
|
-
|
|
264
|
-
## Use Cases
|
|
265
|
-
|
|
266
|
-
- **User avatars**: Display profile pictures or initials
|
|
267
|
-
- **Feature icons**: Highlight features with styled icons
|
|
268
|
-
- **Category icons**: Visual indicators for categories
|
|
269
|
-
- **Platform badges**: Display platform or service icons
|
|
270
|
-
- **Status indicators**: Combined with status icons
|
|
271
|
-
|
|
272
146
|
## Accessibility
|
|
273
147
|
|
|
274
|
-
-
|
|
275
|
-
-
|
|
276
|
-
-
|
|
277
|
-
- Ensure sufficient color contrast for text content
|
|
148
|
+
- The root container is decorative by default — pass `aria-label` for meaningful icons.
|
|
149
|
+
- Text children rendered via `RichIcon.Text` are accessible to screen readers.
|
|
150
|
+
- Ensure sufficient contrast between text and the container background.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-rich-icon",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.151.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.151.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.151.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8.0",
|