API Loading

/**
 * Load multiple icons from API
 * @param icons - Array of icon names to load
 * @param callback - Optional callback when loading completes
 * @returns Function to abort the loading operation
 */
function loadIcons(
  icons: string[], 
  callback?: IconifyIconLoaderCallback
): IconifyIconLoaderAbort;

type IconifyIconLoaderCallback = (
  loaded: IconifyIconName[],
  missing: IconifyIconName[],
  pending: IconifyIconName[]
) => void;

type IconifyIconLoaderAbort = () => void;

interface IconifyIconName {
  provider: string;
  prefix: string;
  name: string;
}

import { loadIcons } from "@iconify/react";

// Load icons without callback
const abort = loadIcons([
  "mdi:home",
  "mdi:account", 
  "mdi:settings"
]);

// Load icons with callback
loadIcons([
  "mdi:home",
  "mdi:account",
  "mdi:settings"
], (loaded, missing, pending) => {
  console.log("Loaded icons:", loaded);
  console.log("Missing icons:", missing);
  console.log("Still pending:", pending);
  
  // All requested icons are now available
  if (missing.length === 0 && pending.length === 0) {
    console.log("All icons loaded successfully");
  }
});

// Load icons and abort if needed
const abortLoading = loadIcons(["mdi:home", "mdi:account"]);

// Cancel loading after 5 seconds
setTimeout(() => {
  abortLoading();
  console.log("Loading cancelled");
}, 5000);

// Load from different providers
loadIcons([
  "@custom-provider:icons:home",
  "@another-provider:ui:button",
  "mdi:default-provider-icon"
]);

/**
 * Load single icon from API using Promise
 * @param icon - Icon name to load
 * @returns Promise that resolves with icon data or rejects if not found
 */
function loadIcon(icon: string): Promise<IconifyIcon>;

import { loadIcon } from "@iconify/react";

// Load single icon with Promise
try {
  const iconData = await loadIcon("mdi:home");
  console.log("Icon loaded:", iconData);
  // Use iconData directly: <Icon icon={iconData} />
} catch (error) {
  console.error("Failed to load icon:", error);
}

// Load icon in React component
function MyComponent() {
  const [iconData, setIconData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    loadIcon("mdi:home")
      .then(data => {
        setIconData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error("Icon load failed:", error);
        setLoading(false);
      });
  }, []);
  
  if (loading) return <div>Loading icon...</div>;
  
  return iconData ? <Icon icon={iconData} /> : <div>Icon not found</div>;
}

// Load multiple icons with Promise.all
async function loadMultipleIcons() {
  try {
    const icons = await Promise.all([
      loadIcon("mdi:home"),
      loadIcon("mdi:account"),
      loadIcon("mdi:settings")
    ]);
    
    console.log("All icons loaded:", icons);
    return icons;
  } catch (error) {
    console.error("Failed to load some icons:", error);
  }
}

/**
 * Add custom API provider
 * @param provider - Provider identifier
 * @param config - Provider configuration
 * @returns true if provider was added successfully, false on error
 */
function addAPIProvider(
  provider: string, 
  config: PartialIconifyAPIConfig
): boolean;

interface PartialIconifyAPIConfig {
  /** Array of API resource URLs */
  resources: string[];
  
  /** Index of current resource (for rotation) */
  index?: number;
  
  /** Request timeout in milliseconds */
  timeout?: number;
  
  /** Rotate resources after each request */
  rotate?: number;
  
  /** Use random resource instead of rotation */
  random?: boolean;
  
  /** Allow data after timeout */
  dataAfterTimeout?: boolean;
}

import { addAPIProvider } from "@iconify/react";

// Add custom API provider
const success = addAPIProvider("my-company", {
  resources: [
    "https://api.mycompany.com/icons",
    "https://backup-api.mycompany.com/icons"
  ],
  timeout: 5000,
  rotate: 1 // Rotate to next resource after each request
});

if (success) {
  console.log("Custom provider added");
  // Now can use: <Icon icon="@my-company:icons:logo" />
}

// Add provider with multiple resources for redundancy
addAPIProvider("enterprise", {
  resources: [
    "https://icons-api-1.enterprise.com/v1",
    "https://icons-api-2.enterprise.com/v1",
    "https://icons-api-3.enterprise.com/v1"
  ],
  timeout: 3000,
  random: true, // Use random resource for load balancing
  dataAfterTimeout: true // Accept data even if it arrives after timeout
});

