/**
* Heroicons Helper - Inline SVG Icons
* Usage: icon('home') or icon('home', 'w-6 h-6')
*/
const Icons = {
// Navigation
home: ``,
menu: ``,
search: ``,
// User & Profile
user: ``,
users: ``,
// Actions
edit: ``,
delete: ``,
plus: ``,
check: ``,
close: ``,
// Theme & Settings
sun: ``,
moon: ``,
cog: ``,
// Notifications & Communication
bell: ``,
mail: ``,
// Logout
logout: ``,
// Business/Commerce
'shopping-bag': ``,
cube: ``,
chart: ``,
// Arrows & Directions
'chevron-down': ``,
'chevron-right': ``,
'arrow-left': ``,
// Status & Indicators
'exclamation': ``,
'information-circle': ``,
// Loading
spinner: ``,
// E-commerce Specific
'shopping-cart': ``,
'credit-card': ``,
'currency-dollar': ``,
'gift': ``,
'tag': ``,
'truck': ``,
'receipt': ``,
'clipboard-list': ``,
// Inventory & Products
'collection': ``,
'photograph': ``,
'color-swatch': ``,
'template': ``,
// Analytics & Reports
'trending-up': ``,
'trending-down': ``,
'presentation-chart-line': ``,
'calculator': ``,
// Customer Management
'user-circle': ``,
'user-group': ``,
'identification': ``,
'badge-check': ``,
// Documents & Files
'document': ``,
'folder': ``,
'folder-open': ``,
'download': ``,
'upload': ``,
// Time & Calendar
'calendar': ``,
'clock': ``,
// System & Settings
'database': ``,
'server': ``,
'shield-check': ``,
'key': ``,
'lock-closed': ``,
'lock-open': ``,
// Actions & Interactions
'refresh': ``,
'duplicate': ``,
'eye': ``,
'eye-off': ``,
'filter': ``,
'dots-vertical': ``,
'dots-horizontal': ``,
// Communication
'chat': ``,
'annotation': ``,
'phone': ``,
// Location
'location-marker': ``,
'globe': ``,
// Links & External
'external-link': ``,
'link': ``,
// Status Badges
'star': ``,
'heart': ``,
'flag': ``
};
/**
* 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')"
*/
if (typeof Alpine !== 'undefined') {
document.addEventListener('alpine:init', () => {
Alpine.magic('icon', () => {
return (name, classes) => icon(name, classes);
});
});
}
// Export for use in modules
if (typeof module !== 'undefined' && module.exports) {
module.exports = { icon, Icons };
}
// Make available globally
window.icon = icon;
window.Icons = Icons;
/**
* 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')"
*/
if (typeof Alpine !== 'undefined') {
document.addEventListener('alpine:init', () => {
Alpine.magic('icon', () => {
return (name, classes) => icon(name, classes);
});
});
}
// Export for use in modules
if (typeof module !== 'undefined' && module.exports) {
module.exports = { icon, Icons };
}
// Make available globally
window.icon = icon;
window.Icons = Icons;