@xsolla/xui-icons-base 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 +88 -246
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,316 +1,158 @@
|
|
|
1
|
-
#
|
|
1
|
+
# IconsBase
|
|
2
2
|
|
|
3
|
-
A comprehensive collection of functional UI icons
|
|
3
|
+
A comprehensive collection of functional UI icons (500+) organised by category. Each icon renders through a shared `BaseIcon` wrapper and supports `solid` and `line` variants via the `variant` prop.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-icons-base
|
|
9
|
-
# or
|
|
10
|
-
yarn add @xsolla/xui-icons-base
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
##
|
|
14
|
-
|
|
15
|
-
### Basic Usage
|
|
11
|
+
## Imports
|
|
16
12
|
|
|
17
13
|
```tsx
|
|
18
|
-
import
|
|
19
|
-
import { HomeSolid, HomeLine } from '@xsolla/xui-icons-base';
|
|
20
|
-
|
|
21
|
-
export default function BasicIconsBase() {
|
|
22
|
-
return (
|
|
23
|
-
<div style={{ display: 'flex', gap: 16 }}>
|
|
24
|
-
<HomeSolid size={24} />
|
|
25
|
-
<HomeLine size={24} />
|
|
26
|
-
</div>
|
|
27
|
-
);
|
|
28
|
-
}
|
|
14
|
+
import { Home, Star, Heart, Bell, Search, BaseIcon, type BaseIconProps, type IconVariant } from '@xsolla/xui-icons-base';
|
|
29
15
|
```
|
|
30
16
|
|
|
31
|
-
|
|
17
|
+
## Quick start
|
|
32
18
|
|
|
33
19
|
```tsx
|
|
34
20
|
import * as React from 'react';
|
|
35
|
-
import {
|
|
36
|
-
StarSolid, StarLine,
|
|
37
|
-
HeartSolid, HeartLine,
|
|
38
|
-
BellSolid, BellLine,
|
|
39
|
-
} from '@xsolla/xui-icons-base';
|
|
21
|
+
import { Home } from '@xsolla/xui-icons-base';
|
|
40
22
|
|
|
41
|
-
export default function
|
|
42
|
-
return
|
|
43
|
-
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, auto)', gap: 16 }}>
|
|
44
|
-
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
45
|
-
<StarSolid size={24} />
|
|
46
|
-
<span>Solid</span>
|
|
47
|
-
</div>
|
|
48
|
-
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
49
|
-
<StarLine size={24} />
|
|
50
|
-
<span>Line</span>
|
|
51
|
-
</div>
|
|
52
|
-
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
53
|
-
<HeartSolid size={24} color="#e74c3c" />
|
|
54
|
-
<span>Solid</span>
|
|
55
|
-
</div>
|
|
56
|
-
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
57
|
-
<HeartLine size={24} color="#e74c3c" />
|
|
58
|
-
<span>Line</span>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
### Custom Sizes
|
|
66
|
-
|
|
67
|
-
```tsx
|
|
68
|
-
import * as React from 'react';
|
|
69
|
-
import { CheckCircleSolid } from '@xsolla/xui-icons-base';
|
|
70
|
-
|
|
71
|
-
export default function IconSizes() {
|
|
72
|
-
return (
|
|
73
|
-
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
74
|
-
<CheckCircleSolid size={16} />
|
|
75
|
-
<CheckCircleSolid size={20} />
|
|
76
|
-
<CheckCircleSolid size={24} />
|
|
77
|
-
<CheckCircleSolid size={32} />
|
|
78
|
-
<CheckCircleSolid size={48} />
|
|
79
|
-
</div>
|
|
80
|
-
);
|
|
23
|
+
export default function QuickStart() {
|
|
24
|
+
return <Home size={24} aria-hidden />;
|
|
81
25
|
}
|
|
82
26
|
```
|
|
83
27
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
Import icons directly by name with their variant suffix:
|
|
87
|
-
|
|
88
|
-
```jsx
|
|
89
|
-
import { IconNameSolid, IconNameLine } from '@xsolla/xui-icons-base';
|
|
90
|
-
|
|
91
|
-
// Solid variant (filled)
|
|
92
|
-
<IconNameSolid size={24} color="#color" />
|
|
93
|
-
|
|
94
|
-
// Line variant (outlined)
|
|
95
|
-
<IconNameLine size={24} color="#color" />
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
## Icon Categories
|
|
99
|
-
|
|
100
|
-
### User Interface
|
|
28
|
+
Each icon is a single component (e.g. `Home`, `Star`, `Heart`). Switch its appearance via `variant`:
|
|
101
29
|
|
|
102
30
|
```tsx
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
HomeSolid, HomeLine,
|
|
106
|
-
SearchSolid, SearchLine,
|
|
107
|
-
MenuSolid, MenuLine,
|
|
108
|
-
SettingsSolid, SettingsLine,
|
|
109
|
-
|
|
110
|
-
// Actions
|
|
111
|
-
PlusSolid, PlusLine,
|
|
112
|
-
EditSolid, EditLine,
|
|
113
|
-
TrashSolid, TrashLine,
|
|
114
|
-
CopySolid, CopyLine,
|
|
115
|
-
} from '@xsolla/xui-icons-base';
|
|
31
|
+
<Home variant="line" /> {/* default */}
|
|
32
|
+
<Home variant="solid" />
|
|
116
33
|
```
|
|
117
34
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
```tsx
|
|
121
|
-
import {
|
|
122
|
-
MailSolid, MailLine,
|
|
123
|
-
MessageSolid, MessageLine,
|
|
124
|
-
NotificationSolid, NotificationLine,
|
|
125
|
-
BellSolid, BellLine,
|
|
126
|
-
} from '@xsolla/xui-icons-base';
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
### Media
|
|
130
|
-
|
|
131
|
-
```tsx
|
|
132
|
-
import {
|
|
133
|
-
ImageSolid, ImageLine,
|
|
134
|
-
CameraSolid, CameraLine,
|
|
135
|
-
VideoSolid, VideoLine,
|
|
136
|
-
PlaySolid, PlayLine,
|
|
137
|
-
PauseSolid, PauseLine,
|
|
138
|
-
} from '@xsolla/xui-icons-base';
|
|
139
|
-
```
|
|
35
|
+
## API Reference
|
|
140
36
|
|
|
141
|
-
###
|
|
37
|
+
### Icon components (`<Home>`, `<Star>`, `<Heart>`, ...)
|
|
142
38
|
|
|
143
|
-
|
|
144
|
-
import {
|
|
145
|
-
FileSolid, FileLine,
|
|
146
|
-
FolderSolid, FolderLine,
|
|
147
|
-
DocumentSolid, DocumentLine,
|
|
148
|
-
DownloadSolid, DownloadLine,
|
|
149
|
-
UploadSolid, UploadLine,
|
|
150
|
-
} from '@xsolla/xui-icons-base';
|
|
151
|
-
```
|
|
39
|
+
All exported icon components accept the same props (`BaseIconProps`).
|
|
152
40
|
|
|
153
|
-
|
|
41
|
+
| Prop | Type | Default | Description |
|
|
42
|
+
| --- | --- | --- | --- |
|
|
43
|
+
| `variant` | `"solid" \| "line"` | `"line"` | Renders the solid (filled) or line (outlined) glyph. |
|
|
44
|
+
| `size` | `number \| string` | `24` | Pixel size, or any CSS length (e.g. `"100%"` to fill its container). |
|
|
45
|
+
| `color` | `string` | `"currentColor"` | Icon colour. Inherits from CSS `color` by default. |
|
|
46
|
+
| `className` | `string` | — | Additional class on the wrapper element. |
|
|
47
|
+
| `style` | `CSSProperties` | — | Inline styles on the wrapper element. |
|
|
48
|
+
| `data-testid` | `string` | — | Test ID (web). |
|
|
49
|
+
| `testID` | `string` | — | Test ID (React Native). |
|
|
50
|
+
| `aria-label` | `string` | — | Accessible label. When set, the icon is exposed as `role="img"`. |
|
|
51
|
+
| `aria-hidden` | `boolean` | `true` if no `aria-label` | Hide from assistive tech. |
|
|
154
52
|
|
|
155
|
-
|
|
156
|
-
import {
|
|
157
|
-
CheckCircleSolid, CheckCircleLine,
|
|
158
|
-
WarningCircleSolid, WarningCircleLine,
|
|
159
|
-
ErrorCircleSolid, ErrorCircleLine,
|
|
160
|
-
InfoCircleSolid, InfoCircleLine,
|
|
161
|
-
HelpCircleSolid, HelpCircleLine,
|
|
162
|
-
} from '@xsolla/xui-icons-base';
|
|
163
|
-
```
|
|
53
|
+
This package does not consume `ThemeOverrideProps`; icons inherit colour from the surrounding text via `currentColor`.
|
|
164
54
|
|
|
165
|
-
###
|
|
55
|
+
### `<BaseIcon>`
|
|
166
56
|
|
|
167
|
-
|
|
168
|
-
import {
|
|
169
|
-
CartSolid, CartLine,
|
|
170
|
-
BagSolid, BagLine,
|
|
171
|
-
CreditCardSolid, CreditCardLine,
|
|
172
|
-
TagSolid, TagLine,
|
|
173
|
-
GiftSolid, GiftLine,
|
|
174
|
-
} from '@xsolla/xui-icons-base';
|
|
175
|
-
```
|
|
57
|
+
Internal wrapper. Exported for advanced use cases (e.g. building custom icon components from raw SVG strings). Most consumers should use the named icon components instead.
|
|
176
58
|
|
|
177
59
|
## Examples
|
|
178
60
|
|
|
179
|
-
###
|
|
61
|
+
### Variant toggle
|
|
180
62
|
|
|
181
63
|
```tsx
|
|
182
64
|
import * as React from 'react';
|
|
183
|
-
import
|
|
184
|
-
|
|
185
|
-
export default function IconGrid() {
|
|
186
|
-
const solidIcons = [
|
|
187
|
-
'HomeSolid', 'SearchSolid', 'UserSolid', 'SettingsSolid',
|
|
188
|
-
'BellSolid', 'HeartSolid', 'StarSolid', 'BookmarkSolid'
|
|
189
|
-
];
|
|
65
|
+
import { Heart } from '@xsolla/xui-icons-base';
|
|
190
66
|
|
|
67
|
+
export default function Toggle() {
|
|
68
|
+
const [liked, setLiked] = React.useState(false);
|
|
191
69
|
return (
|
|
192
|
-
<
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
</div>
|
|
202
|
-
);
|
|
203
|
-
})}
|
|
204
|
-
</div>
|
|
70
|
+
<button
|
|
71
|
+
type="button"
|
|
72
|
+
onClick={() => setLiked((v) => !v)}
|
|
73
|
+
aria-pressed={liked}
|
|
74
|
+
aria-label={liked ? 'Unlike' : 'Like'}
|
|
75
|
+
style={{ background: 'none', border: 'none', cursor: 'pointer' }}
|
|
76
|
+
>
|
|
77
|
+
<Heart variant={liked ? 'solid' : 'line'} color={liked ? '#e74c3c' : 'currentColor'} aria-hidden />
|
|
78
|
+
</button>
|
|
205
79
|
);
|
|
206
80
|
}
|
|
207
81
|
```
|
|
208
82
|
|
|
209
|
-
###
|
|
83
|
+
### Sizing
|
|
210
84
|
|
|
211
85
|
```tsx
|
|
212
86
|
import * as React from 'react';
|
|
213
|
-
import {
|
|
214
|
-
|
|
215
|
-
export default function ToggleIcon() {
|
|
216
|
-
const [liked, setLiked] = React.useState(false);
|
|
87
|
+
import { Star } from '@xsolla/xui-icons-base';
|
|
217
88
|
|
|
89
|
+
export default function Sizes() {
|
|
218
90
|
return (
|
|
219
|
-
<
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
{
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
<HeartLine size={24} />
|
|
227
|
-
)}
|
|
228
|
-
</button>
|
|
91
|
+
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
92
|
+
<Star size={16} aria-hidden />
|
|
93
|
+
<Star size={20} aria-hidden />
|
|
94
|
+
<Star size={24} aria-hidden />
|
|
95
|
+
<Star size={32} aria-hidden />
|
|
96
|
+
<Star size="100%" aria-hidden />
|
|
97
|
+
</div>
|
|
229
98
|
);
|
|
230
99
|
}
|
|
231
100
|
```
|
|
232
101
|
|
|
233
|
-
### Status
|
|
102
|
+
### Status indicators
|
|
234
103
|
|
|
235
104
|
```tsx
|
|
236
105
|
import * as React from 'react';
|
|
237
|
-
import {
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
ErrorCircleSolid,
|
|
241
|
-
InfoCircleSolid,
|
|
242
|
-
} from '@xsolla/xui-icons-base';
|
|
243
|
-
|
|
244
|
-
export default function StatusIndicators() {
|
|
106
|
+
import { Check, Warning, InfoCr, RemoveCr } from '@xsolla/xui-icons-base';
|
|
107
|
+
|
|
108
|
+
export default function Statuses() {
|
|
245
109
|
return (
|
|
246
|
-
<div style={{ display: 'flex', flexDirection: 'column', gap:
|
|
247
|
-
<
|
|
248
|
-
<
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
<
|
|
258
|
-
</
|
|
259
|
-
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
260
|
-
<InfoCircleSolid size={20} color="#3498db" />
|
|
261
|
-
<span>Info message</span>
|
|
262
|
-
</div>
|
|
110
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
111
|
+
<span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
112
|
+
<Check variant="solid" color="#2ecc71" aria-hidden /> Saved
|
|
113
|
+
</span>
|
|
114
|
+
<span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
115
|
+
<Warning variant="solid" color="#f39c12" aria-hidden /> Verify details
|
|
116
|
+
</span>
|
|
117
|
+
<span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
118
|
+
<RemoveCr variant="solid" color="#e74c3c" aria-hidden /> Failed
|
|
119
|
+
</span>
|
|
120
|
+
<span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
121
|
+
<InfoCr variant="line" color="#3498db" aria-hidden /> More info
|
|
122
|
+
</span>
|
|
263
123
|
</div>
|
|
264
124
|
);
|
|
265
125
|
}
|
|
266
126
|
```
|
|
267
127
|
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
### Icon Components
|
|
271
|
-
|
|
272
|
-
All icons share the same props interface.
|
|
273
|
-
|
|
274
|
-
**Icon Props:**
|
|
275
|
-
|
|
276
|
-
| Prop | Type | Default | Description |
|
|
277
|
-
| :--- | :--- | :------ | :---------- |
|
|
278
|
-
| size | `number` | `24` | Icon size in pixels. |
|
|
279
|
-
| color | `string` | `currentColor` | Icon color. |
|
|
280
|
-
|
|
281
|
-
### Naming Convention
|
|
128
|
+
### Icon-only button
|
|
282
129
|
|
|
283
|
-
|
|
130
|
+
```tsx
|
|
131
|
+
import * as React from 'react';
|
|
132
|
+
import { IconButton } from '@xsolla/xui-button';
|
|
133
|
+
import { Settings } from '@xsolla/xui-icons-base';
|
|
284
134
|
|
|
135
|
+
export default function SettingsButton() {
|
|
136
|
+
return (
|
|
137
|
+
<IconButton aria-label="Open settings">
|
|
138
|
+
<Settings />
|
|
139
|
+
</IconButton>
|
|
140
|
+
);
|
|
141
|
+
}
|
|
285
142
|
```
|
|
286
|
-
{IconName}{Variant}
|
|
287
143
|
|
|
288
|
-
|
|
289
|
-
- IconName: PascalCase name (e.g., Home, CheckCircle, ShoppingCart)
|
|
290
|
-
- Variant: Either "Solid" or "Line"
|
|
144
|
+
## Available icons
|
|
291
145
|
|
|
292
|
-
|
|
293
|
-
- HomeSolid, HomeLine
|
|
294
|
-
- CheckCircleSolid, CheckCircleLine
|
|
295
|
-
- ShoppingCartSolid, ShoppingCartLine
|
|
296
|
-
```
|
|
297
|
-
|
|
298
|
-
## Theming
|
|
146
|
+
The package exports 500+ icons grouped by category. Categories include:
|
|
299
147
|
|
|
300
|
-
|
|
148
|
+
`alignments-layouts`, `bookmarks`, `chart-graphs`, `communication`, `controls`, `date-time`, `design`, `devices-electronics`, `files-folders`, `finance-payment`, `formatting`, `games`, `media-controls`, `navigation-travel`, `shopping-ecommerce`, `specialized`, `user-interface`.
|
|
301
149
|
|
|
302
|
-
|
|
303
|
-
// Icon inherits text color from parent
|
|
304
|
-
<div style={{ color: '#3498db' }}>
|
|
305
|
-
<HomeSolid /> {/* Will be #3498db */}
|
|
306
|
-
</div>
|
|
150
|
+
Common examples: `Home`, `Search`, `User`, `Users`, `Settings`, `Bell`, `Heart`, `Star`, `Eye`, `EyeOff`, `Lock`, `LockOpen`, `Edit`, `TrashCan`, `Plus`, `Minus`, `Check`, `Warning`, `ChevronDown`, `ChevronUp`, `ChevronLeft`, `ChevronRight`, `ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`, `Copy`, `Mail`, `Phone`, `Calendar`, `Clock`, `Image`, `File`, `Folder`, `ShoppingCart`, `ShoppingBag`, `BankCard`, `Wallet`.
|
|
307
151
|
|
|
308
|
-
|
|
309
|
-
<HomeSolid color="#e74c3c" />
|
|
310
|
-
```
|
|
152
|
+
For the full list, see the package barrel file at `packages/foundation/icons-base/src/index.ts`.
|
|
311
153
|
|
|
312
154
|
## Accessibility
|
|
313
155
|
|
|
314
|
-
- Icons
|
|
315
|
-
- When
|
|
316
|
-
- For icon-only
|
|
156
|
+
- Icons render `aria-hidden="true"` by default — pair them with visible text.
|
|
157
|
+
- When an icon stands alone, set `aria-label` so it is exposed as `role="img"`.
|
|
158
|
+
- For interactive icon-only controls, prefer `IconButton` from `@xsolla/xui-button`, which enforces an accessible label.
|