IconPickerField

IconPickerField muestra el ícono seleccionado actualmente en un tile de 80×80. Si no hay ícono seleccionado renderiza un placeholder punteado con el texto "toca para seleccionar". Al hacer clic en el tile se abre el IconPickerModal en pantalla completa. Hacer clic en el ícono seleccionado limpia el valor (llama a onChange sin argumentos).

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | Sí | — | Nombre del ícono seleccionado actualmente (como lo usa el componente Icon). | | onChange | (optionName?: string) => void | Sí | — | Llamado con el nombre del ícono al seleccionar, o sin argumento al limpiar. | | label | string | No | — | Etiqueta mostrada sobre el campo. | | description | string | No | — | Texto de ayuda mostrado debajo del campo. | | onlyTypes | string[] | No | — | Filtra el selector para mostrar solo tipos específicos de íconos (ej. ['singleColor', 'multiColor']). | | onlyWith | string[] | No | — | Filtra el selector para mostrar solo íconos con tags específicos (ej. ['wrapper', 'inverted']). | | containerStyle | React.CSSProperties | No | — | Estilos del FieldContainer exterior. | | headerStyle | React.CSSProperties | No | — | Estilos del área de encabezado del campo. | | bodyStyle | React.CSSProperties | No | — | Estilos del área de cuerpo del campo. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del contenedor exterior. |

Uso

Básico

import React, { useState } from 'react';
import IconPickerField from '@/components/fields/IconPickerField';

export default function Example() {
  const [icon, setIcon] = useState('');

  return (
    <IconPickerField
      label="Ícono de acción"
      value={icon}
      onChange={(name) => setIcon(name ?? '')}
    />
  );
}

Filtrado solo a íconos de color único

<IconPickerField
  label="Ícono de categoría"
  value={icon}
  onChange={(name) => setIcon(name ?? '')}
  onlyTypes={['singleColor']}
  description="Solo están disponibles íconos de color único."
/>