@xsolla/xui-icons-brand 0.141.0 → 0.141.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-icons-brand",
-  "version": "0.141.0",
+  "version": "0.141.1",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",

package/README.md

@@ -1,247 +0,0 @@
-# Icons Brand
-
-A cross-platform React brand icons package containing 160+ company and platform logos. Each icon supports colored and monochrome variants.
-
-## Installation
-
-```bash
-npm install @xsolla/xui-icons-brand
-# or
-yarn add @xsolla/xui-icons-brand
-```
-
-## Demo
-
-### Colored Icons (Default)
-
-```tsx
-import * as React from 'react';
-import { Github, Discord, Steam, Twitch } from '@xsolla/xui-icons-brand';
-
-export default function ColoredIcons() {
-  return (
-    <div style={{ display: 'flex', gap: 16 }}>
-      <Github size={32} />
-      <Discord size={32} />
-      <Steam size={32} />
-      <Twitch size={32} />
-    </div>
-  );
-}
-```
-
-### Monochrome Icons
-
-```tsx
-import * as React from 'react';
-import { Github, Discord, Steam, Twitch } from '@xsolla/xui-icons-brand';
-
-export default function MonoIcons() {
-  return (
-    <div style={{ display: 'flex', gap: 16 }}>
-      <Github size={32} variant="mono" />
-      <Discord size={32} variant="mono" />
-      <Steam size={32} variant="mono" />
-      <Twitch size={32} variant="mono" />
-    </div>
-  );
-}
-```
-
-### Different Sizes
-
-```tsx
-import * as React from 'react';
-import { Google } from '@xsolla/xui-icons-brand';
-
-export default function Sizes() {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-      <Google size={16} />
-      <Google size={24} />
-      <Google size={32} />
-      <Google size={48} />
-    </div>
-  );
-}
-```
-
-## Anatomy
-
-```jsx
-import { Github } from '@xsolla/xui-icons-brand';
-
-<Github
-  size={24}                // Size in pixels
-  variant="colored"        // colored or mono
-  className="brand-icon"   // CSS class
-  style={{ margin: 4 }}    // Inline styles
-  aria-label="GitHub"      // Accessible label
-/>
-```
-
-## Examples
-
-### Social Media Links
-
-```tsx
-import * as React from 'react';
-import { Facebook, Twitter, Instagram, Linkedin, Youtube } from '@xsolla/xui-icons-brand';
-
-export default function SocialLinks() {
-  const socials = [
-    { Icon: Facebook, url: 'https://facebook.com', label: 'Facebook' },
-    { Icon: Twitter, url: 'https://twitter.com', label: 'Twitter' },
-    { Icon: Instagram, url: 'https://instagram.com', label: 'Instagram' },
-    { Icon: Linkedin, url: 'https://linkedin.com', label: 'LinkedIn' },
-    { Icon: Youtube, url: 'https://youtube.com', label: 'YouTube' },
-  ];
-
-  return (
-    <div style={{ display: 'flex', gap: 12 }}>
-      {socials.map(({ Icon, url, label }) => (
-        <a key={label} href={url} aria-label={label}>
-          <Icon size={24} />
-        </a>
-      ))}
-    </div>
-  );
-}
-```
-
-### Platform Login Options
-
-```tsx
-import * as React from 'react';
-import { Google, Apple, Steam, Discord } from '@xsolla/xui-icons-brand';
-import { Button } from '@xsolla/xui-button';
-
-export default function LoginOptions() {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-      <Button variant="secondary" iconLeft={<Google size={20} />}>
-        Continue with Google
-      </Button>
-      <Button variant="secondary" iconLeft={<Apple size={20} />}>
-        Continue with Apple
-      </Button>
-      <Button variant="secondary" iconLeft={<Steam size={20} />}>
-        Continue with Steam
-      </Button>
-      <Button variant="secondary" iconLeft={<Discord size={20} />}>
-        Continue with Discord
-      </Button>
-    </div>
-  );
-}
-```
-
-### Gaming Platforms
-
-```tsx
-import * as React from 'react';
-import {
-  Steam,
-  EpicGamesStore,
-  Gog,
-  Playstation,
-  Xbox,
-  BattleNet,
-} from '@xsolla/xui-icons-brand';
-
-export default function GamingPlatforms() {
-  return (
-    <div style={{ display: 'flex', gap: 16 }}>
-      <Steam size={32} aria-label="Steam" />
-      <EpicGamesStore size={32} aria-label="Epic Games Store" />
-      <Gog size={32} aria-label="GOG" />
-      <Playstation size={32} aria-label="PlayStation" />
-      <Xbox size={32} aria-label="Xbox" />
-      <BattleNet size={32} aria-label="Battle.net" />
-    </div>
-  );
-}
-```
-
-### Themed Footer
-
-```tsx
-import * as React from 'react';
-import { Github, Twitter, Discord } from '@xsolla/xui-icons-brand';
-
-export default function ThemedFooter() {
-  return (
-    <footer style={{ background: '#1a1a1a', padding: 24 }}>
-      <div style={{ display: 'flex', gap: 16, justifyContent: 'center' }}>
-        <Github size={24} variant="mono" style={{ color: '#fff' }} />
-        <Twitter size={24} variant="mono" style={{ color: '#fff' }} />
-        <Discord size={24} variant="mono" style={{ color: '#fff' }} />
-      </div>
-    </footer>
-  );
-}
-```
-
-## API Reference
-
-### Brand Icon Components
-
-Each brand icon component accepts the same props:
-
-**BrandIconProps:**
-
-| Prop | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| size | `number` | `24` | Size in pixels. |
-| variant | `"colored" \| "mono"` | `"colored"` | Icon style variant. |
-| className | `string` | - | CSS class name. |
-| style | `CSSProperties` | - | Inline styles. |
-| data-testid | `string` | - | Test ID (web). |
-| testID | `string` | - | Test ID (React Native). |
-| aria-label | `string` | - | Accessible label. |
-| aria-hidden | `boolean` | `true` if no aria-label | Hide from screen readers. |
-
-## Available Icons (160+)
-
-### Social & Communication
-`Discord`, `Facebook`, `FacebookMessenger`, `Instagram`, `Line`, `Linkedin`, `Meetup`, `RedditAlien`, `Skype`, `Slack`, `SnapchatGhost`, `TelegramPlane`, `Tiktok`, `Tumblr`, `Twitter`, `Viber`, `Vk`, `Wechat`, `Whatsapp`
-
-### Gaming Platforms
-`BattleNet`, `EaGames`, `EpicGamesStore`, `Gog`, `GooglePlay`, `GoogleStadia`, `ItchIo`, `MinecraftLauncher`, `MyNintendoStore`, `NexonLauncher`, `Oculus`, `Origin`, `ParadoxLauncher`, `Playstation`, `RiotGames`, `RobloxClient`, `RockstarGames`, `Steam`, `SteamSymbol`, `Ubisoft`, `Viveport`, `WargamingGameCenter`, `Xbox`
-
-### Payment & Finance
-`AmericanExpress`, `ApplePay`, `Btc`, `CcDinersClub`, `CcJcb`, `CcMastercard`, `CcPaypal`, `CcVisa`, `Ethereum`, `GooglePay`, `Paypal`, `Stripe`
-
-### Tech Companies
-`Adobe`, `Amazon`, `Apple`, `Atlassian`, `Dropbox`, `Ebay`, `Etsy`, `Google`, `GoogleDrive`, `Meta`, `Microsoft`, `Salesforce`
-
-### Development
-`Angular`, `Bitbucket`, `Bootstrap`, `Centos`, `Codepen`, `Confluence`, `Css3Alt`, `Figma`, `GitAlt`, `Github`, `GithubAlt`, `Gitlab`, `Html5`, `Java`, `Jira`, `Linux`, `NodeJs`, `Npm`, `Sketch`, `Trello`, `Ubuntu`, `Unity`, `WordpressSimple`
-
-### Browsers
-`Chrome`, `Edge`, `FirefoxBrowser`, `Opera`, `Safari`
-
-### Media & Entertainment
-`Bandcamp`, `Behance`, `Deviantart`, `Dribbble`, `Flickr`, `Imdb`, `ItunesNote`, `Soundcloud`, `Spotify`, `Twitch`, `Unsplash`, `VimeoV`, `Youtube`
-
-### Xsolla
-`XsollaLine`, `XsollaSolid`
-
-## Tree Shaking
-
-Import individual icons for optimal bundle size:
-
-```tsx
-// Good - only imports needed icons
-import { Github, Discord } from '@xsolla/xui-icons-brand';
-
-// Avoid - imports all icons
-import * as BrandIcons from '@xsolla/xui-icons-brand';
-```
-
-## Accessibility
-
-- Icons are hidden from screen readers by default (`aria-hidden="true"`)
-- Use `aria-label` when the icon conveys meaningful information
-- When used in buttons/links, the parent element should have the accessible label
-- For decorative brand badges, keep the default hidden behavior