infinity-ui-elements/dist/lib/icons.d.ts

A React TypeScript component library with Tailwind CSS design system

import * as React from "react";
/**
 * Icon component props
 */
export interface IconProps extends React.SVGProps<SVGSVGElement> {
    size?: number | string;
}
/**
 * ==============================================
 * HOW TO ADD A NEW ICON:
 * ==============================================
 *
 * 1. Add your SVG file to: src/assets/icons/{iconName}.svg
 *
 * 2. Copy the SVG content from the file
 *
 * 3. Add it to the iconRegistry below:
 *    iconName: `<svg>...</svg>`,
 *
 * 4. Use it anywhere in your app:
 *    <Icon name="iconName" size={24} />
 *
 * The Icon component will automatically:
 * - Replace hardcoded colors with currentColor
 * - Allow you to control color via className or style
 * - Resize based on the size prop
 * ==============================================
 */
/**
 * Icon registry - maps icon names to their SVG content
 * Add your icons here by copying the SVG content from your icon files
 */
declare const iconRegistry: {
    tick: string;
    check: string;
    add: string;
    info: string;
    exclamation: string;
    close: string;
};
/**
 * Type for available icon names (with autocomplete support)
 */
export type IconName = keyof typeof iconRegistry;
/**
 * Icon component that renders an SVG icon by name
 *
 * Features:
 * - ✓ Automatically converts hardcoded colors to currentColor
 * - ✓ Control color via className (e.g., "text-blue-500")
 * - ✓ Control color via style prop
 * - ✓ Customizable size
 * - ✓ TypeScript autocomplete for icon names
 * - ✓ All standard SVG props supported
 *
 * @example
 * ```tsx
 * // Basic usage
 * <Icon name="tick" size={24} />
 *
 * // With Tailwind color class
 * <Icon name="tick" size={16} className="text-blue-500" />
 *
 * // With inline styles
 * <Icon name="check" size={20} style={{ color: 'red' }} />
 *
 * // With custom props
 * <Icon name="tick" size={32} className="hover:text-green-600 transition-colors" />
 * ```
 */
export interface DynamicIconProps extends Omit<React.SVGProps<SVGSVGElement>, "ref" | "dangerouslySetInnerHTML"> {
    /** Name of the icon to render */
    name: IconName;
    /** Size of the icon (width and height) */
    size?: number | string;
}
export declare const Icon: React.FC<DynamicIconProps>;
/**
 * Get all available icon names from the registry
 * @returns Array of registered icon names
 *
 * @example
 * ```tsx
 * const icons = getAvailableIcons();
 * console.log(icons); // ['tick', 'check', ...]
 * ```
 */
export declare function getAvailableIcons(): IconName[];
/**
 * Check if an icon exists in the registry
 * @param name - Icon name to check
 * @returns true if the icon exists
 *
 * @example
 * ```tsx
 * if (hasIcon('tick')) {
 *   // Icon exists
 * }
 * ```
 */
export declare function hasIcon(name: string): name is IconName;
export { iconRegistry };
//# sourceMappingURL=icons.d.ts.map