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