Iconos

Cada icono de Feitio, dibujado a mano. Busca por nombre, en portugués o inglés, y toca para copiar el código.

Todos los iconos

• Task: copiar el códigofeitio-taskCopied
• Calendar: copiar el códigofeitio-calendarCopied
• Search: copiar el códigofeitio-searchCopied
• Settings: copiar el códigofeitio-slidersCopied
• Create: copiar el códigofeitio-plusCopied
• Done: copiar el códigofeitio-checkCopied
• Close: copiar el códigofeitio-closeCopied
• Warning: copiar el códigofeitio-warnCopied
• Info: copiar el códigofeitio-infoCopied
• Open: copiar el códigofeitio-chevron-downCopied
• Next: copiar el códigofeitio-chevron-rightCopied
• Menu: copiar el códigofeitio-menuCopied

No hay icono con ese nombre. ¿Necesita uno nuevo? Vea cómo solicitarlo, abajo.

Toca un icono para copiar su código.

How to use

Todos los iconos viven en un solo archivo, icons/sprite.svg. Cada uno se llama por nombre, hereda el color de texto circundante y el tamaño de fuente.

<button type="button" class="feitio-button">
  <svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-plus"/></svg>
  Novo agendamento
</button>

• Con una palabra al lado, el icono obtiene aria-hidden="true": la palabra explica.
• Por sí solo, su contenedor lleva el nombre: aria-label en el botón o enlace.
• El tamaño proviene del texto (1em); para otro tamaño, cambia el tamaño de fuente circundante o el inline-size.

Un nuevo icono

Se dibuja un nuevo icono siguiendo las reglas de Iconografía e ilustración: dos trazos en cada unión, inclinados, en el color de texto. El archivo va a icons/<name>.svg, y bun run build reconstruye el sprite; las pruebas de Feitio verifican las reglas.