<!-- source-hash: e4eef23a5c497e61aefbbd0674fc83a8 -->
A React component that renders an X (close/cancel) icon as an SVG with customizable dimensions and styling.

## Key Components

- **XIcon**: Main functional component that renders the X icon
- **XIconProps**: TypeScript interface defining component props
  - `width`: Icon width in pixels (default: 16)
  - `height`: Icon height in pixels (default: 16) 
  - `className`: CSS class string for styling

## Usage Example

```typescript
import { XIcon } from './x-icon';

// Default size (16x16)
<XIcon />

// Custom size
<XIcon width={24} height={24} />

// With custom styling
<XIcon 
  width={20} 
  height={20} 
  className="text-red-500 hover:text-red-700" 
/>

// As a close button
<button onClick={onClose}>
  <XIcon width={18} height={18} className="opacity-60 hover:opacity-100" />
</button>
```

The icon features a circular background with an X symbol in the center, using a light fill color (#FAFAFA). The SVG maintains proper aspect ratio and scales cleanly at different sizes.