@xsolla/xui-icon-wrapper 0.150.0 → 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 +57 -163
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,34 +1,53 @@
|
|
|
1
|
-
#
|
|
1
|
+
# IconWrapper
|
|
2
2
|
|
|
3
|
-
A cross-platform
|
|
3
|
+
A cross-platform container that gives icons, labels, images, and avatars a consistent box, alignment, and shape. It resolves its dimensions and default background from the active theme.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-icon-wrapper
|
|
9
|
-
# or
|
|
10
|
-
yarn add @xsolla/xui-icon-wrapper
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
##
|
|
11
|
+
## Imports
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
```tsx
|
|
14
|
+
import { IconWrapper, type IconWrapperProps } from '@xsolla/xui-icon-wrapper';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Quick start
|
|
16
18
|
|
|
17
19
|
```tsx
|
|
18
20
|
import * as React from 'react';
|
|
19
21
|
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
20
22
|
import { Star } from '@xsolla/xui-icons-base';
|
|
21
23
|
|
|
22
|
-
export default function
|
|
24
|
+
export default function QuickStart() {
|
|
23
25
|
return (
|
|
24
|
-
<IconWrapper>
|
|
25
|
-
<Star size=
|
|
26
|
+
<IconWrapper size="md" shape="smooth">
|
|
27
|
+
<Star size="100%" aria-hidden />
|
|
26
28
|
</IconWrapper>
|
|
27
29
|
);
|
|
28
30
|
}
|
|
29
31
|
```
|
|
30
32
|
|
|
31
|
-
|
|
33
|
+
## API Reference
|
|
34
|
+
|
|
35
|
+
### `<IconWrapper>`
|
|
36
|
+
|
|
37
|
+
| Prop | Type | Default | Description |
|
|
38
|
+
| --- | --- | --- | --- |
|
|
39
|
+
| `children` | `ReactNode` | — | Element rendered inside the wrapper. |
|
|
40
|
+
| `size` | `"xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Wrapper size. Resolved against `theme.sizing.iconWrapper`. |
|
|
41
|
+
| `shape` | `"none" \| "smooth" \| "full"` | `"none"` | Border-radius style. `"smooth"` rounds to ~size/6 (min 4px); `"full"` is fully circular. |
|
|
42
|
+
| `type` | `"icon" \| "label" \| "image" \| "avatar" \| "brand" \| "custom"` | — | Hint describing the wrapped content. Reserved for future styling rules; currently has no visual effect. |
|
|
43
|
+
| `backgroundColor` | `string` | theme default (transparent for `shape="none"`) | Background colour override. |
|
|
44
|
+
| `borderColor` | `string` | — | Border colour. When set, a 1px border is drawn. |
|
|
45
|
+
|
|
46
|
+
Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
|
|
47
|
+
|
|
48
|
+
## Examples
|
|
49
|
+
|
|
50
|
+
### Sizes
|
|
32
51
|
|
|
33
52
|
```tsx
|
|
34
53
|
import * as React from 'react';
|
|
@@ -38,18 +57,18 @@ import { Heart } from '@xsolla/xui-icons-base';
|
|
|
38
57
|
export default function Sizes() {
|
|
39
58
|
return (
|
|
40
59
|
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
41
|
-
<IconWrapper size="xxs"><Heart size=
|
|
42
|
-
<IconWrapper size="xs"><Heart size=
|
|
43
|
-
<IconWrapper size="sm"><Heart size=
|
|
44
|
-
<IconWrapper size="md"><Heart size=
|
|
45
|
-
<IconWrapper size="lg"><Heart size=
|
|
46
|
-
<IconWrapper size="xl"><Heart size=
|
|
60
|
+
<IconWrapper size="xxs"><Heart size="100%" aria-hidden /></IconWrapper>
|
|
61
|
+
<IconWrapper size="xs"><Heart size="100%" aria-hidden /></IconWrapper>
|
|
62
|
+
<IconWrapper size="sm"><Heart size="100%" aria-hidden /></IconWrapper>
|
|
63
|
+
<IconWrapper size="md"><Heart size="100%" aria-hidden /></IconWrapper>
|
|
64
|
+
<IconWrapper size="lg"><Heart size="100%" aria-hidden /></IconWrapper>
|
|
65
|
+
<IconWrapper size="xl"><Heart size="100%" aria-hidden /></IconWrapper>
|
|
47
66
|
</div>
|
|
48
67
|
);
|
|
49
68
|
}
|
|
50
69
|
```
|
|
51
70
|
|
|
52
|
-
###
|
|
71
|
+
### Shapes
|
|
53
72
|
|
|
54
73
|
```tsx
|
|
55
74
|
import * as React from 'react';
|
|
@@ -59,183 +78,58 @@ import { User } from '@xsolla/xui-icons-base';
|
|
|
59
78
|
export default function Shapes() {
|
|
60
79
|
return (
|
|
61
80
|
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
62
|
-
<IconWrapper shape="none" size="lg">
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<IconWrapper shape="smooth" size="lg">
|
|
66
|
-
<User size={24} />
|
|
67
|
-
</IconWrapper>
|
|
68
|
-
<IconWrapper shape="full" size="lg">
|
|
69
|
-
<User size={24} />
|
|
70
|
-
</IconWrapper>
|
|
81
|
+
<IconWrapper shape="none" size="lg"><User size="100%" aria-hidden /></IconWrapper>
|
|
82
|
+
<IconWrapper shape="smooth" size="lg"><User size="100%" aria-hidden /></IconWrapper>
|
|
83
|
+
<IconWrapper shape="full" size="lg"><User size="100%" aria-hidden /></IconWrapper>
|
|
71
84
|
</div>
|
|
72
85
|
);
|
|
73
86
|
}
|
|
74
87
|
```
|
|
75
88
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
```jsx
|
|
79
|
-
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
80
|
-
|
|
81
|
-
<IconWrapper
|
|
82
|
-
size="md" // Wrapper size
|
|
83
|
-
shape="none" // Border radius shape
|
|
84
|
-
type="icon" // Content type hint
|
|
85
|
-
backgroundColor={color} // Custom background
|
|
86
|
-
borderColor={color} // Custom border
|
|
87
|
-
>
|
|
88
|
-
<Icon />
|
|
89
|
-
</IconWrapper>
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
## Examples
|
|
93
|
-
|
|
94
|
-
### With Avatar
|
|
89
|
+
### Status badges
|
|
95
90
|
|
|
96
91
|
```tsx
|
|
97
92
|
import * as React from 'react';
|
|
98
93
|
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
99
|
-
import {
|
|
94
|
+
import { Check, Warning, RemoveCr } from '@xsolla/xui-icons-base';
|
|
100
95
|
|
|
101
|
-
export default function
|
|
102
|
-
return (
|
|
103
|
-
<IconWrapper size="lg" shape="full" type="avatar">
|
|
104
|
-
<Avatar src="https://example.com/avatar.jpg" size="md" />
|
|
105
|
-
</IconWrapper>
|
|
106
|
-
);
|
|
107
|
-
}
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
### With Custom Colors
|
|
111
|
-
|
|
112
|
-
```tsx
|
|
113
|
-
import * as React from 'react';
|
|
114
|
-
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
115
|
-
import { Check } from '@xsolla/xui-icons-base';
|
|
116
|
-
|
|
117
|
-
export default function CustomColors() {
|
|
96
|
+
export default function StatusBadges() {
|
|
118
97
|
return (
|
|
119
98
|
<div style={{ display: 'flex', gap: 16 }}>
|
|
120
|
-
<IconWrapper
|
|
121
|
-
|
|
122
|
-
size="lg"
|
|
123
|
-
backgroundColor="#E8F5E9"
|
|
124
|
-
borderColor="#4CAF50"
|
|
125
|
-
>
|
|
126
|
-
<Check size={20} color="#4CAF50" />
|
|
99
|
+
<IconWrapper shape="full" size="md" backgroundColor="#4CAF50">
|
|
100
|
+
<Check color="#fff" size="100%" aria-hidden />
|
|
127
101
|
</IconWrapper>
|
|
128
|
-
<IconWrapper
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
<Star size={20} color="#FF9800" />
|
|
102
|
+
<IconWrapper shape="full" size="md" backgroundColor="#FF9800">
|
|
103
|
+
<Warning color="#fff" size="100%" aria-hidden />
|
|
104
|
+
</IconWrapper>
|
|
105
|
+
<IconWrapper shape="full" size="md" backgroundColor="#F44336">
|
|
106
|
+
<RemoveCr color="#fff" size="100%" aria-hidden />
|
|
134
107
|
</IconWrapper>
|
|
135
108
|
</div>
|
|
136
109
|
);
|
|
137
110
|
}
|
|
138
111
|
```
|
|
139
112
|
|
|
140
|
-
###
|
|
141
|
-
|
|
142
|
-
```tsx
|
|
143
|
-
import * as React from 'react';
|
|
144
|
-
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
145
|
-
import { Check, Close, AlertTriangle } from '@xsolla/xui-icons-base';
|
|
146
|
-
|
|
147
|
-
export default function StatusIndicators() {
|
|
148
|
-
const statuses = [
|
|
149
|
-
{ icon: <Check size={16} color="#fff" />, bg: '#4CAF50', label: 'Success' },
|
|
150
|
-
{ icon: <Close size={16} color="#fff" />, bg: '#F44336', label: 'Error' },
|
|
151
|
-
{ icon: <AlertTriangle size={16} color="#fff" />, bg: '#FF9800', label: 'Warning' },
|
|
152
|
-
];
|
|
153
|
-
|
|
154
|
-
return (
|
|
155
|
-
<div style={{ display: 'flex', gap: 16 }}>
|
|
156
|
-
{statuses.map(({ icon, bg, label }) => (
|
|
157
|
-
<IconWrapper
|
|
158
|
-
key={label}
|
|
159
|
-
shape="full"
|
|
160
|
-
size="md"
|
|
161
|
-
backgroundColor={bg}
|
|
162
|
-
>
|
|
163
|
-
{icon}
|
|
164
|
-
</IconWrapper>
|
|
165
|
-
))}
|
|
166
|
-
</div>
|
|
167
|
-
);
|
|
168
|
-
}
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
### With Brand Icons
|
|
113
|
+
### Brand icon container
|
|
172
114
|
|
|
173
115
|
```tsx
|
|
174
116
|
import * as React from 'react';
|
|
175
117
|
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
176
118
|
import { Github, Discord, Twitch } from '@xsolla/xui-icons-brand';
|
|
177
119
|
|
|
178
|
-
export default function
|
|
120
|
+
export default function BrandTiles() {
|
|
179
121
|
return (
|
|
180
122
|
<div style={{ display: 'flex', gap: 12 }}>
|
|
181
|
-
<IconWrapper size="lg" shape="smooth"
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
<IconWrapper size="lg" shape="smooth" type="brand">
|
|
185
|
-
<Discord size={24} />
|
|
186
|
-
</IconWrapper>
|
|
187
|
-
<IconWrapper size="lg" shape="smooth" type="brand">
|
|
188
|
-
<Twitch size={24} />
|
|
189
|
-
</IconWrapper>
|
|
123
|
+
<IconWrapper size="lg" shape="smooth"><Github size={24} aria-hidden /></IconWrapper>
|
|
124
|
+
<IconWrapper size="lg" shape="smooth"><Discord size={24} aria-hidden /></IconWrapper>
|
|
125
|
+
<IconWrapper size="lg" shape="smooth"><Twitch size={24} aria-hidden /></IconWrapper>
|
|
190
126
|
</div>
|
|
191
127
|
);
|
|
192
128
|
}
|
|
193
129
|
```
|
|
194
130
|
|
|
195
|
-
## API Reference
|
|
196
|
-
|
|
197
|
-
### IconWrapper
|
|
198
|
-
|
|
199
|
-
**IconWrapperProps:**
|
|
200
|
-
|
|
201
|
-
| Prop | Type | Default | Description |
|
|
202
|
-
| :--- | :--- | :------ | :---------- |
|
|
203
|
-
| children | `ReactNode` | - | Content to display inside wrapper. |
|
|
204
|
-
| size | `"xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Wrapper size. |
|
|
205
|
-
| shape | `"none" \| "smooth" \| "full"` | `"none"` | Border radius style. |
|
|
206
|
-
| type | `"icon" \| "label" \| "image" \| "avatar" \| "brand" \| "custom"` | `"icon"` | Content type hint for styling. |
|
|
207
|
-
| backgroundColor | `string` | - | Custom background color. |
|
|
208
|
-
| borderColor | `string` | - | Custom border color. |
|
|
209
|
-
|
|
210
|
-
## Size Specifications
|
|
211
|
-
|
|
212
|
-
| Size | Dimensions |
|
|
213
|
-
| :--- | :--------- |
|
|
214
|
-
| xxs | 16x16 |
|
|
215
|
-
| xs | 20x20 |
|
|
216
|
-
| sm | 24x24 |
|
|
217
|
-
| md | 32x32 |
|
|
218
|
-
| lg | 40x40 |
|
|
219
|
-
| xl | 56x56 |
|
|
220
|
-
|
|
221
|
-
## Shape Behavior
|
|
222
|
-
|
|
223
|
-
| Shape | Description |
|
|
224
|
-
| :---- | :---------- |
|
|
225
|
-
| `none` | No border radius, transparent background |
|
|
226
|
-
| `smooth` | Slightly rounded corners (proportional to size) |
|
|
227
|
-
| `full` | Fully circular (border-radius: 999px) |
|
|
228
|
-
|
|
229
|
-
## Use Cases
|
|
230
|
-
|
|
231
|
-
- **Icon containers**: Wrap icons with consistent sizing and backgrounds
|
|
232
|
-
- **Avatar frames**: Provide circular or rounded frames for avatars
|
|
233
|
-
- **Status indicators**: Create colored badge-like indicators
|
|
234
|
-
- **Brand icon containers**: Display brand logos with consistent sizing
|
|
235
|
-
- **Feature icons**: Highlight feature icons with backgrounds
|
|
236
|
-
|
|
237
131
|
## Accessibility
|
|
238
132
|
|
|
239
|
-
-
|
|
240
|
-
-
|
|
241
|
-
-
|
|
133
|
+
- The wrapper is a presentational container — it does not add any ARIA attributes.
|
|
134
|
+
- Set `aria-label` on interactive children, or `aria-hidden` on decorative icons.
|
|
135
|
+
- For interactive icon-only controls, use `IconButton` from `@xsolla/xui-button` rather than wrapping a click handler around `IconWrapper`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-icon-wrapper",
|
|
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,9 +10,9 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-core": "0.
|
|
14
|
-
"@xsolla/xui-icons": "0.
|
|
15
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.151.0",
|
|
14
|
+
"@xsolla/xui-icons": "0.151.0",
|
|
15
|
+
"@xsolla/xui-primitives-core": "0.151.0"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8.0",
|