Icon

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

En esta página

Playground

calendar

Icono

Fondo

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.

Hacer y no hacer

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.

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.