@xsolla/xui-icons-brand 0.149.1 → 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.
Files changed (2) hide show
  1. package/README.md +98 -182
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,88 +1,117 @@
1
- # Icons Brand
1
+ # IconsBrand
2
2
 
3
- A cross-platform React brand icons package containing 160+ company and platform logos. Each icon supports colored and monochrome variants.
3
+ 160+ company and platform logos, each available in `colored` and `mono` variants and rendered as scalable SVGs.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
8
  npm install @xsolla/xui-icons-brand
9
- # or
10
- yarn add @xsolla/xui-icons-brand
11
9
  ```
12
10
 
13
- ## Demo
11
+ ## Imports
14
12
 
15
- ### Colored Icons (Default)
13
+ ```tsx
14
+ import { Github, Discord, Steam, BaseIcon, type BrandIconProps, type IconVariant } from '@xsolla/xui-icons-brand';
15
+ ```
16
+
17
+ ## Quick start
16
18
 
17
19
  ```tsx
18
20
  import * as React from 'react';
19
- import { Github, Discord, Steam, Twitch } from '@xsolla/xui-icons-brand';
21
+ import { Github } from '@xsolla/xui-icons-brand';
20
22
 
21
- export default function ColoredIcons() {
22
- return (
23
- <div style={{ display: 'flex', gap: 16 }}>
24
- <Github size={32} />
25
- <Discord size={32} />
26
- <Steam size={32} />
27
- <Twitch size={32} />
28
- </div>
29
- );
23
+ export default function QuickStart() {
24
+ return <Github size={32} aria-label="GitHub" />;
30
25
  }
31
26
  ```
32
27
 
33
- ### Monochrome Icons
28
+ Switch the visual treatment with `variant`:
34
29
 
35
30
  ```tsx
36
- import * as React from 'react';
37
- import { Github, Discord, Steam, Twitch } from '@xsolla/xui-icons-brand';
38
-
39
- export default function MonoIcons() {
40
- return (
41
- <div style={{ display: 'flex', gap: 16 }}>
42
- <Github size={32} variant="mono" />
43
- <Discord size={32} variant="mono" />
44
- <Steam size={32} variant="mono" />
45
- <Twitch size={32} variant="mono" />
46
- </div>
47
- );
48
- }
31
+ <Github variant="colored" /> {/* default */}
32
+ <Github variant="mono" />
49
33
  ```
50
34
 
51
- ### Different Sizes
35
+ ## API Reference
36
+
37
+ ### Brand icon components (`<Github>`, `<Discord>`, `<Steam>`, ...)
38
+
39
+ All brand icons accept the same props (`BrandIconProps`).
40
+
41
+ | Prop | Type | Default | Description |
42
+ | --- | --- | --- | --- |
43
+ | `variant` | `"colored" \| "mono"` | `"colored"` | Renders the colour or monochrome glyph. Mono inherits the surrounding `color`. |
44
+ | `size` | `number` | `24` | Pixel size (square). |
45
+ | `className` | `string` | — | CSS class on the wrapper. |
46
+ | `style` | `CSSProperties` | — | Inline styles. |
47
+ | `data-testid` | `string` | — | Test ID (web). |
48
+ | `testID` | `string` | — | Test ID (React Native). |
49
+ | `aria-label` | `string` | — | Accessible label. When set, the icon is exposed as `role="img"`. |
50
+ | `aria-hidden` | `boolean` | `true` if no `aria-label` | Hide from assistive tech. |
51
+
52
+ This package does not consume `ThemeOverrideProps`.
53
+
54
+ ### `<BaseIcon>`
55
+
56
+ Internal wrapper exported for advanced use cases (custom brand icons built from raw SVG strings). Most consumers should use the named icon components instead.
57
+
58
+ ## Available icons (160+)
59
+
60
+ ### Social and communication
61
+ `Discord`, `Facebook`, `FacebookMessenger`, `Instagram`, `Line`, `Linkedin`, `Meetup`, `RedditAlien`, `Skype`, `Slack`, `SnapchatGhost`, `TelegramPlane`, `Tiktok`, `Tumblr`, `Twitter`, `Viber`, `Vk`, `Wechat`, `Whatsapp`
62
+
63
+ ### Gaming platforms
64
+ `BattleNet`, `EaGames`, `EpicGamesStore`, `Gog`, `GooglePlay`, `GoogleStadia`, `ItchIo`, `MinecraftLauncher`, `MyNintendoStore`, `NexonLauncher`, `Oculus`, `Origin`, `ParadoxLauncher`, `Playstation`, `RiotGames`, `RobloxClient`, `RockstarGames`, `Steam`, `SteamSymbol`, `Ubisoft`, `Viveport`, `WargamingGameCenter`, `Xbox`
65
+
66
+ ### Payments and finance
67
+ `AmericanExpress`, `ApplePay`, `Btc`, `CcDinersClub`, `CcJcb`, `CcMastercard`, `CcPaypal`, `CcVisa`, `Ethereum`, `GooglePay`, `Paypal`, `Stripe`
68
+
69
+ ### Tech and productivity
70
+ `Adobe`, `Amazon`, `Apple`, `Atlassian`, `Dropbox`, `Ebay`, `Etsy`, `Google`, `GoogleDrive`, `Meta`, `Microsoft`, `Salesforce`
71
+
72
+ ### Development
73
+ `Angular`, `Bitbucket`, `Bootstrap`, `Centos`, `Codepen`, `Confluence`, `Css3Alt`, `Figma`, `GitAlt`, `Github`, `GithubAlt`, `Gitlab`, `Html5`, `Java`, `Jira`, `Linux`, `NodeJs`, `Npm`, `Sketch`, `Trello`, `Ubuntu`, `Unity`, `WordpressSimple`
74
+
75
+ ### Browsers
76
+ `Chrome`, `Edge`, `FirefoxBrowser`, `Opera`, `Safari`
77
+
78
+ ### Media and entertainment
79
+ `Bandcamp`, `Behance`, `Deviantart`, `Dribbble`, `Flickr`, `Imdb`, `ItunesNote`, `Soundcloud`, `Spotify`, `Twitch`, `Unsplash`, `VimeoV`, `Youtube`
80
+
81
+ ### Xsolla
82
+ `XsollaLine`, `XsollaSolid`
83
+
84
+ For the full list, see `packages/foundation/icons-brand/src/index.ts`.
85
+
86
+ ## Examples
87
+
88
+ ### Variants
52
89
 
53
90
  ```tsx
54
91
  import * as React from 'react';
55
- import { Google } from '@xsolla/xui-icons-brand';
92
+ import { Github, Discord, Steam, Twitch } from '@xsolla/xui-icons-brand';
56
93
 
57
- export default function Sizes() {
94
+ export default function Variants() {
58
95
  return (
59
- <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
60
- <Google size={16} />
61
- <Google size={24} />
62
- <Google size={32} />
63
- <Google size={48} />
96
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
97
+ <div style={{ display: 'flex', gap: 16 }}>
98
+ <Github size={32} aria-label="GitHub" />
99
+ <Discord size={32} aria-label="Discord" />
100
+ <Steam size={32} aria-label="Steam" />
101
+ <Twitch size={32} aria-label="Twitch" />
102
+ </div>
103
+ <div style={{ display: 'flex', gap: 16, color: '#333' }}>
104
+ <Github size={32} variant="mono" aria-label="GitHub" />
105
+ <Discord size={32} variant="mono" aria-label="Discord" />
106
+ <Steam size={32} variant="mono" aria-label="Steam" />
107
+ <Twitch size={32} variant="mono" aria-label="Twitch" />
108
+ </div>
64
109
  </div>
65
110
  );
66
111
  }
67
112
  ```
68
113
 
69
- ## Anatomy
70
-
71
- ```jsx
72
- import { Github } from '@xsolla/xui-icons-brand';
73
-
74
- <Github
75
- size={24} // Size in pixels
76
- variant="colored" // colored or mono
77
- className="brand-icon" // CSS class
78
- style={{ margin: 4 }} // Inline styles
79
- aria-label="GitHub" // Accessible label
80
- />
81
- ```
82
-
83
- ## Examples
84
-
85
- ### Social Media Links
114
+ ### Social media links
86
115
 
87
116
  ```tsx
88
117
  import * as React from 'react';
@@ -90,18 +119,17 @@ import { Facebook, Twitter, Instagram, Linkedin, Youtube } from '@xsolla/xui-ico
90
119
 
91
120
  export default function SocialLinks() {
92
121
  const socials = [
93
- { Icon: Facebook, url: 'https://facebook.com', label: 'Facebook' },
94
- { Icon: Twitter, url: 'https://twitter.com', label: 'Twitter' },
95
- { Icon: Instagram, url: 'https://instagram.com', label: 'Instagram' },
96
- { Icon: Linkedin, url: 'https://linkedin.com', label: 'LinkedIn' },
97
- { Icon: Youtube, url: 'https://youtube.com', label: 'YouTube' },
122
+ { Icon: Facebook, url: 'https://facebook.com/example', label: 'Facebook' },
123
+ { Icon: Twitter, url: 'https://twitter.com/example', label: 'Twitter' },
124
+ { Icon: Instagram, url: 'https://instagram.com/example', label: 'Instagram' },
125
+ { Icon: Linkedin, url: 'https://linkedin.com/company/example', label: 'LinkedIn' },
126
+ { Icon: Youtube, url: 'https://youtube.com/@example', label: 'YouTube' },
98
127
  ];
99
-
100
128
  return (
101
129
  <div style={{ display: 'flex', gap: 12 }}>
102
130
  {socials.map(({ Icon, url, label }) => (
103
131
  <a key={label} href={url} aria-label={label}>
104
- <Icon size={24} />
132
+ <Icon size={24} aria-hidden />
105
133
  </a>
106
134
  ))}
107
135
  </div>
@@ -109,7 +137,7 @@ export default function SocialLinks() {
109
137
  }
110
138
  ```
111
139
 
112
- ### Platform Login Options
140
+ ### Platform login buttons
113
141
 
114
142
  ```tsx
115
143
  import * as React from 'react';
@@ -119,129 +147,17 @@ import { Button } from '@xsolla/xui-button';
119
147
  export default function LoginOptions() {
120
148
  return (
121
149
  <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
122
- <Button variant="secondary" iconLeft={<Google size={20} />}>
123
- Continue with Google
124
- </Button>
125
- <Button variant="secondary" iconLeft={<Apple size={20} />}>
126
- Continue with Apple
127
- </Button>
128
- <Button variant="secondary" iconLeft={<Steam size={20} />}>
129
- Continue with Steam
130
- </Button>
131
- <Button variant="secondary" iconLeft={<Discord size={20} />}>
132
- Continue with Discord
133
- </Button>
134
- </div>
135
- );
136
- }
137
- ```
138
-
139
- ### Gaming Platforms
140
-
141
- ```tsx
142
- import * as React from 'react';
143
- import {
144
- Steam,
145
- EpicGamesStore,
146
- Gog,
147
- Playstation,
148
- Xbox,
149
- BattleNet,
150
- } from '@xsolla/xui-icons-brand';
151
-
152
- export default function GamingPlatforms() {
153
- return (
154
- <div style={{ display: 'flex', gap: 16 }}>
155
- <Steam size={32} aria-label="Steam" />
156
- <EpicGamesStore size={32} aria-label="Epic Games Store" />
157
- <Gog size={32} aria-label="GOG" />
158
- <Playstation size={32} aria-label="PlayStation" />
159
- <Xbox size={32} aria-label="Xbox" />
160
- <BattleNet size={32} aria-label="Battle.net" />
150
+ <Button variant="secondary" iconLeft={<Google size={20} aria-hidden />}>Continue with Google</Button>
151
+ <Button variant="secondary" iconLeft={<Apple size={20} aria-hidden />}>Continue with Apple</Button>
152
+ <Button variant="secondary" iconLeft={<Steam size={20} aria-hidden />}>Continue with Steam</Button>
153
+ <Button variant="secondary" iconLeft={<Discord size={20} aria-hidden />}>Continue with Discord</Button>
161
154
  </div>
162
155
  );
163
156
  }
164
157
  ```
165
158
 
166
- ### Themed Footer
167
-
168
- ```tsx
169
- import * as React from 'react';
170
- import { Github, Twitter, Discord } from '@xsolla/xui-icons-brand';
171
-
172
- export default function ThemedFooter() {
173
- return (
174
- <footer style={{ background: '#1a1a1a', padding: 24 }}>
175
- <div style={{ display: 'flex', gap: 16, justifyContent: 'center' }}>
176
- <Github size={24} variant="mono" style={{ color: '#fff' }} />
177
- <Twitter size={24} variant="mono" style={{ color: '#fff' }} />
178
- <Discord size={24} variant="mono" style={{ color: '#fff' }} />
179
- </div>
180
- </footer>
181
- );
182
- }
183
- ```
184
-
185
- ## API Reference
186
-
187
- ### Brand Icon Components
188
-
189
- Each brand icon component accepts the same props:
190
-
191
- **BrandIconProps:**
192
-
193
- | Prop | Type | Default | Description |
194
- | :--- | :--- | :------ | :---------- |
195
- | size | `number` | `24` | Size in pixels. |
196
- | variant | `"colored" \| "mono"` | `"colored"` | Icon style variant. |
197
- | className | `string` | - | CSS class name. |
198
- | style | `CSSProperties` | - | Inline styles. |
199
- | data-testid | `string` | - | Test ID (web). |
200
- | testID | `string` | - | Test ID (React Native). |
201
- | aria-label | `string` | - | Accessible label. |
202
- | aria-hidden | `boolean` | `true` if no aria-label | Hide from screen readers. |
203
-
204
- ## Available Icons (160+)
205
-
206
- ### Social & Communication
207
- `Discord`, `Facebook`, `FacebookMessenger`, `Instagram`, `Line`, `Linkedin`, `Meetup`, `RedditAlien`, `Skype`, `Slack`, `SnapchatGhost`, `TelegramPlane`, `Tiktok`, `Tumblr`, `Twitter`, `Viber`, `Vk`, `Wechat`, `Whatsapp`
208
-
209
- ### Gaming Platforms
210
- `BattleNet`, `EaGames`, `EpicGamesStore`, `Gog`, `GooglePlay`, `GoogleStadia`, `ItchIo`, `MinecraftLauncher`, `MyNintendoStore`, `NexonLauncher`, `Oculus`, `Origin`, `ParadoxLauncher`, `Playstation`, `RiotGames`, `RobloxClient`, `RockstarGames`, `Steam`, `SteamSymbol`, `Ubisoft`, `Viveport`, `WargamingGameCenter`, `Xbox`
211
-
212
- ### Payment & Finance
213
- `AmericanExpress`, `ApplePay`, `Btc`, `CcDinersClub`, `CcJcb`, `CcMastercard`, `CcPaypal`, `CcVisa`, `Ethereum`, `GooglePay`, `Paypal`, `Stripe`
214
-
215
- ### Tech Companies
216
- `Adobe`, `Amazon`, `Apple`, `Atlassian`, `Dropbox`, `Ebay`, `Etsy`, `Google`, `GoogleDrive`, `Meta`, `Microsoft`, `Salesforce`
217
-
218
- ### Development
219
- `Angular`, `Bitbucket`, `Bootstrap`, `Centos`, `Codepen`, `Confluence`, `Css3Alt`, `Figma`, `GitAlt`, `Github`, `GithubAlt`, `Gitlab`, `Html5`, `Java`, `Jira`, `Linux`, `NodeJs`, `Npm`, `Sketch`, `Trello`, `Ubuntu`, `Unity`, `WordpressSimple`
220
-
221
- ### Browsers
222
- `Chrome`, `Edge`, `FirefoxBrowser`, `Opera`, `Safari`
223
-
224
- ### Media & Entertainment
225
- `Bandcamp`, `Behance`, `Deviantart`, `Dribbble`, `Flickr`, `Imdb`, `ItunesNote`, `Soundcloud`, `Spotify`, `Twitch`, `Unsplash`, `VimeoV`, `Youtube`
226
-
227
- ### Xsolla
228
- `XsollaLine`, `XsollaSolid`
229
-
230
- ## Tree Shaking
231
-
232
- Import individual icons for optimal bundle size:
233
-
234
- ```tsx
235
- // Good - only imports needed icons
236
- import { Github, Discord } from '@xsolla/xui-icons-brand';
237
-
238
- // Avoid - imports all icons
239
- import * as BrandIcons from '@xsolla/xui-icons-brand';
240
- ```
241
-
242
159
  ## Accessibility
243
160
 
244
- - Icons are hidden from screen readers by default (`aria-hidden="true"`)
245
- - Use `aria-label` when the icon conveys meaningful information
246
- - When used in buttons/links, the parent element should have the accessible label
247
- - For decorative brand badges, keep the default hidden behavior
161
+ - Icons are hidden from screen readers by default.
162
+ - Set `aria-label` whenever a brand logo carries meaning (e.g. as a stand-alone link).
163
+ - Within a labelled control (link/button), keep the icon `aria-hidden` and label the control.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-icons-brand",
3
- "version": "0.149.1",
3
+ "version": "0.151.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",