# @k8slens/lds-icons

> React icon components for the Lens Design System.

SVG icons as React components, organized by category. All icons support customization via className and standard SVG props.

## Installation

```bash
npm install @k8slens/lds-icons
```

### Peer Dependencies

```bash
npm install react react-dom clsx
```

## Setup

```tsx
import "@k8slens/lds-icons/lib/es/index.css";
```

## Usage

Icons are organized by category namespace:

```tsx
import { misc } from "@k8slens/lds-icons";

const { LockIcon } = misc;

export const MyComponent = () => <LockIcon />;
```

## Icon Reference

All icons are exported with an "Icon" suffix (e.g., `DeleteIcon`, `LockIcon`).

### action
User-interactive icons for tasks or commands.

| Icon | When to Use |
|------|-------------|
| `CopyPaste` | Copy-to-clipboard or duplicate item actions |
| `Delete` | Destructive actions that remove items. Pair with confirmation |
| `Download` | Download files or export data |
| `Edit` | Enter edit mode or modify content |
| `Reactivate` | Reactivate disabled items or resume processes |
| `Repeat` | Retry, refresh, or loop functionality |
| `ThumbUp` | Positive feedback, approval, or like |
| `ThumbDown` | Negative feedback or disapproval |

### base
Core brand icons and logos.

| Icon | When to Use |
|------|-------------|
| `Logo` | Lens logo in headers, footers, brand identifier |
| `LoopLogo` | Loop product branding |
| `LensIdeLogo` | Lens IDE branding |

### commerce
Payment and transaction icons.

| Icon | When to Use |
|------|-------------|
| `CreditCard` | Payment methods, billing settings, add card |
| `CreditCardOff` | Missing payment, expired card, payment disabled |
| `Receipt` | Invoices, transaction history, billing receipts |

### display
Theme and display mode icons.

| Icon | When to Use |
|------|-------------|
| `DarkMode` | Theme switcher - dark mode option |
| `LightMode` | Theme switcher - light mode option |
| `NightSightAuto` | Theme switcher - system/auto option |

### idp
Identity provider icons for social login.

| Icon | When to Use |
|------|-------------|
| `Apple` | Sign in with Apple button |
| `Github` | Sign in with GitHub button |
| `Google` | Sign in with Google button |

### navigation
UI navigation and interaction icons.

| Icon | When to Use |
|------|-------------|
| `ArrowUp` | Collapse, sort ascending, scroll up |
| `ArrowDown` | Expand, dropdown trigger, sort descending |
| `ArrowForward` | Next step, continue, navigate forward |
| `Menu` | Toggle hamburger/side navigation |
| `ContextMenu` | Overflow actions, additional options |
| `Close` | Dismiss modals, panels, notifications |
| `Show` | Reveal hidden content (passwords) |
| `Hide` | Hide sensitive content (passwords) |
| `Preview` | Preview mode before finalizing |

### status
State and feedback icons.

| Icon | When to Use |
|------|-------------|
| `Spinner` | Loading states. Animates automatically |
| `Info` | Informational messages, tooltips, help hints |
| `Warning` | Cautionary states needing attention (not errors) |
| `Success` | Success states, completed operations |
| `Check` | Checkmarks in lists, selected states |

### user
User identity and account icons.

| Icon | When to Use |
|------|-------------|
| `Person` | User profile, account settings, avatar placeholder |
| `Email` | Email fields, contact info, messages |
| `License` | License management, subscriptions, agreements |
| `Lock` | Password fields, security, protected content |
| `Key` | API keys, access tokens, credentials |
| `Verified` | Verified accounts, trusted status badges |
| `StylusNote` | Digital signatures, sign documents |
| `Dialpad` | OTP/2FA code entry, PIN input |

### misc
Miscellaneous icons.

| Icon | When to Use |
|------|-------------|
| `Event` | Calendar events, scheduling, dates |
| `Awesome` | Featured content, highlights, promotions |

## SVGIcon Base Component

For custom SVG icons:

```tsx
import { SVGIcon } from "@k8slens/lds-icons";

<SVGIcon className="my-icon">
  <path d="..." />
</SVGIcon>
```

## Documentation

- [Lens Design System](https://lens-design-system.k8slens.dev/)

## Optional

- [npm Package](https://www.npmjs.com/package/@k8slens/lds-icons)