// Load icons from custom provider
loadIcons(["@my-company:brand:logo", "@enterprise:ui:dashboard"]);

/**
 * Set custom icon loader function
 * @param loader - Function to load single icon
 */
function setCustomIconLoader(loader: IconifyCustomIconLoader): void;

/**
 * Set custom icons loader function for batch loading
 * @param loader - Function to load multiple icons
 */
function setCustomIconsLoader(loader: IconifyCustomIconsLoader): void;

type IconifyCustomIconLoader = (
  name: string,
  prefix: string,
  provider: string
) => Promise<IconifyIcon | null>;

type IconifyCustomIconsLoader = (
  names: string[],
  prefix: string,
  provider: string
) => Promise<(IconifyIcon | null)[]>;

import { setCustomIconLoader, setCustomIconsLoader } from "@iconify/react";

// Set custom single icon loader
setCustomIconLoader(async (name, prefix, provider) => {
  console.log(`Loading icon: ${name} from ${prefix} (provider: ${provider})`);
  
  try {
    // Custom loading logic - fetch from your API
    const response = await fetch(`/api/icons/${prefix}/${name}`);
    if (!response.ok) return null;
    
    const iconData = await response.json();
    return iconData;
  } catch (error) {
    console.error("Custom loader failed:", error);
    return null;
  }
});

// Set custom batch loader for better performance
setCustomIconsLoader(async (names, prefix, provider) => {
  console.log(`Batch loading ${names.length} icons from ${prefix}`);
  
  try {
    // Batch request to your API
    const response = await fetch(`/api/icons/${prefix}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ icons: names })
    });
    
    if (!response.ok) return names.map(() => null);
    
    const data = await response.json();
    return names.map(name => data[name] || null);
  } catch (error) {
    console.error("Custom batch loader failed:", error);
    return names.map(() => null);
  }
});

// Custom loader for database icons
setCustomIconLoader(async (name, prefix, provider) => {
  if (prefix !== "db-icons") return null;
  
  try {
    const iconRecord = await db.icons.findOne({ name });
    if (!iconRecord) return null;
    
    return {
      body: iconRecord.svg_content,
      width: iconRecord.width || 24,
      height: iconRecord.height || 24
    };
  } catch (error) {
    console.error("Database loader failed:", error);
    return null;
  }
});

import { addAPIProvider, loadIcons, _api } from "@iconify/react";

// Get API configuration
const config = _api.getAPIConfig(""); // Empty string for default provider
console.log("Default API config:", config);

// List all available providers
const providers = _api.listAPIProviders();
console.log("Available providers:", providers);

// Configure custom fetch function (for Node.js or custom HTTP handling)
_api.setFetch(async (url, options) => {
  console.log("Custom fetch:", url);
  
  // Use custom fetch implementation
  const response = await fetch(url, {
    ...options,
    headers: {
      ...options?.headers,
      'User-Agent': 'MyApp/1.0'
    }
  });
  
  return response;
});

// Monitor icon loading
loadIcons(["mdi:home", "mdi:account"], (loaded, missing, pending) => {
  console.log("Loading status:");
  console.log("- Loaded:", loaded.map(icon => `${icon.prefix}:${icon.name}`));
  console.log("- Missing:", missing.map(icon => `${icon.prefix}:${icon.name}`));
  console.log("- Pending:", pending.map(icon => `${icon.prefix}:${icon.name}`));
});

import { loadIcon, loadIcons } from "@iconify/react";

// Handle Promise rejection
async function safeLoadIcon(name: string) {
  try {
    const icon = await loadIcon(name);
    return icon;
  } catch (error) {
    console.warn(`Failed to load icon "${name}":`, error);
    return null; // Return null instead of throwing
  }
}

// Handle callback errors
loadIcons(["mdi:home", "nonexistent:icon"], (loaded, missing, pending) => {
  if (missing.length > 0) {
    console.warn("Some icons could not be loaded:", missing);
    
    // Provide fallback behavior
    missing.forEach(icon => {
      console.log(`Missing icon: ${icon.prefix}:${icon.name}`);
    });
  }
  
  if (loaded.length > 0) {
    console.log("Successfully loaded:", loaded);
  }
});

// Timeout handling
const abortController = new AbortController();

// Set timeout for loading
setTimeout(() => {
  abortController.abort();
  console.log("Icon loading timed out");
}, 10000);

// Note: AbortController integration depends on custom loader implementation