@xsolla/xui-icon-wrapper 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 +232 -11
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,26 +1,247 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Icon Wrapper
|
|
3
|
+
subtitle: Container for icons and visual elements.
|
|
4
|
+
description: A cross-platform React container component for displaying icons, labels, images, and avatars with consistent sizing and shapes.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Icon Wrapper
|
|
8
|
+
|
|
9
|
+
A cross-platform React container component that provides consistent sizing, alignment, and shapes for small visual elements like icons, labels, images, and avatars.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-icon-wrapper
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-icon-wrapper
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Basic Icon Wrapper
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
26
|
+
import { Star } from '@xsolla/xui-icons-base';
|
|
27
|
+
|
|
28
|
+
export default function BasicWrapper() {
|
|
29
|
+
return (
|
|
30
|
+
<IconWrapper>
|
|
31
|
+
<Star size={16} />
|
|
32
|
+
</IconWrapper>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Different Sizes
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import * as React from 'react';
|
|
41
|
+
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
42
|
+
import { Heart } from '@xsolla/xui-icons-base';
|
|
43
|
+
|
|
44
|
+
export default function Sizes() {
|
|
45
|
+
return (
|
|
46
|
+
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
47
|
+
<IconWrapper size="xxs"><Heart size={12} /></IconWrapper>
|
|
48
|
+
<IconWrapper size="xs"><Heart size={14} /></IconWrapper>
|
|
49
|
+
<IconWrapper size="sm"><Heart size={16} /></IconWrapper>
|
|
50
|
+
<IconWrapper size="md"><Heart size={20} /></IconWrapper>
|
|
51
|
+
<IconWrapper size="lg"><Heart size={24} /></IconWrapper>
|
|
52
|
+
<IconWrapper size="xl"><Heart size={32} /></IconWrapper>
|
|
53
|
+
</div>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Different Shapes
|
|
12
59
|
|
|
13
60
|
```tsx
|
|
61
|
+
import * as React from 'react';
|
|
14
62
|
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
63
|
+
import { User } from '@xsolla/xui-icons-base';
|
|
15
64
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
65
|
+
export default function Shapes() {
|
|
66
|
+
return (
|
|
67
|
+
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
68
|
+
<IconWrapper shape="none" size="lg">
|
|
69
|
+
<User size={24} />
|
|
70
|
+
</IconWrapper>
|
|
71
|
+
<IconWrapper shape="smooth" size="lg">
|
|
72
|
+
<User size={24} />
|
|
73
|
+
</IconWrapper>
|
|
74
|
+
<IconWrapper shape="full" size="lg">
|
|
75
|
+
<User size={24} />
|
|
76
|
+
</IconWrapper>
|
|
77
|
+
</div>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
21
80
|
```
|
|
22
81
|
|
|
23
|
-
##
|
|
82
|
+
## Anatomy
|
|
83
|
+
|
|
84
|
+
```jsx
|
|
85
|
+
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
86
|
+
|
|
87
|
+
<IconWrapper
|
|
88
|
+
size="md" // Wrapper size
|
|
89
|
+
shape="none" // Border radius shape
|
|
90
|
+
type="icon" // Content type hint
|
|
91
|
+
backgroundColor={color} // Custom background
|
|
92
|
+
borderColor={color} // Custom border
|
|
93
|
+
>
|
|
94
|
+
<Icon />
|
|
95
|
+
</IconWrapper>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Examples
|
|
99
|
+
|
|
100
|
+
### With Avatar
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
import * as React from 'react';
|
|
104
|
+
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
105
|
+
import { Avatar } from '@xsolla/xui-avatar';
|
|
106
|
+
|
|
107
|
+
export default function AvatarWrapper() {
|
|
108
|
+
return (
|
|
109
|
+
<IconWrapper size="lg" shape="full" type="avatar">
|
|
110
|
+
<Avatar src="https://example.com/avatar.jpg" size="md" />
|
|
111
|
+
</IconWrapper>
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### With Custom Colors
|
|
117
|
+
|
|
118
|
+
```tsx
|
|
119
|
+
import * as React from 'react';
|
|
120
|
+
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
121
|
+
import { Check } from '@xsolla/xui-icons-base';
|
|
122
|
+
|
|
123
|
+
export default function CustomColors() {
|
|
124
|
+
return (
|
|
125
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
126
|
+
<IconWrapper
|
|
127
|
+
shape="full"
|
|
128
|
+
size="lg"
|
|
129
|
+
backgroundColor="#E8F5E9"
|
|
130
|
+
borderColor="#4CAF50"
|
|
131
|
+
>
|
|
132
|
+
<Check size={20} color="#4CAF50" />
|
|
133
|
+
</IconWrapper>
|
|
134
|
+
<IconWrapper
|
|
135
|
+
shape="smooth"
|
|
136
|
+
size="lg"
|
|
137
|
+
backgroundColor="#FFF3E0"
|
|
138
|
+
>
|
|
139
|
+
<Star size={20} color="#FF9800" />
|
|
140
|
+
</IconWrapper>
|
|
141
|
+
</div>
|
|
142
|
+
);
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### Icon Status Indicators
|
|
147
|
+
|
|
148
|
+
```tsx
|
|
149
|
+
import * as React from 'react';
|
|
150
|
+
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
151
|
+
import { Check, Close, AlertTriangle } from '@xsolla/xui-icons-base';
|
|
152
|
+
|
|
153
|
+
export default function StatusIndicators() {
|
|
154
|
+
const statuses = [
|
|
155
|
+
{ icon: <Check size={16} color="#fff" />, bg: '#4CAF50', label: 'Success' },
|
|
156
|
+
{ icon: <Close size={16} color="#fff" />, bg: '#F44336', label: 'Error' },
|
|
157
|
+
{ icon: <AlertTriangle size={16} color="#fff" />, bg: '#FF9800', label: 'Warning' },
|
|
158
|
+
];
|
|
159
|
+
|
|
160
|
+
return (
|
|
161
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
162
|
+
{statuses.map(({ icon, bg, label }) => (
|
|
163
|
+
<IconWrapper
|
|
164
|
+
key={label}
|
|
165
|
+
shape="full"
|
|
166
|
+
size="md"
|
|
167
|
+
backgroundColor={bg}
|
|
168
|
+
>
|
|
169
|
+
{icon}
|
|
170
|
+
</IconWrapper>
|
|
171
|
+
))}
|
|
172
|
+
</div>
|
|
173
|
+
);
|
|
174
|
+
}
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### With Brand Icons
|
|
178
|
+
|
|
179
|
+
```tsx
|
|
180
|
+
import * as React from 'react';
|
|
181
|
+
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
|
|
182
|
+
import { Github, Discord, Twitch } from '@xsolla/xui-icons-brand';
|
|
183
|
+
|
|
184
|
+
export default function BrandIcons() {
|
|
185
|
+
return (
|
|
186
|
+
<div style={{ display: 'flex', gap: 12 }}>
|
|
187
|
+
<IconWrapper size="lg" shape="smooth" type="brand">
|
|
188
|
+
<Github size={24} />
|
|
189
|
+
</IconWrapper>
|
|
190
|
+
<IconWrapper size="lg" shape="smooth" type="brand">
|
|
191
|
+
<Discord size={24} />
|
|
192
|
+
</IconWrapper>
|
|
193
|
+
<IconWrapper size="lg" shape="smooth" type="brand">
|
|
194
|
+
<Twitch size={24} />
|
|
195
|
+
</IconWrapper>
|
|
196
|
+
</div>
|
|
197
|
+
);
|
|
198
|
+
}
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## API Reference
|
|
202
|
+
|
|
203
|
+
### IconWrapper
|
|
204
|
+
|
|
205
|
+
**IconWrapperProps:**
|
|
206
|
+
|
|
207
|
+
| Prop | Type | Default | Description |
|
|
208
|
+
| :--- | :--- | :------ | :---------- |
|
|
209
|
+
| children | `ReactNode` | - | Content to display inside wrapper. |
|
|
210
|
+
| size | `"xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Wrapper size. |
|
|
211
|
+
| shape | `"none" \| "smooth" \| "full"` | `"none"` | Border radius style. |
|
|
212
|
+
| type | `"icon" \| "label" \| "image" \| "avatar" \| "brand" \| "custom"` | `"icon"` | Content type hint for styling. |
|
|
213
|
+
| backgroundColor | `string` | - | Custom background color. |
|
|
214
|
+
| borderColor | `string` | - | Custom border color. |
|
|
215
|
+
|
|
216
|
+
## Size Specifications
|
|
217
|
+
|
|
218
|
+
| Size | Dimensions |
|
|
219
|
+
| :--- | :--------- |
|
|
220
|
+
| xxs | 16x16 |
|
|
221
|
+
| xs | 20x20 |
|
|
222
|
+
| sm | 24x24 |
|
|
223
|
+
| md | 32x32 |
|
|
224
|
+
| lg | 40x40 |
|
|
225
|
+
| xl | 56x56 |
|
|
226
|
+
|
|
227
|
+
## Shape Behavior
|
|
228
|
+
|
|
229
|
+
| Shape | Description |
|
|
230
|
+
| :---- | :---------- |
|
|
231
|
+
| `none` | No border radius, transparent background |
|
|
232
|
+
| `smooth` | Slightly rounded corners (proportional to size) |
|
|
233
|
+
| `full` | Fully circular (border-radius: 999px) |
|
|
234
|
+
|
|
235
|
+
## Use Cases
|
|
236
|
+
|
|
237
|
+
- **Icon containers**: Wrap icons with consistent sizing and backgrounds
|
|
238
|
+
- **Avatar frames**: Provide circular or rounded frames for avatars
|
|
239
|
+
- **Status indicators**: Create colored badge-like indicators
|
|
240
|
+
- **Brand icon containers**: Display brand logos with consistent sizing
|
|
241
|
+
- **Feature icons**: Highlight feature icons with backgrounds
|
|
242
|
+
|
|
243
|
+
## Accessibility
|
|
24
244
|
|
|
25
|
-
-
|
|
26
|
-
- `
|
|
245
|
+
- Content inside the wrapper maintains its own accessibility attributes
|
|
246
|
+
- Use `aria-label` on the child element when the icon conveys meaning
|
|
247
|
+
- Decorative icons should have `aria-hidden="true"`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-icon-wrapper",
|
|
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,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.100.0",
|
|
14
|
+
"@xsolla/xui-icons": "0.100.0",
|
|
15
|
+
"@xsolla/xui-primitives-core": "0.100.0"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8.0",
|