<!-- source-hash: 740df77a6d8e5bcddfedd8abd3e5952f -->
A customizable React SVG component that renders the OpenMSP logo with configurable colors for different parts of the design.

## Key Components

- **`OpenmspLogo`** - Main React functional component that renders the logo SVG
- **`OpenmspLogoProps`** - TypeScript interface extending SVG props with custom color options

**Props:**
- `className` - Optional CSS class name for styling
- `frontBubbleColor` - Color for the front bubble elements (default: black)
- `innerFrontBubbleColor` - Color for inner front bubble (default: white)  
- `backBubbleColor` - Color for the back bubble (default: white)
- `color` - General color prop (inherited from SVGProps)
- All standard SVG element props via spread operator

## Usage Example

```typescript
import { OpenmspLogo } from './openmsp-logo';

// Basic usage with defaults
<OpenmspLogo className="w-24 h-24" />

// Custom colored version
<OpenmspLogo 
  frontBubbleColor="#3B82F6"
  innerFrontBubbleColor="#EFF6FF"
  backBubbleColor="#1E40AF"
  className="logo-header"
/>

// With additional SVG props
<OpenmspLogo 
  width={120}
  height={120}
  frontBubbleColor="#10B981"
  onClick={() => console.log('Logo clicked')}
/>
```

The component maintains a fixed viewBox (97x96) while allowing flexible sizing through props, making it suitable for various UI contexts like headers, buttons, or brand displays.