<!-- source-hash: c7331d428951f92ddbb4f85c3451443c -->
A React component that renders an SVG icon representing an empty or placeholder vendor logo with a subtle checkerboard pattern background.

## Key Components

- **EmptyVendorIcon**: Main functional component that renders a 24x24 SVG icon
- **EmptyVendorIconProps**: TypeScript interface defining optional `className` prop
- **SVG Pattern**: Uses a base64-encoded PNG image with checkerboard pattern as fill
- **Responsive Design**: Scalable vector graphic with proper aspect ratio

## Usage Example

```typescript
import { EmptyVendorIcon } from './empty-vendor-icon';

// Basic usage
function VendorCard() {
  return (
    <div className="vendor-card">
      <EmptyVendorIcon />
      <span>No vendor logo</span>
    </div>
  );
}

// With custom styling
function StyledVendorIcon() {
  return (
    <EmptyVendorIcon className="w-8 h-8 opacity-50 rounded-md" />
  );
}

// In a list of vendors
function VendorList({ vendors }) {
  return (
    <div className="grid grid-cols-3 gap-4">
      {vendors.map(vendor => (
        <div key={vendor.id}>
          {vendor.logo ? (
            <img src={vendor.logo} alt={vendor.name} />
          ) : (
            <EmptyVendorIcon className="border rounded" />
          )}
        </div>
      ))}
    </div>
  );
}
```

The component is perfect for displaying placeholder graphics in vendor lists, partner grids, or anywhere a default logo state is needed.