@xsolla/xui-icons-base 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 +306 -34
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,50 +1,322 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Icons Base
|
|
3
|
+
subtitle: Functional UI icons with solid/line variants.
|
|
4
|
+
description: A collection of functional UI icons organized by category with both solid and line variants.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Icons Base
|
|
8
|
+
|
|
9
|
+
A comprehensive collection of functional UI icons organized by category. Each icon is available in both solid (filled) and line (outlined) variants for design flexibility.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-icons-base
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-icons-base
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Basic Usage
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { HomeSolid, HomeLine } from '@xsolla/xui-icons-base';
|
|
26
|
+
|
|
27
|
+
export default function BasicIconsBase() {
|
|
28
|
+
return (
|
|
29
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
30
|
+
<HomeSolid size={24} />
|
|
31
|
+
<HomeLine size={24} />
|
|
32
|
+
</div>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Icon Variants
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import * as React from 'react';
|
|
41
|
+
import {
|
|
42
|
+
StarSolid, StarLine,
|
|
43
|
+
HeartSolid, HeartLine,
|
|
44
|
+
BellSolid, BellLine,
|
|
45
|
+
} from '@xsolla/xui-icons-base';
|
|
46
|
+
|
|
47
|
+
export default function IconVariants() {
|
|
48
|
+
return (
|
|
49
|
+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, auto)', gap: 16 }}>
|
|
50
|
+
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
51
|
+
<StarSolid size={24} />
|
|
52
|
+
<span>Solid</span>
|
|
53
|
+
</div>
|
|
54
|
+
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
55
|
+
<StarLine size={24} />
|
|
56
|
+
<span>Line</span>
|
|
57
|
+
</div>
|
|
58
|
+
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
59
|
+
<HeartSolid size={24} color="#e74c3c" />
|
|
60
|
+
<span>Solid</span>
|
|
61
|
+
</div>
|
|
62
|
+
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
63
|
+
<HeartLine size={24} color="#e74c3c" />
|
|
64
|
+
<span>Line</span>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Custom Sizes
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import * as React from 'react';
|
|
75
|
+
import { CheckCircleSolid } from '@xsolla/xui-icons-base';
|
|
76
|
+
|
|
77
|
+
export default function IconSizes() {
|
|
78
|
+
return (
|
|
79
|
+
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
80
|
+
<CheckCircleSolid size={16} />
|
|
81
|
+
<CheckCircleSolid size={20} />
|
|
82
|
+
<CheckCircleSolid size={24} />
|
|
83
|
+
<CheckCircleSolid size={32} />
|
|
84
|
+
<CheckCircleSolid size={48} />
|
|
85
|
+
</div>
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Anatomy
|
|
91
|
+
|
|
92
|
+
Import icons directly by name with their variant suffix:
|
|
93
|
+
|
|
94
|
+
```jsx
|
|
95
|
+
import { IconNameSolid, IconNameLine } from '@xsolla/xui-icons-base';
|
|
96
|
+
|
|
97
|
+
// Solid variant (filled)
|
|
98
|
+
<IconNameSolid size={24} color="#color" />
|
|
99
|
+
|
|
100
|
+
// Line variant (outlined)
|
|
101
|
+
<IconNameLine size={24} color="#color" />
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Icon Categories
|
|
105
|
+
|
|
106
|
+
### User Interface
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
import {
|
|
110
|
+
// Navigation
|
|
111
|
+
HomeSolid, HomeLine,
|
|
112
|
+
SearchSolid, SearchLine,
|
|
113
|
+
MenuSolid, MenuLine,
|
|
114
|
+
SettingsSolid, SettingsLine,
|
|
115
|
+
|
|
116
|
+
// Actions
|
|
117
|
+
PlusSolid, PlusLine,
|
|
118
|
+
EditSolid, EditLine,
|
|
119
|
+
TrashSolid, TrashLine,
|
|
120
|
+
CopySolid, CopyLine,
|
|
121
|
+
} from '@xsolla/xui-icons-base';
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Communication
|
|
125
|
+
|
|
126
|
+
```tsx
|
|
127
|
+
import {
|
|
128
|
+
MailSolid, MailLine,
|
|
129
|
+
MessageSolid, MessageLine,
|
|
130
|
+
NotificationSolid, NotificationLine,
|
|
131
|
+
BellSolid, BellLine,
|
|
132
|
+
} from '@xsolla/xui-icons-base';
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Media
|
|
136
|
+
|
|
137
|
+
```tsx
|
|
138
|
+
import {
|
|
139
|
+
ImageSolid, ImageLine,
|
|
140
|
+
CameraSolid, CameraLine,
|
|
141
|
+
VideoSolid, VideoLine,
|
|
142
|
+
PlaySolid, PlayLine,
|
|
143
|
+
PauseSolid, PauseLine,
|
|
144
|
+
} from '@xsolla/xui-icons-base';
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### Files & Folders
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
import {
|
|
151
|
+
FileSolid, FileLine,
|
|
152
|
+
FolderSolid, FolderLine,
|
|
153
|
+
DocumentSolid, DocumentLine,
|
|
154
|
+
DownloadSolid, DownloadLine,
|
|
155
|
+
UploadSolid, UploadLine,
|
|
156
|
+
} from '@xsolla/xui-icons-base';
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### Status & Feedback
|
|
160
|
+
|
|
161
|
+
```tsx
|
|
162
|
+
import {
|
|
163
|
+
CheckCircleSolid, CheckCircleLine,
|
|
164
|
+
WarningCircleSolid, WarningCircleLine,
|
|
165
|
+
ErrorCircleSolid, ErrorCircleLine,
|
|
166
|
+
InfoCircleSolid, InfoCircleLine,
|
|
167
|
+
HelpCircleSolid, HelpCircleLine,
|
|
168
|
+
} from '@xsolla/xui-icons-base';
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
### Shopping & E-commerce
|
|
172
|
+
|
|
173
|
+
```tsx
|
|
174
|
+
import {
|
|
175
|
+
CartSolid, CartLine,
|
|
176
|
+
BagSolid, BagLine,
|
|
177
|
+
CreditCardSolid, CreditCardLine,
|
|
178
|
+
TagSolid, TagLine,
|
|
179
|
+
GiftSolid, GiftLine,
|
|
180
|
+
} from '@xsolla/xui-icons-base';
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
## Examples
|
|
184
|
+
|
|
185
|
+
### Icon Grid Display
|
|
186
|
+
|
|
187
|
+
```tsx
|
|
188
|
+
import * as React from 'react';
|
|
189
|
+
import * as Icons from '@xsolla/xui-icons-base';
|
|
190
|
+
|
|
191
|
+
export default function IconGrid() {
|
|
192
|
+
const solidIcons = [
|
|
193
|
+
'HomeSolid', 'SearchSolid', 'UserSolid', 'SettingsSolid',
|
|
194
|
+
'BellSolid', 'HeartSolid', 'StarSolid', 'BookmarkSolid'
|
|
195
|
+
];
|
|
196
|
+
|
|
197
|
+
return (
|
|
198
|
+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
|
|
199
|
+
{solidIcons.map(name => {
|
|
200
|
+
const IconComponent = Icons[name];
|
|
201
|
+
return (
|
|
202
|
+
<div key={name} style={{ textAlign: 'center' }}>
|
|
203
|
+
<IconComponent size={24} />
|
|
204
|
+
<div style={{ fontSize: 10, marginTop: 4 }}>
|
|
205
|
+
{name.replace('Solid', '')}
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
);
|
|
209
|
+
})}
|
|
210
|
+
</div>
|
|
211
|
+
);
|
|
212
|
+
}
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
### Toggle Between Variants
|
|
216
|
+
|
|
217
|
+
```tsx
|
|
218
|
+
import * as React from 'react';
|
|
219
|
+
import { HeartSolid, HeartLine } from '@xsolla/xui-icons-base';
|
|
220
|
+
|
|
221
|
+
export default function ToggleIcon() {
|
|
222
|
+
const [liked, setLiked] = React.useState(false);
|
|
223
|
+
|
|
224
|
+
return (
|
|
225
|
+
<button
|
|
226
|
+
onClick={() => setLiked(!liked)}
|
|
227
|
+
style={{ background: 'none', border: 'none', cursor: 'pointer' }}
|
|
228
|
+
>
|
|
229
|
+
{liked ? (
|
|
230
|
+
<HeartSolid size={24} color="#e74c3c" />
|
|
231
|
+
) : (
|
|
232
|
+
<HeartLine size={24} />
|
|
233
|
+
)}
|
|
234
|
+
</button>
|
|
235
|
+
);
|
|
236
|
+
}
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
### Status Indicators
|
|
12
240
|
|
|
13
241
|
```tsx
|
|
14
|
-
import
|
|
242
|
+
import * as React from 'react';
|
|
243
|
+
import {
|
|
244
|
+
CheckCircleSolid,
|
|
245
|
+
WarningCircleSolid,
|
|
246
|
+
ErrorCircleSolid,
|
|
247
|
+
InfoCircleSolid,
|
|
248
|
+
} from '@xsolla/xui-icons-base';
|
|
15
249
|
|
|
16
|
-
function
|
|
250
|
+
export default function StatusIndicators() {
|
|
17
251
|
return (
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
252
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
|
253
|
+
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
254
|
+
<CheckCircleSolid size={20} color="#2ecc71" />
|
|
255
|
+
<span>Success message</span>
|
|
256
|
+
</div>
|
|
257
|
+
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
258
|
+
<WarningCircleSolid size={20} color="#f39c12" />
|
|
259
|
+
<span>Warning message</span>
|
|
260
|
+
</div>
|
|
261
|
+
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
262
|
+
<ErrorCircleSolid size={20} color="#e74c3c" />
|
|
263
|
+
<span>Error message</span>
|
|
264
|
+
</div>
|
|
265
|
+
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
266
|
+
<InfoCircleSolid size={20} color="#3498db" />
|
|
267
|
+
<span>Info message</span>
|
|
268
|
+
</div>
|
|
269
|
+
</div>
|
|
23
270
|
);
|
|
24
271
|
}
|
|
25
272
|
```
|
|
26
273
|
|
|
27
|
-
##
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
-
|
|
49
|
-
|
|
50
|
-
|
|
274
|
+
## API Reference
|
|
275
|
+
|
|
276
|
+
### Icon Components
|
|
277
|
+
|
|
278
|
+
All icons share the same props interface.
|
|
279
|
+
|
|
280
|
+
**Icon Props:**
|
|
281
|
+
|
|
282
|
+
| Prop | Type | Default | Description |
|
|
283
|
+
| :--- | :--- | :------ | :---------- |
|
|
284
|
+
| size | `number` | `24` | Icon size in pixels. |
|
|
285
|
+
| color | `string` | `currentColor` | Icon color. |
|
|
286
|
+
|
|
287
|
+
### Naming Convention
|
|
288
|
+
|
|
289
|
+
Icons follow a consistent naming pattern:
|
|
290
|
+
|
|
291
|
+
```
|
|
292
|
+
{IconName}{Variant}
|
|
293
|
+
|
|
294
|
+
Where:
|
|
295
|
+
- IconName: PascalCase name (e.g., Home, CheckCircle, ShoppingCart)
|
|
296
|
+
- Variant: Either "Solid" or "Line"
|
|
297
|
+
|
|
298
|
+
Examples:
|
|
299
|
+
- HomeSolid, HomeLine
|
|
300
|
+
- CheckCircleSolid, CheckCircleLine
|
|
301
|
+
- ShoppingCartSolid, ShoppingCartLine
|
|
302
|
+
```
|
|
303
|
+
|
|
304
|
+
## Theming
|
|
305
|
+
|
|
306
|
+
Icons use `currentColor` by default, inheriting color from parent elements:
|
|
307
|
+
|
|
308
|
+
```tsx
|
|
309
|
+
// Icon inherits text color from parent
|
|
310
|
+
<div style={{ color: '#3498db' }}>
|
|
311
|
+
<HomeSolid /> {/* Will be #3498db */}
|
|
312
|
+
</div>
|
|
313
|
+
|
|
314
|
+
// Or set color directly
|
|
315
|
+
<HomeSolid color="#e74c3c" />
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
## Accessibility
|
|
319
|
+
|
|
320
|
+
- Icons are decorative by default (`aria-hidden="true"`)
|
|
321
|
+
- When using icons to convey meaning, add appropriate `aria-label` to the container
|
|
322
|
+
- For icon-only buttons, always provide accessible labels
|