<!-- source-hash: 732bf385525fa3e93c77e6491c7b1034 -->
A React SVG icon component that renders a vendor directory icon with a package/box and magnifying glass design, commonly used for vendor or directory listing interfaces.

## Key Components

- **VendorDirectoryIcon**: Main React functional component that renders an SVG icon
- **VendorDirectoryIconProps**: TypeScript interface defining optional props for customization
  - `className`: Optional CSS class name for styling
  - `width`: Icon width in pixels (default: 20)
  - `height`: Icon height in pixels (default: 20)

## Usage Example

```typescript
import { VendorDirectoryIcon } from './vendor-directory-icon';

// Basic usage with default size (20x20)
<VendorDirectoryIcon />

// Custom size and styling
<VendorDirectoryIcon 
  width={32} 
  height={32} 
  className="text-blue-500 hover:text-blue-700" 
/>

// In a button or navigation element
<button className="flex items-center gap-2">
  <VendorDirectoryIcon width={16} height={16} />
  <span>Vendor Directory</span>
</button>
```

The icon uses `currentColor` for the fill, making it easy to style with CSS text color properties. The SVG maintains its aspect ratio and scales cleanly at different sizes.