---
import { library, icon } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
export interface Props {
name: string;
class?: string;
size?: number;
title?: string;
}
const { name, class: className = '', size = 24, title } = Astro.props;
function escapeHtml(s: string): string {
return s.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
}
// Add ALL Font Awesome brand icons to library at once
library.add(fab);
const icons = {
// Navigation icons
'arrow-up': '',
'chevron-up': '',
'chevron-down': '',
'arrow-down': '',
'arrow-left': '',
'arrow-right': '',
'arrow-up-right': '',
'chevron-left': '',
'chevron-right': '',
// UI icons
'x': '',
'menu': '',
'search': '',
'search-x': '',
'external-link': '',
'command': '',
'list': '',
'zoom-in': '',
// Theme icons
'sun': '',
'moon': '',
'sun-moon': '',
'palette': '',
// Content icons
'file-text': '',
'file-x': '',
'tag': '',
'link-2': '',
'rss': '',
'atom': '',
'navigation': '',
'git-fork': '',
// Social and brand icons
'github': '',
'gitlab': '',
'folder-git-2': '',
'book-open': '',
'book-text': '',
'folder': '',
'folder-open': '',
'sticky-note': '',
'loader-2': '',
'grid-3x3': '',
// Status and alert icons
'info': '',
'lightbulb': '',
'star': '',
'triangle-alert': '',
'circle-alert': '',
'circle-x': '',
'circle-help': '',
'circle-check': '',
'bug': '',
'code': '',
'quote': '',
};
const iconPath = icons[name as keyof typeof icons];
// Try Font Awesome brands first (for social icons)
const faIcon = icon({ prefix: 'fab', iconName: name as any });
// Use a graceful fallback icon (link-2) if neither FA nor custom icon exists
const fallbackIcon = 'link-2';
const fallbackPath = icons[fallbackIcon];
---
{faIcon ? (
) : iconPath ? (