# Icon

Una pequeña ilustración a mano alzada que acompaña una palabra. Ayuda a la reconocimiento; la palabra explica.

## Playground

```html
<span class="feitio-inline" data-gap="1" style="font-size: var(--feitio-font-size-h3)"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-calendar"></use></svg><span>calendar</span></span>
```

## Cuándo usarlo

-   Al lado de una palabra: en un botón, un elemento de navegación, una etiqueta de estado.
-   Por sí sola, solo cuando el significado es universal (búsqueda, cerrar) y el control tiene un nombre para lectores de pantalla.

## Cuándo no usarlo

-   **Para decorar** un encabezado o un párrafo.
-   **Para ilustrar** una pantalla vacía: use las ilustraciones (EmptyState).
-   **De otro conjunto:** no hay icono listo para usar al lado de los dibujados.

## Ejemplos

### Tres tamaños

Pequeño (16px), el tamaño del texto circundante (sin atributo) y grande (32px). Siempre en el color del texto.

Mostrar código

```html
<svg class="feitio-icon" data-size="small" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
<svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
<svg class="feitio-icon" data-size="large" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
```

Cada icono, con búsqueda y su código, está en el [catálogo de iconos](/es/resources/icones/).

## Hacer y no hacer

Do

Calendar

Icono y palabra juntos, en el mismo color.

Don’t

### General settings

Un ícono naranja decorando un encabezado: no ayuda a la reconocimiento y gasta el naranja.

## Accesibilidad

-   El icono siempre está `aria-hidden="true"`: la palabra al lado o el `aria-label` del botón, da el nombre.
-   En React, el nombre del ícono se verifica con TypeScript.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-icon"`

obligatorio

Trazo a mano alzada, en el color del texto.

`data-size`

none, `"small"`, `"large"`

Tamaño de texto (sin atributo), 16px o 32px.

`aria-hidden="true"`

siempre

El ícono va junto; la palabra da el nombre.

`use href`

`sprite.svg#feitio-<nome>`

¿Qué ícono.