<!-- source-hash: f84ca33f36e32d62304615a416d5acac -->
Renders a vendor logo icon with configurable size, background style, and fallback initials when no logo is available.

## Key Components

### `VendorIconProps`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `vendor` | `VendorWithMedia & { id?, title, slug?, logo? }` | — | Vendor data including logo URL |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'l' \| 'xl'` | `'md'` | Icon container size |
| `className` | `string` | `''` | Additional CSS classes |
| `showBackground` | `boolean` | `true` | Toggles container background/border |
| `backgroundStyle` | `'dark' \| 'light' \| 'white'` | `'dark'` | Container background variant |

### Size Map
| Size | Container | Image (px) |
|------|-----------|------------|
| `xs` | 24×24 | 16×16 |
| `sm` | 32×32 | 20×20 |
| `md` | 40×40 | 32×32 |
| `lg` | 48×48 | 40×40 |
| `xl` | 64×64 | 40×40 |

### `VendorIcon` (named export)
The primary export. Resolves the logo via `getVendorLogo`, proxies the URL via `getProxiedImageUrl`, and falls back to a two-character uppercase initials placeholder when no logo is found.

## Usage Example

```typescript
import { VendorIcon } from './vendor-icon'

// Default dark background, medium size
<VendorIcon vendor={vendor} />

// White background, large, no border
<VendorIcon
  vendor={vendor}
  size="lg"
  backgroundStyle="white"
  showBackground={true}
/>

// Logo only, no background (e.g. inside a styled card)
<VendorIcon
  vendor={vendor}
  size="sm"
  showBackground={false}
  className="rounded-full"
/>
```

> When `logoUrl` resolves to `null` or `undefined`, the component renders a dark/light pill with the first two characters of `vendor.title` (e.g. `"MI"` for *Microsoft*).