Icono

En pocas palabras

Dibujos pequeños (una carpeta, una campana, un engranaje) de una biblioteca de más de 1.500.

pz.icon(name) dibuja uno de los más de 1.500 iconos de Lucide; color toma por defecto el color del texto. pz.svg(source) dibuja cualquier SVG desde una ruta o bytes, teñido con color si quieres.

pz.icon · Categoría: Contenido · Referencia completa →

Vista previa

Código

pz.row([
    pz.icon("sparkles", size=28, color="#e5c07b"),
    pz.icon("git-branch", size=28, color="#a1c181"),
    pz.icon("folder-open", size=28, color="#74ade8"),
    pz.icon("bug", size=28, color="#d07277"),
    pz.icon("terminal", size=28, color="#c678dd"),
    pz.svg("logo.svg", width=40, height=40),
], spacing=20, align="center")

Cuándo usarlo

• Dentro de botones, filas y cabeceras. Ejecuta pyzed icons para buscar los nombres.

Uso

import pyzed as pz

pz.row([
    pz.icon("sparkles", size=28, color="#e5c07b"),
    pz.icon("git-branch", size=28, color="#a1c181"),
    pz.icon("folder-open", size=28, color="#74ade8"),
    pz.icon("bug", size=28, color="#d07277"),
    pz.icon("terminal", size=28, color="#c678dd"),
    pz.svg("logo.svg", width=40, height=40),
], spacing=20, align="center")

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.

Tamaño

size=12

Código

pz.icon("sparkles", size=12)

size=16

Código

pz.icon("sparkles", size=16)

size=24

Código

pz.icon("sparkles", size=24)

size=40

Código

pz.icon("sparkles", size=40)

Color

color="#a1c181"

Código

pz.icon("git-branch", size=24, color="#a1c181")

color="#d07277"

Código

pz.icon("bug", size=24, color="#d07277")

color="#74ade8"

Código

pz.icon("folder-open", size=24, color="#74ade8")

SVG

color pinta cada píxel visible del SVG de un color y deja los transparentes, como el tinte de un icono. Un SVG con fondo relleno, como logo.svg, queda como una placa lisa.

pz.svg("logo.svg")

Código

pz.svg("logo.svg", width=48, height=48)

color="#e5c07b"

Código

shapes = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">'
          '<circle cx="7" cy="7" r="5"/><rect x="12" y="12" width="10" height="10" rx="2"/></svg>')
pz.svg(shapes, width=48, height=48, color="#e5c07b")

Eventos

Icono no tiene eventos propios: muestra lo que le das. 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.

Propiedades y API

pz.icon

icon(name, *, size=16, color=None)

Un icono de Lucide. color por defecto es el color del texto que lo rodea.

Propiedad	Por defecto	Descripción
name	obligatorio	Nombre del icono (pyzed icons los lista).
size	16	Tamaño en píxeles.
color	None	Color.

Referencia completa →

pz.svg

svg(
    source,
    *,
    width=None,
    height=None,
    color=None,
    content_fit=None,
    opacity=1.0,
    rotation=0.0,
)

Una imagen SVG.

Propiedad	Por defecto	Descripción
source	obligatorio	Ruta a un .svg, el código SVG como texto (empieza por <) o bytes.
width	None	Ancho: píxeles, "fill", "shrink" o "fill:N" (proporción).
height	None	Alto: píxeles, "fill", "shrink" o "fill:N" (proporción).
color	None	Si se indica, tiñe todo el SVG de ese color (útil para iconos monocromos).
content_fit	None	"contain", "cover", "fill", "none" o "scale-down".
opacity	1.0	Opacidad de 0 a 1.
rotation	0.0	Rotación en grados.

Referencia completa →

Relacionados

Botón de iconoUn botón cuadrado con solo un icono y un tooltip opcional.

ImagenImágenes con ajuste, opacidad y radio; un visor con zoom.