@xsolla/xui-icons-product 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 +85 -180
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,159 +1,121 @@
|
|
|
1
|
-
#
|
|
1
|
+
# IconsProduct
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Xsolla product and service icons for dashboards, documentation, and marketing surfaces. Each icon has a colour glyph by default and switches to a single-colour glyph when a `color` prop is supplied.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-icons-product
|
|
9
|
-
# or
|
|
10
|
-
yarn add @xsolla/xui-icons-product
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
##
|
|
14
|
-
|
|
15
|
-
### All Product Icons
|
|
11
|
+
## Imports
|
|
16
12
|
|
|
17
13
|
```tsx
|
|
18
|
-
import
|
|
19
|
-
import {
|
|
20
|
-
PayStation,
|
|
21
|
-
Login,
|
|
22
|
-
InGameStore,
|
|
23
|
-
Launcher,
|
|
24
|
-
} from '@xsolla/xui-icons-product';
|
|
25
|
-
|
|
26
|
-
export default function AllProducts() {
|
|
27
|
-
return (
|
|
28
|
-
<div style={{ display: 'flex', gap: 16 }}>
|
|
29
|
-
<PayStation size={32} />
|
|
30
|
-
<Login size={32} />
|
|
31
|
-
<InGameStore size={32} />
|
|
32
|
-
<Launcher size={32} />
|
|
33
|
-
</div>
|
|
34
|
-
);
|
|
35
|
-
}
|
|
14
|
+
import { PayStation, Login, InGameStore, Launcher, BaseIcon, type ProductIconProps } from '@xsolla/xui-icons-product';
|
|
36
15
|
```
|
|
37
16
|
|
|
38
|
-
|
|
17
|
+
## Quick start
|
|
39
18
|
|
|
40
19
|
```tsx
|
|
41
20
|
import * as React from 'react';
|
|
42
21
|
import { PayStation } from '@xsolla/xui-icons-product';
|
|
43
22
|
|
|
44
|
-
export default function
|
|
45
|
-
return
|
|
46
|
-
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
|
47
|
-
<PayStation size={24} />
|
|
48
|
-
<PayStation size={32} />
|
|
49
|
-
<PayStation size={48} />
|
|
50
|
-
<PayStation size={64} />
|
|
51
|
-
</div>
|
|
52
|
-
);
|
|
23
|
+
export default function QuickStart() {
|
|
24
|
+
return <PayStation size={32} aria-label="Pay Station" />;
|
|
53
25
|
}
|
|
54
26
|
```
|
|
55
27
|
|
|
56
|
-
|
|
28
|
+
Pass `color` to render the monochrome variant in that colour:
|
|
57
29
|
|
|
58
30
|
```tsx
|
|
59
|
-
|
|
60
|
-
import { Login, InGameStore } from '@xsolla/xui-icons-product';
|
|
61
|
-
|
|
62
|
-
export default function CustomColor() {
|
|
63
|
-
return (
|
|
64
|
-
<div style={{ display: 'flex', gap: 16 }}>
|
|
65
|
-
<Login size={32} color="#6366F1" />
|
|
66
|
-
<InGameStore size={32} color="#10B981" />
|
|
67
|
-
</div>
|
|
68
|
-
);
|
|
69
|
-
}
|
|
31
|
+
<PayStation size={32} color="#6366F1" />
|
|
70
32
|
```
|
|
71
33
|
|
|
72
|
-
##
|
|
34
|
+
## API Reference
|
|
73
35
|
|
|
74
|
-
|
|
75
|
-
import { PayStation } from '@xsolla/xui-icons-product';
|
|
36
|
+
### Product icon components (`<PayStation>`, `<Login>`, ...)
|
|
76
37
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
38
|
+
All product icons accept the same props (`ProductIconProps`).
|
|
39
|
+
|
|
40
|
+
| Prop | Type | Default | Description |
|
|
41
|
+
| --- | --- | --- | --- |
|
|
42
|
+
| `size` | `number` | `24` | Pixel size (square). |
|
|
43
|
+
| `color` | `string` | — | When set, renders the monochrome variant in this colour. When omitted, renders the colour variant. |
|
|
44
|
+
| `className` | `string` | — | CSS class on the wrapper. |
|
|
45
|
+
| `style` | `CSSProperties` | — | Inline styles. |
|
|
46
|
+
| `data-testid` | `string` | — | Test ID (web). |
|
|
47
|
+
| `testID` | `string` | — | Test ID (React Native). |
|
|
48
|
+
| `aria-label` | `string` | — | Accessible label. When set, the icon is exposed as `role="img"`. |
|
|
49
|
+
| `aria-hidden` | `boolean` | `true` if no `aria-label` | Hide from assistive tech. |
|
|
50
|
+
|
|
51
|
+
This package does not consume `ThemeOverrideProps`.
|
|
52
|
+
|
|
53
|
+
### `<BaseIcon>`
|
|
54
|
+
|
|
55
|
+
Internal wrapper exported for advanced use (custom product icons built from raw SVG strings). Most consumers should use the named icon components.
|
|
56
|
+
|
|
57
|
+
## Available icons
|
|
58
|
+
|
|
59
|
+
| Component | Product |
|
|
60
|
+
| --- | --- |
|
|
61
|
+
| `Accelerator` | Xsolla Accelerator |
|
|
62
|
+
| `AntiFraud` | Anti-Fraud protection |
|
|
63
|
+
| `BuyButton` | Buy Button widget |
|
|
64
|
+
| `Documentation` | Documentation portal |
|
|
65
|
+
| `Funding` | Game funding |
|
|
66
|
+
| `Gip` | Game Inventory Platform |
|
|
67
|
+
| `InGameStore` | In-Game Store |
|
|
68
|
+
| `Launcher` | Game Launcher |
|
|
69
|
+
| `Login` | Login & authentication |
|
|
70
|
+
| `PartnerNetwork` | Partner Network |
|
|
71
|
+
| `PayStation` | Pay Station |
|
|
72
|
+
| `PlayerInventory` | Player Inventory |
|
|
73
|
+
| `Publisher` | Publisher Account |
|
|
74
|
+
| `SiteBuilder` | Site Builder |
|
|
75
|
+
| `Subscriptions` | Subscriptions |
|
|
85
76
|
|
|
86
77
|
## Examples
|
|
87
78
|
|
|
88
|
-
###
|
|
79
|
+
### Colour vs custom-colour
|
|
89
80
|
|
|
90
81
|
```tsx
|
|
91
82
|
import * as React from 'react';
|
|
92
|
-
import {
|
|
93
|
-
PayStation,
|
|
94
|
-
Login,
|
|
95
|
-
InGameStore,
|
|
96
|
-
AntiFraud,
|
|
97
|
-
Subscriptions,
|
|
98
|
-
} from '@xsolla/xui-icons-product';
|
|
99
|
-
|
|
100
|
-
export default function FeatureList() {
|
|
101
|
-
const features = [
|
|
102
|
-
{ icon: PayStation, name: 'Pay Station', desc: 'Payment processing' },
|
|
103
|
-
{ icon: Login, name: 'Login', desc: 'User authentication' },
|
|
104
|
-
{ icon: InGameStore, name: 'In-Game Store', desc: 'Virtual goods' },
|
|
105
|
-
{ icon: AntiFraud, name: 'Anti-Fraud', desc: 'Payment protection' },
|
|
106
|
-
{ icon: Subscriptions, name: 'Subscriptions', desc: 'Recurring payments' },
|
|
107
|
-
];
|
|
83
|
+
import { Login, InGameStore } from '@xsolla/xui-icons-product';
|
|
108
84
|
|
|
85
|
+
export default function Colours() {
|
|
109
86
|
return (
|
|
110
|
-
<div style={{ display: 'flex',
|
|
111
|
-
{
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
<strong>{name}</strong>
|
|
116
|
-
<p style={{ margin: 0, color: '#666' }}>{desc}</p>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
))}
|
|
87
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
88
|
+
<Login size={32} aria-label="Login (default colour)" />
|
|
89
|
+
<Login size={32} color="#6366F1" aria-label="Login (indigo)" />
|
|
90
|
+
<InGameStore size={32} aria-label="In-Game Store (default colour)" />
|
|
91
|
+
<InGameStore size={32} color="#10B981" aria-label="In-Game Store (emerald)" />
|
|
120
92
|
</div>
|
|
121
93
|
);
|
|
122
94
|
}
|
|
123
95
|
```
|
|
124
96
|
|
|
125
|
-
### Product
|
|
97
|
+
### Product feature list
|
|
126
98
|
|
|
127
99
|
```tsx
|
|
128
100
|
import * as React from 'react';
|
|
129
|
-
import { PayStation, Login, InGameStore,
|
|
101
|
+
import { PayStation, Login, InGameStore, AntiFraud, Subscriptions } from '@xsolla/xui-icons-product';
|
|
130
102
|
|
|
131
|
-
export default function
|
|
132
|
-
const
|
|
133
|
-
{
|
|
134
|
-
{
|
|
135
|
-
{
|
|
136
|
-
{
|
|
103
|
+
export default function FeatureList() {
|
|
104
|
+
const features = [
|
|
105
|
+
{ Icon: PayStation, name: 'Pay Station', desc: 'Payment processing' },
|
|
106
|
+
{ Icon: Login, name: 'Login', desc: 'User authentication' },
|
|
107
|
+
{ Icon: InGameStore, name: 'In-Game Store', desc: 'Virtual goods' },
|
|
108
|
+
{ Icon: AntiFraud, name: 'Anti-Fraud', desc: 'Payment protection' },
|
|
109
|
+
{ Icon: Subscriptions, name: 'Subscriptions', desc: 'Recurring payments' },
|
|
137
110
|
];
|
|
138
|
-
|
|
139
111
|
return (
|
|
140
|
-
<div style={{ display: '
|
|
141
|
-
{
|
|
142
|
-
<div
|
|
143
|
-
|
|
144
|
-
style={{
|
|
145
|
-
padding: 16,
|
|
146
|
-
border: '1px solid #e0e0e0',
|
|
147
|
-
borderRadius: 8,
|
|
148
|
-
display: 'flex',
|
|
149
|
-
alignItems: 'center',
|
|
150
|
-
gap: 12,
|
|
151
|
-
}}
|
|
152
|
-
>
|
|
153
|
-
<Icon size={40} />
|
|
112
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
113
|
+
{features.map(({ Icon, name, desc }) => (
|
|
114
|
+
<div key={name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
|
115
|
+
<Icon size={32} aria-hidden />
|
|
154
116
|
<div>
|
|
155
117
|
<strong>{name}</strong>
|
|
156
|
-
<p style={{ margin: 0,
|
|
118
|
+
<p style={{ margin: 0, color: '#666' }}>{desc}</p>
|
|
157
119
|
</div>
|
|
158
120
|
</div>
|
|
159
121
|
))}
|
|
@@ -162,33 +124,28 @@ export default function DashboardCards() {
|
|
|
162
124
|
}
|
|
163
125
|
```
|
|
164
126
|
|
|
165
|
-
### Navigation
|
|
127
|
+
### Navigation menu
|
|
166
128
|
|
|
167
129
|
```tsx
|
|
168
130
|
import * as React from 'react';
|
|
169
|
-
import {
|
|
170
|
-
PayStation,
|
|
171
|
-
InGameStore,
|
|
172
|
-
PlayerInventory,
|
|
173
|
-
Documentation,
|
|
174
|
-
} from '@xsolla/xui-icons-product';
|
|
131
|
+
import { PayStation, InGameStore, PlayerInventory, Documentation } from '@xsolla/xui-icons-product';
|
|
175
132
|
|
|
176
133
|
export default function NavigationMenu() {
|
|
177
134
|
const [selected, setSelected] = React.useState('paystation');
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
{ id: '
|
|
181
|
-
{ id: '
|
|
182
|
-
{ id: '
|
|
183
|
-
{ id: 'docs', icon: Documentation, label: 'Documentation' },
|
|
135
|
+
const items = [
|
|
136
|
+
{ id: 'paystation', Icon: PayStation, label: 'Pay Station' },
|
|
137
|
+
{ id: 'store', Icon: InGameStore, label: 'Store' },
|
|
138
|
+
{ id: 'inventory', Icon: PlayerInventory, label: 'Inventory' },
|
|
139
|
+
{ id: 'docs', Icon: Documentation, label: 'Documentation' },
|
|
184
140
|
];
|
|
185
|
-
|
|
186
141
|
return (
|
|
187
142
|
<nav style={{ width: 240, padding: 8 }}>
|
|
188
|
-
{
|
|
143
|
+
{items.map(({ id, Icon, label }) => (
|
|
189
144
|
<button
|
|
190
145
|
key={id}
|
|
146
|
+
type="button"
|
|
191
147
|
onClick={() => setSelected(id)}
|
|
148
|
+
aria-pressed={selected === id}
|
|
192
149
|
style={{
|
|
193
150
|
display: 'flex',
|
|
194
151
|
alignItems: 'center',
|
|
@@ -202,7 +159,7 @@ export default function NavigationMenu() {
|
|
|
202
159
|
textAlign: 'left',
|
|
203
160
|
}}
|
|
204
161
|
>
|
|
205
|
-
<Icon size={20} color={selected === id ? '#1976D2' : '#666'} />
|
|
162
|
+
<Icon size={20} color={selected === id ? '#1976D2' : '#666'} aria-hidden />
|
|
206
163
|
<span style={{ color: selected === id ? '#1976D2' : '#333' }}>{label}</span>
|
|
207
164
|
</button>
|
|
208
165
|
))}
|
|
@@ -211,60 +168,8 @@ export default function NavigationMenu() {
|
|
|
211
168
|
}
|
|
212
169
|
```
|
|
213
170
|
|
|
214
|
-
## API Reference
|
|
215
|
-
|
|
216
|
-
### Product Icon Components
|
|
217
|
-
|
|
218
|
-
Each product icon component accepts the same props:
|
|
219
|
-
|
|
220
|
-
**ProductIconProps:**
|
|
221
|
-
|
|
222
|
-
| Prop | Type | Default | Description |
|
|
223
|
-
| :--- | :--- | :------ | :---------- |
|
|
224
|
-
| size | `number` | `24` | Size in pixels. |
|
|
225
|
-
| color | `string` | - | Icon color (uses original colors if not set). |
|
|
226
|
-
| className | `string` | - | CSS class name. |
|
|
227
|
-
| style | `CSSProperties` | - | Inline styles. |
|
|
228
|
-
| data-testid | `string` | - | Test ID (web). |
|
|
229
|
-
| testID | `string` | - | Test ID (React Native). |
|
|
230
|
-
| aria-label | `string` | - | Accessible label. |
|
|
231
|
-
| aria-hidden | `boolean` | `true` if no aria-label | Hide from screen readers. |
|
|
232
|
-
|
|
233
|
-
## Available Icons
|
|
234
|
-
|
|
235
|
-
| Component | Product |
|
|
236
|
-
| :-------- | :------ |
|
|
237
|
-
| `Accelerator` | Xsolla Accelerator |
|
|
238
|
-
| `AntiFraud` | Anti-Fraud protection |
|
|
239
|
-
| `BuyButton` | Buy Button widget |
|
|
240
|
-
| `Documentation` | Documentation portal |
|
|
241
|
-
| `Funding` | Game funding |
|
|
242
|
-
| `Gip` | Game Inventory Platform |
|
|
243
|
-
| `InGameStore` | In-Game Store |
|
|
244
|
-
| `Launcher` | Game Launcher |
|
|
245
|
-
| `Login` | Login & authentication |
|
|
246
|
-
| `PartnerNetwork` | Partner Network |
|
|
247
|
-
| `PayStation` | Pay Station payments |
|
|
248
|
-
| `PlayerInventory` | Player Inventory |
|
|
249
|
-
| `Publisher` | Publisher Account |
|
|
250
|
-
| `SiteBuilder` | Site Builder |
|
|
251
|
-
| `Subscriptions` | Subscriptions |
|
|
252
|
-
|
|
253
|
-
## Tree Shaking
|
|
254
|
-
|
|
255
|
-
Import individual icons for optimal bundle size:
|
|
256
|
-
|
|
257
|
-
```tsx
|
|
258
|
-
// Good - only imports needed icons
|
|
259
|
-
import { PayStation, Login } from '@xsolla/xui-icons-product';
|
|
260
|
-
|
|
261
|
-
// Avoid - imports all icons
|
|
262
|
-
import * as ProductIcons from '@xsolla/xui-icons-product';
|
|
263
|
-
```
|
|
264
|
-
|
|
265
171
|
## Accessibility
|
|
266
172
|
|
|
267
|
-
- Icons are hidden from screen readers by default
|
|
268
|
-
-
|
|
269
|
-
-
|
|
270
|
-
- For decorative product badges, keep the default hidden behavior
|
|
173
|
+
- Icons are hidden from screen readers by default.
|
|
174
|
+
- When the icon stands alone, set `aria-label` to the product name.
|
|
175
|
+
- Within a labelled control, keep the icon `aria-hidden` and label the control.
|