<!-- source-hash: 4c2f6ad8526965aa76d0f4c7d5c51f06 -->
A React SVG icon component that renders an edit/pencil icon with a document background, commonly used for profile editing functionality.

## Key Components

- **EditProfileIcon**: Main functional component that renders the edit profile SVG icon
- **EditProfileIconProps**: TypeScript interface extending standard SVG props with optional className
- **SVG Paths**: Two path elements creating the document outline and pencil/edit symbol

## Usage Example

```typescript
import { EditProfileIcon } from './edit-profile-icon';

// Basic usage
<EditProfileIcon />

// With custom styling
<EditProfileIcon 
  className="text-blue-500 hover:text-blue-700" 
  width={32} 
  height={32}
/>

// With click handler
<EditProfileIcon 
  className="cursor-pointer"
  onClick={() => handleEditProfile()}
/>

// As a button icon
<button className="p-2 rounded">
  <EditProfileIcon className="w-5 h-5" />
  Edit Profile
</button>
```

The component uses a 24x24 viewBox with white (#FAFAFA) fill color and accepts all standard SVG properties through prop spreading, making it highly customizable for different UI contexts.