mirror of
https://github.com/acedanger/finance.git
synced 2025-12-05 22:50:12 -08:00
2.3 KiB
2.3 KiB
Icon Usage Guide
Font Awesome Integration
This project uses Font Awesome (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:
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:
<i class="fa-solid fa-icon-name" aria-hidden="true"></i>
Where:
fa-solidis the icon style (solid, regular, light, etc.)fa-icon-nameis the specific icon namearia-hidden="true"prevents screen readers from announcing the icon when there is accompanying text
For standalone icons that need to be accessible, use:
<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 |