IconContext.tsx

Go to the documentation of this file.

"use client";
 
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
 
export type IconStyle = 'material-icons' | 'material-symbols-outlined' | 'material-symbols-rounded' | 'material-symbols-sharp' | 'emoji' | 'lucide';
 
export interface IconTheme {
  id: string;
  name: string;
  description: string;
  style: IconStyle;
  fontFamily: string;
  weight?: number; // 100-700 for Material Symbols
  grade?: number; // -25 to 200 for Material Symbols
  opticalSize?: number; // 20, 24, 40, 48 for Material Symbols
  fill?: boolean; // Fill style for Material Symbols
}
 
export const iconThemes: Record<string, IconTheme> = {
  'material-filled': {
    id: 'material-filled',
    name: 'Material Icons (Filled)',
    description: 'Classic Google Material Design filled icons',
    style: 'material-icons',
    fontFamily: 'Material Icons',
  },
  'material-outlined': {
    id: 'material-outlined',
    name: 'Material Symbols (Outlined)',
    description: 'Modern outlined style with customizable weight',
    style: 'material-symbols-outlined',
    fontFamily: 'Material Symbols Outlined',
    weight: 400,
    grade: 0,
    opticalSize: 24,
    fill: false,
  },
  'material-rounded': {
    id: 'material-rounded',
    name: 'Material Symbols (Rounded)',
    description: 'Friendly rounded edges for a softer look',
    style: 'material-symbols-rounded',
    fontFamily: 'Material Symbols Rounded',
    weight: 400,
    grade: 0,
    opticalSize: 24,
    fill: false,
  },
  'material-sharp': {
    id: 'material-sharp',
    name: 'Material Symbols (Sharp)',
    description: 'Sharp corners for a bold, modern appearance',
    style: 'material-symbols-sharp',
    fontFamily: 'Material Symbols Sharp',
    weight: 400,
    grade: 0,
    opticalSize: 24,
    fill: false,
  },
  'material-rounded-filled': {
    id: 'material-rounded-filled',
    name: 'Material Symbols (Rounded Filled)',
    description: 'Rounded icons with filled style',
    style: 'material-symbols-rounded',
    fontFamily: 'Material Symbols Rounded',
    weight: 400,
    grade: 0,
    opticalSize: 24,
    fill: true,
  },
  'emoji': {
    id: 'emoji',
    name: 'Emoji Icons',
    description: 'Colorful emoji-based icons for a playful look',
    style: 'emoji',
    fontFamily: 'system-ui',
  },
};
 
interface IconContextType {
  iconTheme: IconTheme;
  iconThemeId: string;
  setIconTheme: (themeId: string) => void;
  getIconClass: (iconName: string) => string;
  getIconStyle: () => React.CSSProperties;
}
 
const IconContext = createContext<IconContextType | undefined>(undefined);
 
export function IconProvider({ children }: { children: ReactNode }) {
  const [iconThemeId, setIconThemeId] = useState<string>('material-outlined');
  const [iconTheme, setIconThemeState] = useState<IconTheme>(iconThemes['material-outlined']);
 
  // Load saved icon theme from localStorage on mount
  useEffect(() => {
    const savedIconTheme = localStorage.getItem('iconTheme');
    if (savedIconTheme && iconThemes[savedIconTheme]) {
      setIconThemeId(savedIconTheme);
      setIconThemeState(iconThemes[savedIconTheme]);
      applyIconTheme(iconThemes[savedIconTheme]);
    } else {
      applyIconTheme(iconThemes['material-outlined']);
    }
  }, []);
 
  const applyIconTheme = (theme: IconTheme) => {
    const root = document.documentElement;
    
    // Set CSS variables for icon styling
    root.style.setProperty('--icon-font-family', theme.fontFamily);
    
    if (theme.weight !== undefined) {
      root.style.setProperty('--icon-font-weight', theme.weight.toString());
    }
    
    if (theme.grade !== undefined) {
      root.style.setProperty('--icon-grade', theme.grade.toString());
    }
    
    if (theme.opticalSize !== undefined) {
      root.style.setProperty('--icon-optical-size', theme.opticalSize.toString());
    }
    
    if (theme.fill !== undefined) {
      root.style.setProperty('--icon-fill', theme.fill ? '1' : '0');
    }
 
    // Update the class on the html element
    root.setAttribute('data-icon-style', theme.style);
  };
 
  const setIconTheme = (themeId: string) => {
    if (!iconThemes[themeId]) {
      console.error(`Icon theme "${themeId}" not found`);
      return;
    }
 
    const theme = iconThemes[themeId];
    setIconThemeId(themeId);
    setIconThemeState(theme);
    applyIconTheme(theme);
    localStorage.setItem('iconTheme', themeId);
  };
 
  const getIconClass = (iconName: string): string => {
    if (iconTheme.style === 'emoji') {
      return 'icon-emoji';
    }
    return iconTheme.style;
  };
 
  const getIconStyle = (): React.CSSProperties => {
    const style: React.CSSProperties = {
      fontFamily: iconTheme.fontFamily,
    };
 
    if (iconTheme.weight !== undefined) {
      style.fontWeight = iconTheme.weight;
    }
 
    if (iconTheme.style.startsWith('material-symbols')) {
      style.fontVariationSettings = `'FILL' ${iconTheme.fill ? 1 : 0}, 'wght' ${iconTheme.weight || 400}, 'GRAD' ${iconTheme.grade || 0}, 'opsz' ${iconTheme.opticalSize || 24}`;
    }
 
    return style;
  };
 
  return (
    <IconContext.Provider
      value={{
        iconTheme,
        iconThemeId,
        setIconTheme,
        getIconClass,
        getIconStyle,
      }}
    >
      {children}
    </IconContext.Provider>
  );
}
 
