# Icono

> Iconos de Lucide por nombre e imágenes SVG. Un componente nativo de Pyzed para GUIs de escritorio en Python, con vista previa, ejemplos y su API.

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

:::tip[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](https://lucide.dev); `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](https://albakore.github.io/pyzed/es/library/#contenido) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#icon)

**Código:**

```python
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

```python
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

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

### Tamaño

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

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

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

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

### Color

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

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

```python
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.

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

```python
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](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

## Propiedades y API

### `pz.icon`

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

Un icono de [Lucide](https://lucide.dev). `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 →](https://albakore.github.io/pyzed/es/reference/widgets/#icon)

### `pz.svg`

```python
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 →](https://albakore.github.io/pyzed/es/reference/widgets/#svg)

## Relacionados

- [Botón de icono](https://albakore.github.io/pyzed/es/library/icon-button/): Un botón cuadrado con solo un icono y un tooltip opcional.
- [Imagen](https://albakore.github.io/pyzed/es/library/image/): Imágenes con ajuste, opacidad y radio; un visor con zoom.