@xsolla/xui-icons-flag 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 +55 -126
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,84 +1,79 @@
|
|
|
1
|
-
#
|
|
1
|
+
# IconsFlag
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
250+ country flag icons named with ISO 3166-1 alpha-2 codes (`FlagUS`, `FlagGB`, `FlagDE`, ...) and rendered as scalable SVGs.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-icons-flag
|
|
9
|
-
# or
|
|
10
|
-
yarn add @xsolla/xui-icons-flag
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
##
|
|
11
|
+
## Imports
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
```tsx
|
|
14
|
+
import { FlagUS, FlagGB, FlagDE, FlagJP, type FlagIconProps } from '@xsolla/xui-icons-flag';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Quick start
|
|
16
18
|
|
|
17
19
|
```tsx
|
|
18
20
|
import * as React from 'react';
|
|
19
|
-
import { FlagUS
|
|
21
|
+
import { FlagUS } from '@xsolla/xui-icons-flag';
|
|
20
22
|
|
|
21
|
-
export default function
|
|
22
|
-
return
|
|
23
|
-
<div style={{ display: 'flex', gap: 8 }}>
|
|
24
|
-
<FlagUS size={24} />
|
|
25
|
-
<FlagGB size={24} />
|
|
26
|
-
<FlagDE size={24} />
|
|
27
|
-
<FlagJP size={24} />
|
|
28
|
-
</div>
|
|
29
|
-
);
|
|
23
|
+
export default function QuickStart() {
|
|
24
|
+
return <FlagUS size={24} aria-label="United States" />;
|
|
30
25
|
}
|
|
31
26
|
```
|
|
32
27
|
|
|
33
|
-
|
|
28
|
+
## API Reference
|
|
34
29
|
|
|
35
|
-
|
|
36
|
-
import * as React from 'react';
|
|
37
|
-
import { FlagIcon } from '@xsolla/xui-icons-flag';
|
|
38
|
-
import * as Flags from '@xsolla/xui-icons-flag';
|
|
30
|
+
### Flag components (`<FlagUS>`, `<FlagGB>`, ...)
|
|
39
31
|
|
|
40
|
-
|
|
41
|
-
const countryCode = 'US';
|
|
42
|
-
const FlagComponent = Flags[`Flag${countryCode}`];
|
|
32
|
+
All flag components accept the same props (`FlagIconProps`).
|
|
43
33
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
34
|
+
| Prop | Type | Default | Description |
|
|
35
|
+
| --- | --- | --- | --- |
|
|
36
|
+
| `size` | `number` | `24` | Pixel size (square). |
|
|
37
|
+
| `className` | `string` | — | CSS class on the wrapper. |
|
|
38
|
+
| `style` | `CSSProperties` | — | Inline styles. |
|
|
39
|
+
| `data-testid` | `string` | — | Test ID (web). |
|
|
40
|
+
| `testID` | `string` | — | Test ID (React Native). |
|
|
41
|
+
| `aria-label` | `string` | — | Accessible label (e.g. country name). When set, the icon is exposed as `role="img"`. |
|
|
42
|
+
| `aria-hidden` | `boolean` | `true` if no `aria-label` | Hide from assistive tech. |
|
|
43
|
+
|
|
44
|
+
This package does not consume `ThemeOverrideProps`.
|
|
45
|
+
|
|
46
|
+
> `FlagIcon` is also exported but is an internal wrapper used to build each `Flag<CC>` component from a raw SVG string. Most consumers should use the named flag components.
|
|
47
|
+
|
|
48
|
+
## Available flags
|
|
49
|
+
|
|
50
|
+
Flag components are named `Flag` + ISO 3166-1 alpha-2 code. Examples: `FlagUS`, `FlagGB`, `FlagDE`, `FlagFR`, `FlagJP`, `FlagBR`, `FlagIN`, `FlagAU`, `FlagCA`, `FlagMX`, `FlagZA`, `FlagZW`.
|
|
51
|
+
|
|
52
|
+
A few codes appear with numeric suffixes (e.g. `FlagBQ`, `FlagBQ1`, `FlagBQ2`) where multiple flag variants exist for the same code.
|
|
47
53
|
|
|
48
|
-
|
|
54
|
+
For the full list of 250+ flags, see `packages/foundation/icons-flag/src/index.ts`.
|
|
55
|
+
|
|
56
|
+
## Examples
|
|
57
|
+
|
|
58
|
+
### Sizing
|
|
49
59
|
|
|
50
60
|
```tsx
|
|
51
61
|
import * as React from 'react';
|
|
52
62
|
import { FlagUS } from '@xsolla/xui-icons-flag';
|
|
53
63
|
|
|
54
|
-
export default function
|
|
64
|
+
export default function Sizes() {
|
|
55
65
|
return (
|
|
56
66
|
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
|
57
|
-
<FlagUS size={16} />
|
|
58
|
-
<FlagUS size={24} />
|
|
59
|
-
<FlagUS size={32} />
|
|
60
|
-
<FlagUS size={48} />
|
|
67
|
+
<FlagUS size={16} aria-label="US, small" />
|
|
68
|
+
<FlagUS size={24} aria-label="US" />
|
|
69
|
+
<FlagUS size={32} aria-label="US, large" />
|
|
70
|
+
<FlagUS size={48} aria-label="US, extra large" />
|
|
61
71
|
</div>
|
|
62
72
|
);
|
|
63
73
|
}
|
|
64
74
|
```
|
|
65
75
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
```jsx
|
|
69
|
-
import { FlagUS } from '@xsolla/xui-icons-flag';
|
|
70
|
-
|
|
71
|
-
<FlagUS
|
|
72
|
-
size={24} // Size in pixels
|
|
73
|
-
className="flag" // CSS class
|
|
74
|
-
style={{ margin: 4 }} // Inline styles
|
|
75
|
-
aria-label="United States" // Accessible label
|
|
76
|
-
/>
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
## Examples
|
|
80
|
-
|
|
81
|
-
### Country Selector
|
|
76
|
+
### Country selector
|
|
82
77
|
|
|
83
78
|
```tsx
|
|
84
79
|
import * as React from 'react';
|
|
@@ -86,7 +81,6 @@ import { FlagUS, FlagGB, FlagDE, FlagFR, FlagJP } from '@xsolla/xui-icons-flag';
|
|
|
86
81
|
|
|
87
82
|
export default function CountrySelector() {
|
|
88
83
|
const [selected, setSelected] = React.useState('US');
|
|
89
|
-
|
|
90
84
|
const countries = [
|
|
91
85
|
{ code: 'US', name: 'United States', Flag: FlagUS },
|
|
92
86
|
{ code: 'GB', name: 'United Kingdom', Flag: FlagGB },
|
|
@@ -94,13 +88,14 @@ export default function CountrySelector() {
|
|
|
94
88
|
{ code: 'FR', name: 'France', Flag: FlagFR },
|
|
95
89
|
{ code: 'JP', name: 'Japan', Flag: FlagJP },
|
|
96
90
|
];
|
|
97
|
-
|
|
98
91
|
return (
|
|
99
92
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
100
93
|
{countries.map(({ code, name, Flag }) => (
|
|
101
94
|
<button
|
|
102
95
|
key={code}
|
|
96
|
+
type="button"
|
|
103
97
|
onClick={() => setSelected(code)}
|
|
98
|
+
aria-pressed={selected === code}
|
|
104
99
|
style={{
|
|
105
100
|
display: 'flex',
|
|
106
101
|
alignItems: 'center',
|
|
@@ -120,87 +115,21 @@ export default function CountrySelector() {
|
|
|
120
115
|
}
|
|
121
116
|
```
|
|
122
117
|
|
|
123
|
-
###
|
|
118
|
+
### Dynamic lookup by ISO code
|
|
124
119
|
|
|
125
120
|
```tsx
|
|
126
121
|
import * as React from 'react';
|
|
127
|
-
import
|
|
128
|
-
import {
|
|
129
|
-
|
|
130
|
-
export default function PhoneWithFlags() {
|
|
131
|
-
const [phone, setPhone] = React.useState('');
|
|
132
|
-
const [country, setCountry] = React.useState<Country>();
|
|
133
|
-
|
|
134
|
-
const countries: Country[] = [
|
|
135
|
-
{ code: 'US', name: 'United States', dialCode: '+1', flag: <FlagUS /> },
|
|
136
|
-
{ code: 'GB', name: 'United Kingdom', dialCode: '+44', flag: <FlagGB /> },
|
|
137
|
-
{ code: 'DE', name: 'Germany', dialCode: '+49', flag: <FlagDE /> },
|
|
138
|
-
];
|
|
122
|
+
import * as Flags from '@xsolla/xui-icons-flag';
|
|
123
|
+
import type { FlagIconProps } from '@xsolla/xui-icons-flag';
|
|
139
124
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
onChange={(e) => setPhone(e.target.value)}
|
|
144
|
-
countries={countries}
|
|
145
|
-
selectedCountry={country}
|
|
146
|
-
onCountryChange={setCountry}
|
|
147
|
-
/>
|
|
148
|
-
);
|
|
125
|
+
export default function DynamicFlag({ code }: { code: string }) {
|
|
126
|
+
const FlagComponent = (Flags as Record<string, React.FC<FlagIconProps>>)[`Flag${code.toUpperCase()}`];
|
|
127
|
+
return FlagComponent ? <FlagComponent size={24} aria-label={code} /> : null;
|
|
149
128
|
}
|
|
150
129
|
```
|
|
151
130
|
|
|
152
|
-
## API Reference
|
|
153
|
-
|
|
154
|
-
### Flag Components
|
|
155
|
-
|
|
156
|
-
Each flag component (e.g., `FlagUS`, `FlagGB`) accepts the same props:
|
|
157
|
-
|
|
158
|
-
**FlagIconProps:**
|
|
159
|
-
|
|
160
|
-
| Prop | Type | Default | Description |
|
|
161
|
-
| :--- | :--- | :------ | :---------- |
|
|
162
|
-
| size | `number` | `24` | Size in pixels (width and height). |
|
|
163
|
-
| className | `string` | - | CSS class name. |
|
|
164
|
-
| style | `CSSProperties` | - | Inline styles. |
|
|
165
|
-
| data-testid | `string` | - | Test ID (web). |
|
|
166
|
-
| testID | `string` | - | Test ID (React Native). |
|
|
167
|
-
| aria-label | `string` | - | Accessible label. |
|
|
168
|
-
| aria-hidden | `boolean` | `true` if no aria-label | Hide from screen readers. |
|
|
169
|
-
|
|
170
|
-
## Available Flags
|
|
171
|
-
|
|
172
|
-
Flags are named using ISO 3166-1 alpha-2 country codes prefixed with "Flag":
|
|
173
|
-
|
|
174
|
-
| Code | Component | Country |
|
|
175
|
-
| :--- | :-------- | :------ |
|
|
176
|
-
| AD | `FlagAD` | Andorra |
|
|
177
|
-
| AE | `FlagAE` | United Arab Emirates |
|
|
178
|
-
| AF | `FlagAF` | Afghanistan |
|
|
179
|
-
| ... | ... | ... |
|
|
180
|
-
| US | `FlagUS` | United States |
|
|
181
|
-
| GB | `FlagGB` | United Kingdom |
|
|
182
|
-
| DE | `FlagDE` | Germany |
|
|
183
|
-
| FR | `FlagFR` | France |
|
|
184
|
-
| JP | `FlagJP` | Japan |
|
|
185
|
-
| ... | ... | ... |
|
|
186
|
-
| ZW | `FlagZW` | Zimbabwe |
|
|
187
|
-
|
|
188
|
-
Over 250 country flags are available. See the full list in the package source.
|
|
189
|
-
|
|
190
|
-
## Tree Shaking
|
|
191
|
-
|
|
192
|
-
Import individual flags for optimal bundle size:
|
|
193
|
-
|
|
194
|
-
```tsx
|
|
195
|
-
// Good - only imports US flag
|
|
196
|
-
import { FlagUS } from '@xsolla/xui-icons-flag';
|
|
197
|
-
|
|
198
|
-
// Avoid - imports all flags
|
|
199
|
-
import * as Flags from '@xsolla/xui-icons-flag';
|
|
200
|
-
```
|
|
201
|
-
|
|
202
131
|
## Accessibility
|
|
203
132
|
|
|
204
|
-
- Flags are hidden from screen readers by default
|
|
205
|
-
-
|
|
206
|
-
-
|
|
133
|
+
- Flags are hidden from screen readers by default.
|
|
134
|
+
- When the flag conveys meaning (e.g. country picker), set `aria-label` to the country name.
|
|
135
|
+
- Within a labelled control, keep the flag `aria-hidden` and label the control.
|