@xsolla/xui-icons-currency 0.150.0 → 0.152.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 +74 -190
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,253 +1,137 @@
|
|
|
1
|
-
#
|
|
1
|
+
# IconsCurrency
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Xsolla virtual-currency icons (`PlayTime`, `XsollaGold`, `XsollaPoint`, `XsollaTicket`) with `colored` and `mono` variants.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-icons-currency
|
|
9
|
-
# or
|
|
10
|
-
yarn add @xsolla/xui-icons-currency
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
##
|
|
14
|
-
|
|
15
|
-
### All Currency Icons
|
|
11
|
+
## Imports
|
|
16
12
|
|
|
17
13
|
```tsx
|
|
18
|
-
import
|
|
19
|
-
import { PlayTime, XsollaGold, XsollaPoint, XsollaTicket } from '@xsolla/xui-icons-currency';
|
|
20
|
-
|
|
21
|
-
export default function AllCurrencies() {
|
|
22
|
-
return (
|
|
23
|
-
<div style={{ display: 'flex', gap: 16 }}>
|
|
24
|
-
<PlayTime size={32} />
|
|
25
|
-
<XsollaGold size={32} />
|
|
26
|
-
<XsollaPoint size={32} />
|
|
27
|
-
<XsollaTicket size={32} />
|
|
28
|
-
</div>
|
|
29
|
-
);
|
|
30
|
-
}
|
|
14
|
+
import { PlayTime, XsollaGold, XsollaPoint, XsollaTicket, BaseIcon, type CurrencyIconProps, type IconVariant } from '@xsolla/xui-icons-currency';
|
|
31
15
|
```
|
|
32
16
|
|
|
33
|
-
|
|
17
|
+
## Quick start
|
|
34
18
|
|
|
35
19
|
```tsx
|
|
36
20
|
import * as React from 'react';
|
|
37
21
|
import { XsollaGold } from '@xsolla/xui-icons-currency';
|
|
38
22
|
|
|
39
|
-
export default function
|
|
40
|
-
return
|
|
41
|
-
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
42
|
-
<div>
|
|
43
|
-
<p>Colored:</p>
|
|
44
|
-
<XsollaGold size={32} variant="colored" />
|
|
45
|
-
</div>
|
|
46
|
-
<div>
|
|
47
|
-
<p>Mono:</p>
|
|
48
|
-
<XsollaGold size={32} variant="mono" />
|
|
49
|
-
</div>
|
|
50
|
-
<div>
|
|
51
|
-
<p>Custom color:</p>
|
|
52
|
-
<XsollaGold size={32} variant="mono" color="#FFD700" />
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
);
|
|
23
|
+
export default function QuickStart() {
|
|
24
|
+
return <XsollaGold size={24} aria-label="Xsolla Gold" />;
|
|
56
25
|
}
|
|
57
26
|
```
|
|
58
27
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
```tsx
|
|
62
|
-
import * as React from 'react';
|
|
63
|
-
import { XsollaPoint } from '@xsolla/xui-icons-currency';
|
|
28
|
+
## API Reference
|
|
64
29
|
|
|
65
|
-
|
|
66
|
-
return (
|
|
67
|
-
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
|
68
|
-
<XsollaPoint size={16} />
|
|
69
|
-
<XsollaPoint size={24} />
|
|
70
|
-
<XsollaPoint size={32} />
|
|
71
|
-
<XsollaPoint size={48} />
|
|
72
|
-
</div>
|
|
73
|
-
);
|
|
74
|
-
}
|
|
75
|
-
```
|
|
30
|
+
### Currency icon components (`<XsollaGold>`, `<PlayTime>`, ...)
|
|
76
31
|
|
|
77
|
-
|
|
32
|
+
All currency icons accept the same props (`CurrencyIconProps`).
|
|
78
33
|
|
|
79
|
-
|
|
80
|
-
|
|
34
|
+
| Prop | Type | Default | Description |
|
|
35
|
+
| --- | --- | --- | --- |
|
|
36
|
+
| `variant` | `"colored" \| "mono"` | `"colored"` | Renders the colour or monochrome glyph. |
|
|
37
|
+
| `size` | `number` | `24` | Pixel size (square). |
|
|
38
|
+
| `color` | `string` | `"currentColor"` | Icon colour. Applies only to the `mono` variant. |
|
|
39
|
+
| `className` | `string` | — | CSS class on the wrapper. |
|
|
40
|
+
| `style` | `CSSProperties` | — | Inline styles. |
|
|
41
|
+
| `data-testid` | `string` | — | Test ID (web). |
|
|
42
|
+
| `testID` | `string` | — | Test ID (React Native). |
|
|
43
|
+
| `aria-label` | `string` | — | Accessible label. When set, the icon is exposed as `role="img"`. |
|
|
44
|
+
| `aria-hidden` | `boolean` | `true` if no `aria-label` | Hide from assistive tech. |
|
|
81
45
|
|
|
82
|
-
|
|
83
|
-
size={24} // Size in pixels
|
|
84
|
-
variant="colored" // colored or mono
|
|
85
|
-
color="currentColor" // Color (mono variant only)
|
|
86
|
-
className="currency-icon" // CSS class
|
|
87
|
-
style={{ margin: 4 }} // Inline styles
|
|
88
|
-
aria-label="Gold" // Accessible label
|
|
89
|
-
/>
|
|
90
|
-
```
|
|
46
|
+
This package does not consume `ThemeOverrideProps`.
|
|
91
47
|
|
|
92
|
-
|
|
48
|
+
### `<BaseIcon>`
|
|
93
49
|
|
|
94
|
-
|
|
50
|
+
Internal wrapper exported for advanced use cases (custom currency icons built from raw SVG strings). Most consumers should use the named icon components.
|
|
95
51
|
|
|
96
|
-
|
|
97
|
-
import * as React from 'react';
|
|
98
|
-
import { XsollaGold, XsollaPoint, XsollaTicket } from '@xsolla/xui-icons-currency';
|
|
52
|
+
## Available icons
|
|
99
53
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
54
|
+
| Component | Description |
|
|
55
|
+
| --- | --- |
|
|
56
|
+
| `PlayTime` | Play-time game currency. |
|
|
57
|
+
| `XsollaGold` | Gold-coin currency. |
|
|
58
|
+
| `XsollaPoint` | Points/credits currency. |
|
|
59
|
+
| `XsollaTicket` | Ticket/voucher currency. |
|
|
106
60
|
|
|
107
|
-
|
|
108
|
-
<div style={{ display: 'flex', gap: 24 }}>
|
|
109
|
-
{balances.map(({ icon: Icon, amount, label }) => (
|
|
110
|
-
<div key={label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
111
|
-
<Icon size={24} aria-hidden />
|
|
112
|
-
<span>{amount.toLocaleString()}</span>
|
|
113
|
-
</div>
|
|
114
|
-
))}
|
|
115
|
-
</div>
|
|
116
|
-
);
|
|
117
|
-
}
|
|
118
|
-
```
|
|
61
|
+
## Examples
|
|
119
62
|
|
|
120
|
-
###
|
|
63
|
+
### Variants
|
|
121
64
|
|
|
122
65
|
```tsx
|
|
123
66
|
import * as React from 'react';
|
|
124
67
|
import { XsollaGold } from '@xsolla/xui-icons-currency';
|
|
125
68
|
|
|
126
|
-
export default function
|
|
69
|
+
export default function Variants() {
|
|
127
70
|
return (
|
|
128
|
-
<div style={{
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
padding: '4px 12px',
|
|
133
|
-
background: '#FFF8E1',
|
|
134
|
-
borderRadius: 16,
|
|
135
|
-
}}>
|
|
136
|
-
<XsollaGold size={20} />
|
|
137
|
-
<span style={{ fontWeight: 600 }}>500</span>
|
|
71
|
+
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
72
|
+
<XsollaGold size={32} aria-label="Gold, colour" />
|
|
73
|
+
<XsollaGold size={32} variant="mono" aria-label="Gold, monochrome" />
|
|
74
|
+
<XsollaGold size={32} variant="mono" color="#FFD700" aria-label="Gold, custom colour" />
|
|
138
75
|
</div>
|
|
139
76
|
);
|
|
140
77
|
}
|
|
141
78
|
```
|
|
142
79
|
|
|
143
|
-
###
|
|
80
|
+
### Balance display
|
|
144
81
|
|
|
145
82
|
```tsx
|
|
146
83
|
import * as React from 'react';
|
|
147
|
-
import { XsollaGold } from '@xsolla/xui-icons-currency';
|
|
148
|
-
import { Button } from '@xsolla/xui-button';
|
|
84
|
+
import { XsollaGold, XsollaPoint, XsollaTicket } from '@xsolla/xui-icons-currency';
|
|
149
85
|
|
|
150
|
-
export default function
|
|
86
|
+
export default function BalanceDisplay() {
|
|
87
|
+
const balances = [
|
|
88
|
+
{ Icon: XsollaGold, amount: 1250, label: 'Gold' },
|
|
89
|
+
{ Icon: XsollaPoint, amount: 500, label: 'Points' },
|
|
90
|
+
{ Icon: XsollaTicket, amount: 3, label: 'Tickets' },
|
|
91
|
+
];
|
|
151
92
|
return (
|
|
152
|
-
<div style={{
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
/>
|
|
163
|
-
<h3 style={{ margin: '12px 0 8px' }}>Sword of Fire</h3>
|
|
164
|
-
<div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 12 }}>
|
|
165
|
-
<XsollaGold size={20} />
|
|
166
|
-
<span style={{ fontWeight: 600 }}>1,500</span>
|
|
167
|
-
</div>
|
|
168
|
-
<Button size="sm" fullWidth>Buy Now</Button>
|
|
93
|
+
<div style={{ display: 'flex', gap: 24 }}>
|
|
94
|
+
{balances.map(({ Icon, amount, label }) => (
|
|
95
|
+
<div key={label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
96
|
+
<Icon size={24} aria-hidden />
|
|
97
|
+
<span>
|
|
98
|
+
<span style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clipPath: 'inset(50%)', whiteSpace: 'nowrap' }}>{label}: </span>
|
|
99
|
+
{amount.toLocaleString()}
|
|
100
|
+
</span>
|
|
101
|
+
</div>
|
|
102
|
+
))}
|
|
169
103
|
</div>
|
|
170
104
|
);
|
|
171
105
|
}
|
|
172
106
|
```
|
|
173
107
|
|
|
174
|
-
###
|
|
108
|
+
### Price tag
|
|
175
109
|
|
|
176
110
|
```tsx
|
|
177
111
|
import * as React from 'react';
|
|
178
|
-
import { XsollaGold
|
|
112
|
+
import { XsollaGold } from '@xsolla/xui-icons-currency';
|
|
179
113
|
|
|
180
|
-
export default function
|
|
114
|
+
export default function PriceTag() {
|
|
181
115
|
return (
|
|
182
|
-
<div
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
<
|
|
193
|
-
|
|
194
|
-
<XsollaGold size={24} />
|
|
195
|
-
<span>+100</span>
|
|
196
|
-
</div>
|
|
197
|
-
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
|
198
|
-
<XsollaTicket size={24} />
|
|
199
|
-
<span>+1</span>
|
|
200
|
-
</div>
|
|
201
|
-
</div>
|
|
116
|
+
<div
|
|
117
|
+
style={{
|
|
118
|
+
display: 'inline-flex',
|
|
119
|
+
alignItems: 'center',
|
|
120
|
+
gap: 4,
|
|
121
|
+
padding: '4px 12px',
|
|
122
|
+
background: '#FFF8E1',
|
|
123
|
+
borderRadius: 16,
|
|
124
|
+
}}
|
|
125
|
+
>
|
|
126
|
+
<XsollaGold size={20} aria-hidden />
|
|
127
|
+
<span style={{ fontWeight: 600 }}>500 Gold</span>
|
|
202
128
|
</div>
|
|
203
129
|
);
|
|
204
130
|
}
|
|
205
131
|
```
|
|
206
132
|
|
|
207
|
-
## API Reference
|
|
208
|
-
|
|
209
|
-
### Currency Icon Components
|
|
210
|
-
|
|
211
|
-
Each currency icon component accepts the same props:
|
|
212
|
-
|
|
213
|
-
**CurrencyIconProps:**
|
|
214
|
-
|
|
215
|
-
| Prop | Type | Default | Description |
|
|
216
|
-
| :--- | :--- | :------ | :---------- |
|
|
217
|
-
| size | `number` | `24` | Size in pixels. |
|
|
218
|
-
| variant | `"colored" \| "mono"` | `"colored"` | Icon style variant. |
|
|
219
|
-
| color | `string` | `"currentColor"` | Icon color (mono variant only). |
|
|
220
|
-
| className | `string` | - | CSS class name. |
|
|
221
|
-
| style | `CSSProperties` | - | Inline styles. |
|
|
222
|
-
| data-testid | `string` | - | Test ID (web). |
|
|
223
|
-
| testID | `string` | - | Test ID (React Native). |
|
|
224
|
-
| aria-label | `string` | - | Accessible label. |
|
|
225
|
-
| aria-hidden | `boolean` | `true` if no aria-label | Hide from screen readers. |
|
|
226
|
-
|
|
227
|
-
## Available Icons
|
|
228
|
-
|
|
229
|
-
| Component | Description |
|
|
230
|
-
| :-------- | :---------- |
|
|
231
|
-
| `PlayTime` | Time-based game currency |
|
|
232
|
-
| `XsollaGold` | Gold coin currency |
|
|
233
|
-
| `XsollaPoint` | Points/credits currency |
|
|
234
|
-
| `XsollaTicket` | Ticket/voucher currency |
|
|
235
|
-
|
|
236
|
-
## Tree Shaking
|
|
237
|
-
|
|
238
|
-
Import individual icons for optimal bundle size:
|
|
239
|
-
|
|
240
|
-
```tsx
|
|
241
|
-
// Good - only imports needed icons
|
|
242
|
-
import { XsollaGold, XsollaPoint } from '@xsolla/xui-icons-currency';
|
|
243
|
-
|
|
244
|
-
// Avoid - imports all icons
|
|
245
|
-
import * as CurrencyIcons from '@xsolla/xui-icons-currency';
|
|
246
|
-
```
|
|
247
|
-
|
|
248
133
|
## Accessibility
|
|
249
134
|
|
|
250
|
-
- Icons are hidden from screen readers by default
|
|
251
|
-
-
|
|
252
|
-
- When
|
|
253
|
-
- Consider adding visually hidden text for accessibility: "1,500 Gold coins"
|
|
135
|
+
- Icons are hidden from screen readers by default.
|
|
136
|
+
- When standing alone, set `aria-label` on the icon.
|
|
137
|
+
- When paired with a number (e.g. price), make sure the currency name is conveyed in surrounding text or a visually hidden label.
|