Selector de iconos

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 · Referencia completa →

Vista previa

Código

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

Nuevo

Este componente se añadió hace poco. Cuéntanos qué tal te funciona en el gestor de incidencias.

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 al pulsarlo.

Uso

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

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

columns=8

Código

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

clearable=True

Código

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

Piezas

ui.icon_grid

Código

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

ui.icon_picker_dialog

Código

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 y Eventos de cada componente.

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.

Imperativo

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

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

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

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.

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).

Referencia completa →

ui.icon_picker_dialog

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).

Referencia completa →

ui.icon_grid

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).

Referencia completa →

pz.icons.search

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 →

pz.icons.category

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 →

Relacionados

IconoIconos de Lucide por nombre e imágenes SVG.

Capa de diálogoCentra un diálogo encima de tu vista con el fondo oscurecido.

Selector de colorElige un color, un degradado o un relleno con máscara; las muestras los enseñan.