# Selector de iconos

> Elige uno de los ~2000 iconos de Lucide en una cuadrícula con buscador. Componente de Pyzed para GUIs de escritorio en Python, con ejemplos y API.

Source: https://albakore.github.io/pyzed/es/library/icon-picker/

:::tip[En pocas palabras]
Una cuadrícula de dibujitos con buscador para elegir un icono.
:::

`ui.IconPicker` es un componente con un buscador, un desplegable de categorías y una cuadrícula con todos los iconos de Lucide incluidos. La búsqueda mira nombres y etiquetas ("person" encuentra `user`), Enter elige la primera coincidencia y `on_change` recibe el nombre del icono en `event.value`. `ui.icon_picker_dialog` lo pone en un diálogo que elige con un clic, y `ui.icon_grid` es la cuadrícula sola, que solo construye las filas visibles.

`ui.IconPicker` · Categoría: [Formularios](https://albakore.github.io/pyzed/es/library/#formularios) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#iconpicker)

**Código:**

```python
ui.IconPicker(value="rocket", columns=10, height=200, clearable=True, on_change=on_change)
```

:::note[Nuevo]
Este componente se añadió hace poco. Cuéntanos qué tal te funciona en el [gestor de incidencias](https://github.com/albakore/pyzed/issues).
:::

## Cuándo usarlo

- Para que el usuario elija el icono de una carpeta, una etiqueta, un atajo o un botón de la barra.
- Muestra el icono actual como un botón y abre `icon_picker_dialog` en una [capa de diálogo](https://albakore.github.io/pyzed/es/library/dialog-layer/) al pulsarlo.

## Uso

```python
import pyzed as pz
from pyzed import ui

class Shortcuts(pz.App):
    def __init__(self):
        self.icon = "rocket"
        self.picking = False

    def pick(self, name):
        self.icon, self.picking = name or "circle-dashed", False

    def view(self):
        page = ui.button("Change icon", lambda: setattr(self, "picking", True), icon=self.icon)
        dialog = ui.icon_picker_dialog(self.icon, self.pick, on_close=lambda: setattr(self, "picking", False))
        return ui.dialog_layer(page, dialog if self.picking else None,
                               on_dismiss=lambda: setattr(self, "picking", False))
```

## Variantes

:::note[Sobre estas capturas]
Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre **Código** bajo una captura para ver el fragmento que la dibuja; los nombres libres como `on_save` son tus propios callbacks.
:::

### Selector

```python
ui.IconPicker(value="rocket", columns=8, height=180, on_change=on_change)
```

```python
ui.IconPicker(value="heart", columns=8, height=180, clearable=True, on_change=on_change)
```

### Piezas

```python
ui.icon_grid(pz.icons.search("arrow")[:24], on_pick, selected="arrow-right", columns=8, height=110)
```

```python
ui.icon_picker_dialog("rocket", on_pick, on_close=on_close, columns=8)
```

## Eventos

Selector de iconos tiene **3 eventos propios**, en la tabla de abajo. Como todo widget, también tiene los **18 eventos comunes** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), que se conectan con `.on(...)`: mira [Eventos](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

Es un `pz.Component`, así que también lanza `on_mount` y `on_unmount`, y sus handlers reciben un `pz.Event` cuyo `value` trae el dato.

| Evento | De | El handler recibe | Cuándo |
| --- | --- | --- | --- |
| `on_change` | `ui.IconPicker` | `(event)` | Recibe `event.value`. |
| `on_pick` | `ui.icon_picker_dialog`, `ui.icon_grid` | `(name)` | Se llama con el nombre del icono pulsado (`""` si se quita). |
| `on_close` | `ui.icon_picker_dialog` | `()` | El botón de cerrar. |

**El handler recibe** es lo que Pyzed le pasa a tu función: `()` es nada. Cualquier handler también puede ser un mensaje (un valor que no se puede llamar), que va a `update()`.

### Manejar los eventos

Los mismos eventos escritos de tres formas. **Imperativa**: métodos de la app que cambian `self`. **Declarativa**: los handlers producen mensajes y un único `update()` decide. **Funcional**: una función pura dibuja un estado inmutable y pide cambios con `set_state(...)`. Mira [Imperativo, declarativo y funcional](https://albakore.github.io/pyzed/es/guides/code-styles/).

**Imperativo:**

```python
class Shortcut(pz.App):
    def __init__(self):
        self.icon = "rocket"
        self.picking = False

    def pick(self, name):                # on_pick: the icon's name ("" when cleared)
        self.icon, self.picking = name or "circle-dashed", False

    def view(self):
        page = ui.button("Change icon", lambda: setattr(self, "picking", True), icon=self.icon)
        dialog = ui.icon_picker_dialog(self.icon, self.pick, on_close=lambda: setattr(self, "picking", False))
        return ui.dialog_layer(page, dialog if self.picking else None,
                               on_dismiss=lambda: setattr(self, "picking", False))
```

**Declarativo:**

```python
from dataclasses import dataclass

@dataclass
class Icon:
    name: str

class Shortcut(pz.App):
    icon = "rocket"

    def update(self, message):
        match message:
            case Icon(name):
                self.icon = name or "circle-dashed"

    def view(self):
        # IconPicker is a pz.Component: its handler gets a pz.Event
        return ui.IconPicker(value=self.icon, height=200, on_change=lambda e: Icon(e.value))
```

**Funcional:**

```python
from dataclasses import dataclass

@dataclass(frozen=True)
class State:
    icon: str = "rocket"

def view(state, set_state):
    return pz.column([
        ui.icon_grid(["rocket", "star", "heart", "bell"], lambda name: set_state(icon=name),
                     selected=state.icon, columns=4, height=60),
        ui.button("Launch", None, icon=state.icon),
    ], spacing=8)
```

## Propiedades y API

### `ui.IconPicker`

```python
class IconPicker
```

Un componente para elegir un icono de Lucide: un buscador (nombres y etiquetas), un desplegable de categorías y una cuadrícula que solo construye las filas visibles. Enter elige la primera coincidencia. `on_change` recibe el nombre del icono (`""` si se quita); devuélvelo en `value`. Ver la página [Selector de iconos](https://albakore.github.io/pyzed/es/library/icon-picker/).

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `value` | `""` | El nombre del icono elegido. |
| `columns` | `8` | Iconos por fila. |
| `height` | `288` | Alto de la cuadrícula. |
| `clearable` | `False` | Muestra un botón que quita el icono. |
| `autofocus` | `False` | Da el foco al buscador al aparecer. |

Eventos: `on_change` ([eventos](#eventos)).

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#iconpicker)

### `ui.icon_picker_dialog`

```python
icon_picker_dialog(
    value,
    on_pick,
    *,
    on_close=None,
    title=None,
    columns=10,
    clearable=True,
    key='icon-picker',
    theme=None,
)
```

Un diálogo con un `IconPicker` que elige con un clic; úsalo como diálogo de `ui.dialog_layer`. El buscador recibe el foco.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `value` | *obligatorio* | El icono actual. |
| `title` | `None` | Por defecto: "Elegir un icono", traducido. |
| `columns` | `10` | Iconos por fila. |
| `clearable` | `True` | Muestra el botón "Sin icono". |
| `key` | `"icon-picker"` | Clave del componente, para varios selectores en una vista. |
| `theme` | `None` | Tema. |

Eventos: `on_pick`, `on_close` ([eventos](#eventos)).

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#icon_picker_dialog)

### `ui.icon_grid`

```python
icon_grid(
    names,
    on_pick,
    *,
    selected=None,
    columns=8,
    cell=34,
    height=288,
    id=None,
    theme=None,
)
```

La cuadrícula de iconos sola, virtualizada: solo se construyen las filas visibles, así que miles de iconos cuestan lo mismo que unos pocos.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `names` | *obligatorio* | Nombres de iconos, en orden. |
| `selected` | `None` | El nombre resaltado. |
| `columns` | `8` | Iconos por fila. |
| `cell` | `34` | Lado de cada celda en píxeles. |
| `height` | `288` | Alto de la cuadrícula. |
| `id` | `None` | Id del desplazable, para `Command.scroll_to`. |
| `theme` | `None` | Tema. |

Eventos: `on_pick` ([eventos](#eventos)).

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#icon_grid)

### `pz.icons.search`

```python
search(query, among=None)
```

Los iconos que coinciden con una búsqueda por nombre y etiqueta, los mejores primero: nombres exactos, luego los que empiezan por la búsqueda, los que tienen todas las palabras y los encontrados por sus etiquetas (`search("person")` encuentra `user`).

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `query` | *obligatorio* | Palabras que deben aparecer todas en el nombre o las etiquetas. |
| `among` | `None` | Buscar solo en estos nombres (por defecto, todos los iconos). |

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/icons/#search)

### `pz.icons.category`

```python
category(key, among=None)
```

Los iconos de una categoría de `CATEGORIES`, ordenados. Un icono puede estar en varias.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `key` | *obligatorio* | Una clave de `CATEGORIES` (`"arrows"`, `"files"`, `"people"`...). |
| `among` | `None` | Mirar solo estos nombres. |

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/icons/#category)

## Relacionados

- [Icono](https://albakore.github.io/pyzed/es/library/icon/): Iconos de Lucide por nombre e imágenes SVG.
- [Capa de diálogo](https://albakore.github.io/pyzed/es/library/dialog-layer/): Centra un diálogo encima de tu vista con el fondo oscurecido.
- [Selector de color](https://albakore.github.io/pyzed/es/library/color-picker/): Elige un color, un degradado o un relleno con máscara; las muestras los enseñan.