IconPickerModal

Selector de íconos con búsqueda y filtrado, renderizado en un modal a pantalla completa. Carga el registro de íconos de la aplicación y permite buscar por nombre, etiqueta o tag. Los resultados pueden filtrarse por tipo de ícono (onlyTypes) o por flags de características (onlyWith). Al seleccionar un ícono se llama a onClose con el objeto del ícono elegido.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el modal está visible. | | onClose | (icon?: any) => void | Sí | — | Se llama cuando el modal se cierra. Recibe el objeto del ícono seleccionado o nada si se cancela. | | title | string | No | "Seleccionar ícono" | Título mostrado en el encabezado del modal. | | subtitle | string | No | — | Subtítulo mostrado en el encabezado. | | backdropStyle | React.CSSProperties | No | — | Estilos en línea para el backdrop del modal. | | windowStyle | React.CSSProperties | No | — | Estilos en línea fusionados en la ventana del modal. | | closeButtonStyle | React.CSSProperties | No | — | Estilos para el botón de cierre. | | closeIcon | string | No | — | Nombre del ícono del botón de cierre. | | closeIconPaths | any[] | No | — | Rutas de ícono personalizadas para el botón de cierre. | | closeIconSize | number | No | — | Tamaño del ícono del botón de cierre. | | zIndex | number | No | 999999 | z-index CSS del overlay del modal. | | id | string | No | — | id HTML del elemento modal. | | fullScreen | boolean | No | — | Cuando es true, el modal ocupa toda la pantalla. | | searchBarWidth | number \| string | No | — | Ancho de la barra de búsqueda. | | onlyTypes | string[] | No | [] | Filtra íconos solo a los que coincidan con estos valores de tipo (ej. ['singleColor', 'multiColor']). | | onlyWith | string[] | No | [] | Filtra íconos solo a los que tengan estos flags de característica (ej. ['wrapper', 'inverted']). |

Uso

Básico

import React from 'react';
import IconPickerModal from '@/components/modals/IconPickerModal';

export default function Example() {
  const [open, setOpen] = React.useState(false);
  const [selectedIcon, setSelectedIcon] = React.useState(null);

  return (
    <>
      <button onClick={() => setOpen(true)}>Pick Icon</button>
      <IconPickerModal
        isOpen={open}
        onClose={(icon) => {
          if (icon) setSelectedIcon(icon);
          setOpen(false);
        }}
        title="Select an Icon"
      />
    </>
  );
}

Filtrado por tipo

<IconPickerModal
  isOpen={open}
  onClose={(icon) => {
    if (icon) setSelectedIcon(icon);
    setOpen(false);
  }}
  onlyTypes={['singleColor']}
  onlyWith={['wrapper']}
/>