import {
  Canvas,
  Meta,
  Story,
  Stories,
  Controls,
} from '@storybook/addon-docs/blocks';

<Meta title="Documentation/Style/Icons" />

# <img src="./BmsIcon.png" /> Icons

BMS UI uses the Lucide library for icons, and we recommend you do the same for visual consistency.

All the available icons : <a href="https://lucide.dev/icons/">https://lucide.dev/icons/</a>

Installation guide : <a href="https://lucide.dev/guide/installation#vue">https://lucide.dev/guide/installation#vue</a>

```
npm i -D lucide-vue-next
```

## Usage exemple

```jsx
<script>
import { ChefHat } from 'lucide-vue-next'
</script>

<template>
  <h2> <ChefHat /> My recipes </h2>
</template>
```

## Recommendation

## 1️⃣ Keep the Visual Style as Simple as Possible

| Rule                                                                                                                         | Why it matters                                                   | Example                                                      |
| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------ |
| **Pick the simplest icon** – a clean outline without extra adornments.                                                       | Reduces cognitive load and improves legibility on small screens. | “Edit” → `Pencil` instead of `PencilPlus`.                   |
| **Limit variants** – use a single style (outline, filled, or two‑tone) for a given concept.                                  | Prevents confusion caused by multiple looks for the same action. | “Delete” → always `Trash` (outline).                         |
| **Maintain consistent sizing** – stick to either 16 px or 24 px depending on context, never arbitrary sizes.                 | Guarantees uniform alignment across components.                  | Action buttons → 24 px; list items → 16 px.                  |
| **Avoid icon + text combos** unless the text adds essential information (e.g., “Export PDF”).                                | The icon alone should convey the meaning.                        | “Download” → just the `Download` icon.                       |
| **Ensure sufficient contrast** – use the accent colour or black/white based on background, meeting a ≥ 4.5:1 contrast ratio. | Makes the UI accessible for colour‑blind or low‑vision users.    | Dark background → white icon; light background → black icon. |

## 3️⃣ Recommended Icon‑to‑Action Mapping

| Action                 | Recommended Lucide Icon                       | Variant (outline / fill)             | Suggested Size                | Usage Note                                                    |
| ---------------------- | --------------------------------------------- | ------------------------------------ | ----------------------------- | ------------------------------------------------------------- |
| **Edit**               | `Pencil`                                      | Outline                              | 24 px (button) / 16 px (list) | Used to modify an existing item.                              |
| **Delete**             | `Trash`                                       | Outline                              | 24 px (button) / 16 px (list) | Always paired with a confirmation modal.                      |
| **Confirm / Save**     | `Check`                                       | Fill (to indicate an “active” state) | 24 px                         | Can replace the word “Save” on primary action bars.           |
| **Cancel / Close**     | `X` _(alias `Close`)_                         | Outline                              | 24 px                         | Closes dialogs or cancels an operation.                       |
| **Add / Create**       | `Plus`                                        | Outline                              | 24 px                         | Prefer the plain `Plus` over `PlusCircle` for minimalism.     |
| **Download**           | `Download`                                    | Outline                              | 24 px                         | Placed next to a file‑download link.                          |
| **Export**             | `Upload` _(or `Share2` depending on context)_ | Outline                              | 24 px                         | Use `Upload` for exporting data, `Share2` for sharing a link. |
| **Search**             | `Search`                                      | Outline                              | 24 px                         | Visible even when the input field is empty.                   |
| **Filter**             | `Filter`                                      | Outline                              | 24 px                         | Appears beside a “Filter” button.                             |
| **Preview**            | `Eye`                                         | Outline                              | 24 px                         | Lets users preview content without editing.                   |
| **Expand / Collapse**  | `ChevronDown` / `ChevronUp`                   | Outline                              | 16 px (inside lists)          | Indicates accordion or dropdown state.                        |
| **Open External Link** | `ExternalLink`                                | Outline                              | 16 px                         | Shows next to a link that opens a new tab/window.             |

> **Tip:** If you ever need an icon that Lucide doesn’t provide, create one that follows the same visual language (2 px stroke, rounded corners, no fill) to stay consistent with the rest of the set.

---

### 📌 Quick Checklist

1. **Choose the simplest outline icon** for the action.
2. **Standardise size & stroke width** (`16 px` or `24 px`, `strokeWidth={2}`).
3. **Respect colour contrast** (dark icon on light background, light icon on dark background).
4. **Import icons centrally** and re‑export them.
5. **Add visual regression tests** for every icon used in the UI.

Following these guidelines will keep the UI clean, professional, and accessible while leveraging the full power of the Lucide icon library. 🎨🚀
