@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
47 lines (46 loc) • 1.25 kB
TypeScript
import { IconName } from 'lucide-react/dynamic';
import { iconsData } from '../IconPicker/iconsData';
export type IconData = (typeof iconsData)[number];
export interface IconGridProps {
searchTerm?: string;
icons?: IconData[];
onValueChange?: (value: IconName) => void;
columns?: number;
visibleRows?: number;
rowHeight?: number;
showTooltip?: boolean;
}
/**
* Virtualized grid component for displaying and selecting icons.
*
* Features search filtering, virtualization for performance, and customizable dimensions.
* Uses React Query to load icon data when no custom icons are provided.
*
* @example
* ```tsx
* // Basic usage with all icons
* <IconGrid onValueChange={(icon) => setSelectedIcon(icon)} />
* ```
*
* @example
* ```tsx
* // With custom icons and search
* <IconGrid
* icons={customIcons}
* searchTerm="home"
* onValueChange={handleIconSelect}
* />
* ```
*
* @example
* ```tsx
* // Custom dimensions
* <IconGrid
* columns={10}
* visibleRows={4}
* rowHeight={40}
* showTooltip={false}
* />
* ```
*/
export declare const IconGrid: ({ searchTerm, icons, onValueChange, columns, visibleRows, rowHeight, showTooltip, }: IconGridProps) => import("react").JSX.Element;