IconGrid

Storybook

Go to Story

IconGridProps

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

Properties

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

---

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:211
onValueChange?	(value) => void	IconGridProps.onValueChange	src/components/IconGrid/IconGrid.tsx:212
columns?	number	IconGridProps.columns	src/components/IconGrid/IconGrid.tsx:213
visibleRows?	number	IconGridProps.visibleRows	src/components/IconGrid/IconGrid.tsx:214
rowHeight?	number	IconGridProps.rowHeight	src/components/IconGrid/IconGrid.tsx:215
showTooltip?	boolean	IconGridProps.showTooltip	src/components/IconGrid/IconGrid.tsx:216
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:252

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}
/>