// static/shared/js/icons.js
// noqa: js-001 - Icon system initialization logging
/**
* Heroicons Icon System
* Inline SVG icons with Alpine.js magic helper
*/
/**
* Icon definitions (Heroicons outline style)
* Each icon is an SVG template with {{classes}} placeholder
*/
const Icons = {
// Navigation
'home': ``,
'menu': ``,
'search': ``,
'arrow-left': ``,
'arrow-right': ``,
'chevron-down': ``,
'chevron-right': ``,
'chevron-left': ``,
'chevron-up': ``,
'chevron-double-left': ``,
'chevron-double-right': ``,
'zoom-in': ``,
'zoom-out': ``,
'arrows-expand': ``,
// Business & Organization
'office-building': ``,
// User & Profile
'user': ``,
'user-plus': ``,
'user-check': ``,
'user-x': ``,
'users': ``,
'user-circle': ``,
'user-group': ``,
'identification': ``,
'badge-check': ``,
'shield': ``,
'shield-check': ``,
// Actions
'edit': ``,
'switch-horizontal': ``,
'delete': ``,
'trash': ``,
'plus': ``,
'minus': ``,
'check': ``,
'close': ``,
'x': ``,
'x-mark': ``,
'paint-brush': ``,
'arrow-trending-up': ``,
'puzzle-piece': ``,
'arrow-down-tray': ``,
'exclamation-triangle': ``,
'refresh': ``,
'duplicate': ``,
'clipboard-copy': ``,
'eye': ``,
'eye-off': ``,
'filter': ``,
'dots-vertical': ``,
'dots-horizontal': ``,
// E-commerce
'shopping-bag': ``,
'store': ``,
'shopping-cart': ``,
'credit-card': ``,
'currency-dollar': ``,
'currency-euro': ``,
'gift': ``,
'tag': ``,
'truck': ``,
'receipt': ``,
// Inventory & Products
'archive': ``,
'cube': ``,
'collection': ``,
'photograph': ``,
'chart-bar': ``,
'chart-pie': ``,
// Communication
'mail': ``,
'phone': ``,
'chat': ``,
'bell': ``,
'inbox': ``,
'paper-airplane': ``,
// Files & Documents
'document': ``,
'document-text': ``,
'folder': ``,
'folder-open': ``,
'download': ``,
'cloud-download': ``,
'cloud-upload': ``,
'upload': ``,
'save': ``,
// Settings & Tools
'cog': ``,
'adjustments': ``,
'calendar': ``,
'moon': ``,
'sun': ``,
// Design & Theming
'palette': ``,
'color-swatch': ``,
// Location
'map-pin': ``,
'globe': ``,
'globe-alt': ``,
// Status & Indicators
'exclamation': ``,
'information-circle': ``,
'exclamation-circle': ``,
'spinner': ``,
'star': ``,
'heart': ``,
'chat-alt-2': ``,
'chat-alt': ``,
'thumb-up': ``,
'thumb-down': ``,
'flag': ``,
// Links & External
'external-link': ``,
'link': ``,
'logout': ``,
// Developer Tools (Testing Section)
'view-grid': ``,
'beaker': ``,
// Testing & QA Icons
'clipboard-list': ``,
'check-circle': ``,
'check-circle-filled': ``,
'x-circle': ``,
'ban': ``,
'lightning-bolt': ``,
'clock': ``,
'lock-closed': ``,
'lock-open': ``,
'key': ``,
'database': ``,
'light-bulb': ``,
'book-open': ``,
'play': ``,
// Additional UI Icons
'table': ``,
'cursor-click': ``,
'view-grid-add': ``,
'code': ``,
'template': ``,
'translate': ``,
'view-boards': ``,
'menu-alt-2': ``,
// Search & Discovery Icons
'trending-up': ``,
// Review & Social Icons
'camera': ``,
'pencil': ``,
// Trust & Payment Icons
'cash': ``,
'support': ``,
'emoji-happy': ``,
// Onboarding & Setup Icons
'rocket': ``,
'settings': ``,
'plug': ``,
'package': ``,
// Messaging
'chat-bubble-left-right': ``,
'chat-bubble-left': ``
};
/**
* Get icon SVG with custom classes
* @param {string} name - Icon name from Icons object
* @param {string} classes - Tailwind classes (default: 'w-5 h-5')
* @returns {string} SVG markup
*/
function icon(name, classes = 'w-5 h-5') {
const iconTemplate = Icons[name];
if (!iconTemplate) {
console.warn(`Icon "${name}" not found`);
return '';
}
return iconTemplate.replace('{{classes}}', classes);
}
/**
* Alpine.js magic helper
* Usage in Alpine: x-html="$icon('home')" or x-html="$icon('home', 'w-6 h-6')"
*/
document.addEventListener('alpine:init', () => {
// ✅ CORRECT: Return the function directly, not wrapped in another function
Alpine.magic('icon', () => icon);
console.log('✅ Alpine $icon magic helper registered');
});
// Export for use in modules
if (typeof module !== 'undefined' && module.exports) {
module.exports = { icon, Icons };
}
// Make available globally
window.icon = icon;
window.Icons = Icons;
console.log('📦 Icon system loaded');
console.log('📊 Total icons available:', Object.keys(Icons).length);