export function useIcon() {
  const context = useContext(IconContext);
  if (!context) {
    throw new Error('useIcon must be used within an IconProvider');
  }
  return context;
}
 
// Helper component for rendering icons
interface IconProps {
  name: string;
  className?: string;
  style?: React.CSSProperties;
  size?: number;
}
 
export function Icon({ name, className = '', style = {}, size = 24 }: IconProps) {
  const { iconTheme, getIconClass, getIconStyle } = useIcon();
 
  // Emoji mapping for common icons
  const emojiMap: Record<string, string> = {
    // Navigation & Actions
    home: '🏠',
    dashboard: '📊',
    menu: '☰',
    arrow_back: '←',
    arrow_forward: '→',
    arrow_upward: '↑',
    arrow_downward: '↓',
    expand_more: '▼',
    expand_less: '▲',
    chevron_right: '›',
    chevron_left: '‹',
    navigation: '🧭',
    rocket_launch: '🚀',
    
    // Account & User
    person: '👤',
    account_circle: '👤',
    badge: '👥',
    group: '👥',
    groups: '👥',
    supervisor_account: '👥',
    admin_panel_settings: '⚙️',
    waving_hand: '👋',
    
    // Shopping & Commerce
    shopping_cart: '🛒',
    shopping_bag: '🛍️',
    point_of_sale: '💰',
    sell: '💰',
    store: '🏪',
    storefront: '🏬',
    business: '🏢',
    payments: '💳',
    
    // Products & Inventory
    inventory: '📦',
    inventory_2: '📦',
    category: '🏷️',
    local_offer: '🏷️',
    label: '🏷️',
    barcode: '▪️',
    qr_code: '▪️',
    fact_check: '✅',
    
    // Reports & Analytics
    assessment: '📈',
    analytics: '📊',
    bar_chart: '📊',
    pie_chart: '📉',
    trending_up: '📈',
    trending_down: '📉',
    insights: '💡',
    lightbulb: '💡',
    tips_and_updates: '💡',
    
    // Communication
    email: '✉️',
    mail: '✉️',
    phone: '📞',
    call: '📞',
    message: '💬',
    chat: '💬',
    sms: '💬',
    campaign: '📢',
    
    // Files & Documents
    description: '📄',
    receipt: '🧾',
    receipt_long: '🧾',
    folder: '📁',
    folder_open: '📂',
    attach_file: '📎',
    menu_book: '📚',
    
    // Actions
    add: '➕',
    add_circle: '➕',
    remove: '➖',
    edit: '✏️',
    delete: '🗑️',
    save: '💾',
    print: '🖨️',
    download: '⬇️',
    upload: '⬆️',
    refresh: '🔄',
    sync: '🔄',
    search: '🔍',
    filter_list: '🔍',
    
    // Status & Alerts
    check: '✓',
    check_circle: '✅',
    close: '✕',
    cancel: '❌',
    error: '❌',
    warning: '⚠️',
    info: 'ℹ️',
    help: '❓',
    notifications: '🔔',
    alarm: '⏰',
    new_releases: '🆕',
    
    // Settings & Tools
    settings: '⚙️',
    tune: '⚙️',
    build: '🔧',
    construction: '🔨',
    computer: '💻',
    
    // Security
    lock: '🔒',
    lock_open: '🔓',
    unlock: '🔓',
    visibility: '👁️',
    visibility_off: '🙈',
    security: '🔐',
    vpn_key: '🔑',
    
    // Time & Calendar
    calendar: '📅',
    calendar_month: '📅',
    calendar_today: '📅',
    schedule: '🕐',
    clock: '🕐',
    access_time: '🕐',
    timer: '⏱️',
    history: '🕰️',
    
    // Location & Map
    location_on: '📍',
    place: '📍',
    map: '🗺️',
    directions: '🧭',
    
    // Media
    image: '🖼️',
    photo: '📷',
    camera: '📷',
    video: '🎥',
    
    // Finance
    credit_card: '💳',
    payment: '💳',
    account_balance: '🏦',
    attach_money: '💵',
    card_giftcard: '🎁',
    
    // Additional POS Help icons
    keyboard_return: '↩️',
    looks_one: '1️⃣',
    looks_two: '2️⃣',
    looks_3: '3️⃣',
    phone_iphone: '📱',
    
    // Misc
    favorite: '❤️',
    star: '⭐',
    bookmark: '🔖',
    flag: '🚩',
    logout: '🚪',
    login: '🚪',
    power_settings_new: '⏻',
  };
 
  if (iconTheme.style === 'emoji') {
    return (
      <span
        className={`icon-emoji ${className}`}
        role="img"
        aria-label={name}
        style={{
          fontSize: `${size}px`,
          lineHeight: 1,
          display: 'inline-block',
          fontFamily: 'Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, Android Emoji, EmojiSymbols, EmojiOne Color, sans-serif',
          ...style,
        }}
      >
        {emojiMap[name] || '📦'}
      </span>
    );
  }
 
  return (
    <span
      className={`${getIconClass(name)} ${className}`}
      style={{
        fontSize: `${size}px`,
        ...getIconStyle(),
        ...style,
      }}
    >
      {name}
    </span>
  );
}
 
export function getIconThemeList() {
  return Object.values(iconThemes).map((theme) => ({
    id: theme.id,
    name: theme.name,
    description: theme.description,
  }));
}