# Icon Usage Guide

## Font Awesome Integration

This project uses [Font Awesome](https://fontawesome.com/) (version 6) for icons instead of custom SVGs. This approach provides several benefits:

### Benefits

- **Maintainability**: Icons can be changed easily by modifying class names
- **Consistency**: Ensures consistent icon styling throughout the application
- **Performance**: Optimized icon loading and rendering
- **Extensibility**: Easy to add new icons without creating custom SVGs
- **Accessibility**: Proper accessibility support built-in

### Installation

The project uses Font Awesome via npm:

```bash
npm install @fortawesome/fontawesome-free --save
```

The Font Awesome styles are imported in the main layout file (`src/layouts/BaseLayout.astro`).

### Usage

Icons are implemented using the following pattern:

```html
<i class="fa-solid fa-icon-name" aria-hidden="true"></i>
```

Where:
- `fa-solid` is the icon style (solid, regular, light, etc.)
- `fa-icon-name` is the specific icon name
- `aria-hidden="true"` prevents screen readers from announcing the icon when there is accompanying text

For standalone icons that need to be accessible, use:

```html
<i class="fa-solid fa-icon-name" aria-label="Description of what the icon represents"></i>
```

### Icon Style Guide

To maintain consistency across the application, use these icon styles for common actions:

| Action | Icon | Class |
|--------|------|-------|
| Edit | Pen to Square | `fa-solid fa-pen-to-square` |
| Delete | Trash Can | `fa-solid fa-trash-can` |
| Add | Circle Plus | `fa-solid fa-circle-plus` |
| Settings | Gear | `fa-solid fa-gear` |
| User | User | `fa-solid fa-user` |
| Search | Magnifying Glass | `fa-solid fa-magnifying-glass` |
| Sort | Arrow Up-Down | `fa-solid fa-arrow-up-down` |
| Filter | Filter | `fa-solid fa-filter` |
| Close | X Mark | `fa-solid fa-xmark` |
| Success | Circle Check | `fa-solid fa-circle-check` |
| Error | Circle Exclamation | `fa-solid fa-circle-exclamation` |
| Warning | Triangle Exclamation | `fa-solid fa-triangle-exclamation` |
| Info | Circle Info | `fa-solid fa-circle-info` |

### References

- [Font Awesome Documentation](https://fontawesome.com/docs)
- [Icon Search](https://fontawesome.com/icons)
- [Accessibility with Font Awesome](https://fontawesome.com/docs/web/accessibility)