@xsolla/xui-icons-flag 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 +195 -33
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,50 +1,212 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Icons Flag
|
|
3
|
+
subtitle: Country flag icons collection.
|
|
4
|
+
description: A cross-platform React flag icons package with 250+ country flags using ISO 3166-1 alpha-2 codes.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Icons Flag
|
|
8
|
+
|
|
9
|
+
A cross-platform React flag icons package containing 250+ country flags. Each flag uses ISO 3166-1 alpha-2 country codes and renders as a scalable SVG.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-icons-flag
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-icons-flag
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Individual Flag Import
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { FlagUS, FlagGB, FlagDE, FlagJP } from '@xsolla/xui-icons-flag';
|
|
26
|
+
|
|
27
|
+
export default function IndividualFlags() {
|
|
28
|
+
return (
|
|
29
|
+
<div style={{ display: 'flex', gap: 8 }}>
|
|
30
|
+
<FlagUS size={24} />
|
|
31
|
+
<FlagGB size={24} />
|
|
32
|
+
<FlagDE size={24} />
|
|
33
|
+
<FlagJP size={24} />
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Dynamic Flag Component
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import * as React from 'react';
|
|
43
|
+
import { FlagIcon } from '@xsolla/xui-icons-flag';
|
|
44
|
+
import * as Flags from '@xsolla/xui-icons-flag';
|
|
45
|
+
|
|
46
|
+
export default function DynamicFlag() {
|
|
47
|
+
const countryCode = 'US';
|
|
48
|
+
const FlagComponent = Flags[`Flag${countryCode}`];
|
|
49
|
+
|
|
50
|
+
return FlagComponent ? <FlagComponent size={24} /> : null;
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Flag Sizes
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
import * as React from 'react';
|
|
58
|
+
import { FlagUS } from '@xsolla/xui-icons-flag';
|
|
59
|
+
|
|
60
|
+
export default function FlagSizes() {
|
|
61
|
+
return (
|
|
62
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
|
63
|
+
<FlagUS size={16} />
|
|
64
|
+
<FlagUS size={24} />
|
|
65
|
+
<FlagUS size={32} />
|
|
66
|
+
<FlagUS size={48} />
|
|
67
|
+
</div>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Anatomy
|
|
73
|
+
|
|
74
|
+
```jsx
|
|
75
|
+
import { FlagUS } from '@xsolla/xui-icons-flag';
|
|
76
|
+
|
|
77
|
+
<FlagUS
|
|
78
|
+
size={24} // Size in pixels
|
|
79
|
+
className="flag" // CSS class
|
|
80
|
+
style={{ margin: 4 }} // Inline styles
|
|
81
|
+
aria-label="United States" // Accessible label
|
|
82
|
+
/>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Examples
|
|
86
|
+
|
|
87
|
+
### Country Selector
|
|
12
88
|
|
|
13
89
|
```tsx
|
|
90
|
+
import * as React from 'react';
|
|
91
|
+
import { FlagUS, FlagGB, FlagDE, FlagFR, FlagJP } from '@xsolla/xui-icons-flag';
|
|
92
|
+
|
|
93
|
+
export default function CountrySelector() {
|
|
94
|
+
const [selected, setSelected] = React.useState('US');
|
|
95
|
+
|
|
96
|
+
const countries = [
|
|
97
|
+
{ code: 'US', name: 'United States', Flag: FlagUS },
|
|
98
|
+
{ code: 'GB', name: 'United Kingdom', Flag: FlagGB },
|
|
99
|
+
{ code: 'DE', name: 'Germany', Flag: FlagDE },
|
|
100
|
+
{ code: 'FR', name: 'France', Flag: FlagFR },
|
|
101
|
+
{ code: 'JP', name: 'Japan', Flag: FlagJP },
|
|
102
|
+
];
|
|
103
|
+
|
|
104
|
+
return (
|
|
105
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
106
|
+
{countries.map(({ code, name, Flag }) => (
|
|
107
|
+
<button
|
|
108
|
+
key={code}
|
|
109
|
+
onClick={() => setSelected(code)}
|
|
110
|
+
style={{
|
|
111
|
+
display: 'flex',
|
|
112
|
+
alignItems: 'center',
|
|
113
|
+
gap: 12,
|
|
114
|
+
padding: '8px 16px',
|
|
115
|
+
background: selected === code ? '#e0e0e0' : 'transparent',
|
|
116
|
+
border: 'none',
|
|
117
|
+
cursor: 'pointer',
|
|
118
|
+
}}
|
|
119
|
+
>
|
|
120
|
+
<Flag size={20} aria-hidden />
|
|
121
|
+
<span>{name}</span>
|
|
122
|
+
</button>
|
|
123
|
+
))}
|
|
124
|
+
</div>
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### With InputPhone
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
import * as React from 'react';
|
|
133
|
+
import { InputPhone, Country } from '@xsolla/xui-input-phone';
|
|
14
134
|
import { FlagUS, FlagGB, FlagDE } from '@xsolla/xui-icons-flag';
|
|
15
135
|
|
|
16
|
-
function
|
|
136
|
+
export default function PhoneWithFlags() {
|
|
137
|
+
const [phone, setPhone] = React.useState('');
|
|
138
|
+
const [country, setCountry] = React.useState<Country>();
|
|
139
|
+
|
|
140
|
+
const countries: Country[] = [
|
|
141
|
+
{ code: 'US', name: 'United States', dialCode: '+1', flag: <FlagUS /> },
|
|
142
|
+
{ code: 'GB', name: 'United Kingdom', dialCode: '+44', flag: <FlagGB /> },
|
|
143
|
+
{ code: 'DE', name: 'Germany', dialCode: '+49', flag: <FlagDE /> },
|
|
144
|
+
];
|
|
145
|
+
|
|
17
146
|
return (
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
147
|
+
<InputPhone
|
|
148
|
+
value={phone}
|
|
149
|
+
onChange={(e) => setPhone(e.target.value)}
|
|
150
|
+
countries={countries}
|
|
151
|
+
selectedCountry={country}
|
|
152
|
+
onCountryChange={setCountry}
|
|
153
|
+
/>
|
|
23
154
|
);
|
|
24
155
|
}
|
|
25
156
|
```
|
|
26
157
|
|
|
27
|
-
##
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
- `
|
|
41
|
-
|
|
42
|
-
- `
|
|
43
|
-
- `
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
158
|
+
## API Reference
|
|
159
|
+
|
|
160
|
+
### Flag Components
|
|
161
|
+
|
|
162
|
+
Each flag component (e.g., `FlagUS`, `FlagGB`) accepts the same props:
|
|
163
|
+
|
|
164
|
+
**FlagIconProps:**
|
|
165
|
+
|
|
166
|
+
| Prop | Type | Default | Description |
|
|
167
|
+
| :--- | :--- | :------ | :---------- |
|
|
168
|
+
| size | `number` | `24` | Size in pixels (width and height). |
|
|
169
|
+
| className | `string` | - | CSS class name. |
|
|
170
|
+
| style | `CSSProperties` | - | Inline styles. |
|
|
171
|
+
| data-testid | `string` | - | Test ID (web). |
|
|
172
|
+
| testID | `string` | - | Test ID (React Native). |
|
|
173
|
+
| aria-label | `string` | - | Accessible label. |
|
|
174
|
+
| aria-hidden | `boolean` | `true` if no aria-label | Hide from screen readers. |
|
|
175
|
+
|
|
176
|
+
## Available Flags
|
|
177
|
+
|
|
178
|
+
Flags are named using ISO 3166-1 alpha-2 country codes prefixed with "Flag":
|
|
179
|
+
|
|
180
|
+
| Code | Component | Country |
|
|
181
|
+
| :--- | :-------- | :------ |
|
|
182
|
+
| AD | `FlagAD` | Andorra |
|
|
183
|
+
| AE | `FlagAE` | United Arab Emirates |
|
|
184
|
+
| AF | `FlagAF` | Afghanistan |
|
|
185
|
+
| ... | ... | ... |
|
|
186
|
+
| US | `FlagUS` | United States |
|
|
187
|
+
| GB | `FlagGB` | United Kingdom |
|
|
188
|
+
| DE | `FlagDE` | Germany |
|
|
189
|
+
| FR | `FlagFR` | France |
|
|
190
|
+
| JP | `FlagJP` | Japan |
|
|
191
|
+
| ... | ... | ... |
|
|
192
|
+
| ZW | `FlagZW` | Zimbabwe |
|
|
193
|
+
|
|
194
|
+
Over 250 country flags are available. See the full list in the package source.
|
|
195
|
+
|
|
196
|
+
## Tree Shaking
|
|
197
|
+
|
|
198
|
+
Import individual flags for optimal bundle size:
|
|
199
|
+
|
|
200
|
+
```tsx
|
|
201
|
+
// Good - only imports US flag
|
|
202
|
+
import { FlagUS } from '@xsolla/xui-icons-flag';
|
|
203
|
+
|
|
204
|
+
// Avoid - imports all flags
|
|
205
|
+
import * as Flags from '@xsolla/xui-icons-flag';
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
## Accessibility
|
|
209
|
+
|
|
210
|
+
- Flags are hidden from screen readers by default (`aria-hidden="true"`)
|
|
211
|
+
- Use `aria-label` when the flag conveys meaningful information
|
|
212
|
+
- For decorative flags, keep the default hidden behavior
|