IconGrid

Storybook

Go to Story

IconGridProps

Defined in: src/components/IconGrid/IconGrid.tsx:212

Properties

Property	Type	Defined in
searchTerm?	string	src/components/IconGrid/IconGrid.tsx:213
icons?	object[]	src/components/IconGrid/IconGrid.tsx:214
onValueChange?	(value) => void	src/components/IconGrid/IconGrid.tsx:215
columns?	number	src/components/IconGrid/IconGrid.tsx:216
visibleRows?	number	src/components/IconGrid/IconGrid.tsx:217
rowHeight?	number	src/components/IconGrid/IconGrid.tsx:218
showTooltip?	boolean	src/components/IconGrid/IconGrid.tsx:219

---

IconSearchGridProps

Defined in: src/components/IconGrid/IconSearchGrid/IconSearchGrid.tsx:13

Extends

• Omit<IconGridProps, "searchTerm">

Properties

Property	Type	Inherited from	Defined in
icons?	object[]	IconGridProps.icons	src/components/IconGrid/IconGrid.tsx:214
onValueChange?	(value) => void	IconGridProps.onValueChange	src/components/IconGrid/IconGrid.tsx:215
columns?	number	IconGridProps.columns	src/components/IconGrid/IconGrid.tsx:216
visibleRows?	number	IconGridProps.visibleRows	src/components/IconGrid/IconGrid.tsx:217
rowHeight?	number	IconGridProps.rowHeight	src/components/IconGrid/IconGrid.tsx:218
showTooltip?	boolean	IconGridProps.showTooltip	src/components/IconGrid/IconGrid.tsx:219
searchPlaceholder?	string	-	src/components/IconGrid/IconSearchGrid/IconSearchGrid.tsx:14

---

IconData

type IconData = typeof iconsData[number];

Defined in: src/components/IconGrid/IconGrid.tsx:27

---

IconGrid()

function IconGrid(__namedParameters): Element;

Defined in: src/components/IconGrid/IconGrid.tsx:255

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.

Parameters

Parameter	Type
__namedParameters	IconGridProps

Returns

Element

Examples

// Basic usage with all icons
<IconGrid onValueChange={(icon) => setSelectedIcon(icon)} />

// With custom icons and search
<IconGrid
  icons={customIcons}
  searchTerm="home"
  onValueChange={handleIconSelect}
/>

// Custom dimensions
<IconGrid
  columns={10}
  visibleRows={4}
  rowHeight={40}
  showTooltip={false}
/>

---

IconSearchGrid()

function IconSearchGrid(__namedParameters): Element;

Defined in: src/components/IconGrid/IconSearchGrid/IconSearchGrid.tsx:39

Icon grid with integrated search input and debounced filtering.

Combines a search input with the IconGrid component.

Parameters

Parameter	Type
__namedParameters	IconSearchGridProps

Returns

Element

Examples

// Basic usage
<IconSearchGrid onValueChange={(icon) => setIcon(icon)} />

// Custom placeholder and dimensions
<IconSearchGrid
  searchPlaceholder="Find your perfect icon..."
  columns={8}
  visibleRows={6}
  onValueChange={handleSelection}
/>