Renders a vendor logo image with configurable size, background style, and fallback initials display for use across comparison tables, dropdowns, and other UI contexts. ## 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'` | Controls container and image dimensions | | `className` | `string` | `''` | Additional CSS classes | | `showBackground` | `boolean` | `true` | Toggles rounded background container | | `backgroundStyle` | `'dark' \| 'light' \| 'white'` | `'dark'` | Background and border color theme | ### `VendorIcon` (exported component) Resolves the logo URL via `getVendorLogo`, proxies it through `getProxiedImageUrl`, and renders an `Image` element. Falls back to a two-character uppercase initials placeholder when no logo is available. ## Usage Example ```typescript import { VendorIcon } from './vendor-icon' // Basic usage with defaults // Large icon with white background, no border // No background — fills parent container directly ``` When `logo` is absent or resolves to falsy, the component renders the first two characters of `vendor.title` (e.g. `"AC"`) as a text placeholder, respecting the active `backgroundStyle` for text color. **Source:** [`vendor-icon.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/vendor-icon.tsx)