# 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
