feat: add Font Awesome integration and usage guide to documentation

docs/icon-usage.md

@@ -0,0 +1,68 @@
+# 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)

package-lock.json

@@ -11,6 +11,7 @@
         "@astrojs/cloudflare": "^12.5.1",
         "@astrojs/node": "^9.2.1",
         "@astrojs/react": "^4.2.5",
+        "@fortawesome/fontawesome-free": "^6.7.2",
         "@nanostores/react": "^1.0.0",
         "@prisma/client": "^6.7.0",
         "@radix-ui/react-dialog": "^1.1.13",
@@ -826,6 +827,15 @@
       "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
       "license": "MIT"
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@img/sharp-libvips-linux-x64": {
       "version": "1.0.4",
       "cpu": [

package.json

@@ -24,6 +24,7 @@
     "@astrojs/cloudflare": "^12.5.1",
     "@astrojs/node": "^9.2.1",
     "@astrojs/react": "^4.2.5",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@nanostores/react": "^1.0.0",
     "@prisma/client": "^6.7.0",
     "@radix-ui/react-dialog": "^1.1.13",