Storage Management

/**
 * Check if icon data is loaded and available in storage
 * @param name - Icon name in format "prefix:name" or "@provider:prefix:name"
 * @returns true if icon is loaded, false otherwise
 */
function iconLoaded(name: string): boolean;

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

// Check if icon is loaded
if (iconLoaded("mdi:home")) {
  console.log("Icon is ready to use");
} else {
  console.log("Icon needs to be loaded");
}

// Check with provider
if (iconLoaded("@custom-provider:mdi:account")) {
  console.log("Custom provider icon is loaded");
}

/**
 * Get loaded icon data from storage
 * @param name - Icon name in format "prefix:name" or "@provider:prefix:name"
 * @returns Icon data if available, null if not loaded
 */
function getIcon(name: string): IconifyIcon | null;

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

// Get icon data
const iconData = getIcon("mdi:home");
if (iconData) {
  console.log("Icon dimensions:", iconData.width, "x", iconData.height);
  console.log("Icon SVG body:", iconData.body);
} else {
  console.log("Icon not found in storage");
}

// Use icon data directly in component
const homeIcon = getIcon("mdi:home");
if (homeIcon) {
  <Icon icon={homeIcon} />
}

/**
 * List loaded icons
 * @param provider - Optional provider to filter by (empty string for default provider)
 * @param prefix - Optional prefix to filter by
 * @returns Array of icon names that are loaded
 */
function listIcons(provider?: string, prefix?: string): string[];

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

// List all loaded icons
const allIcons = listIcons();
console.log("All loaded icons:", allIcons);

// List icons from specific prefix
const mdiIcons = listIcons("", "mdi");
console.log("MDI icons:", mdiIcons);

// List icons from custom provider
const customIcons = listIcons("custom-provider");
console.log("Custom provider icons:", customIcons);

// List icons from specific provider and prefix
const specificIcons = listIcons("custom-provider", "custom");
console.log("Specific icons:", specificIcons);

/**
 * Add single icon to storage
 * @param name - Icon name to use when referencing the icon
 * @param data - Icon data containing SVG and metadata
 * @returns true if icon was added successfully, false on error
 */
function addIcon(name: string, data: IconifyIcon): boolean;

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

// Add custom icon
const customIconData = {
  body: '<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>',
  width: 24,
  height: 24
};

const success = addIcon("my-star", customIconData);
if (success) {
  console.log("Icon added successfully");
  // Now can use: <Icon icon="my-star" />
}

// Add icon with prefix
addIcon("custom:star", customIconData);
// Use as: <Icon icon="custom:star" />

// Add icon from loaded data
const existingIcon = getIcon("mdi:home");
if (existingIcon) {
  addIcon("my-home", existingIcon);
}

/**
 * Add icon collection to storage
 * @param data - Icon collection data with prefix and icons
 * @param provider - Optional provider name, empty string for default
 * @returns true if collection was added successfully, false on error
 */
function addCollection(data: IconifyJSON, provider?: string): boolean;

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

// Add complete icon set
const iconSet = {
  prefix: "my-icons",
  icons: {
    star: {
      body: '<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>',
    },
    heart: {
      body: '<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>',
    },
    home: {
      body: '<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>',
    }
  },
  width: 24,
  height: 24
};

const success = addCollection(iconSet);
if (success) {
  console.log("Icon collection added");
  // Now can use: <Icon icon="my-icons:star" />
  // And: <Icon icon="my-icons:heart" />
  // And: <Icon icon="my-icons:home" />
}

// Add collection to custom provider
addCollection(iconSet, "my-provider");
// Use as: <Icon icon="@my-provider:my-icons:star" />

interface IconifyJSON {
  /** Prefix for all icons in this collection */
  prefix: string;
  
  /** Map of icon names to icon data */
  icons: Record<string, IconifyIcon>;
  
  /** Optional aliases that reference other icons */
  aliases?: Record<string, Partial<IconifyIcon> & { parent: string }>;
  
  /** Default width for all icons (can be overridden per icon) */
  width?: number;
  
  /** Default height for all icons (can be overridden per icon) */
  height?: number;
  
  /** Default left offset for all icons */
  left?: number;
  
  /** Default top offset for all icons */
  top?: number;
  
  /** Default horizontal flip for all icons */
  hFlip?: boolean;
  
  /** Default vertical flip for all icons */
  vFlip?: boolean;
  
  /** Default rotation for all icons */
  rotate?: number;
}

interface IconifyIcon {
  /** SVG content inside <svg> element */
  body: string;
  
  /** Icon width */
  width?: number;
  
  /** Icon height */
  height?: number;
  
  /** Left offset */
  left?: number;
  
  /** Top offset */
  top?: number;
  
  /** Horizontal flip */
  hFlip?: boolean;
  
  /** Vertical flip */
  vFlip?: boolean;
  
  /** Rotation in quarter-turns */
  rotate?: number;
}

import { addIcon, addCollection, iconLoaded, getIcon } from "@iconify/react";

// Check before adding to avoid duplicates
if (!iconLoaded("custom:star")) {
  addIcon("custom:star", starIconData);
}

// Batch add related icons using collections
const uiIcons = {
  prefix: "ui",
  icons: {
    close: { body: '<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>' },
    check: { body: '<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>' },
    menu: { body: '<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>' }
  },
  width: 24,
  height: 24
};

addCollection(uiIcons);

// Verify icons are available
console.log("UI icons loaded:", listIcons("", "ui"));