Iconos

Código

Copiar el marcado

<ul class="luz-icon-grid">
  <li class="luz-icon-item">
    <span class="luz-icon-display"><svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 5v14M5 12h14"/></svg></span>
    <span class="luz-icon-name" id="icon-plus">Plus</span>
    <button class="luz-copy-btn" type="button" id="icon-plus-copy" aria-labelledby="icon-plus-copy icon-plus" data-copy="&lt;svg …&gt;…&lt;/svg&gt;">Copy SVG</button>
  </li>
</ul>

Los mismos iconos como sprite: pégalo una vez en la página y luego dibuja cada uno con <use>. El sprite solo funciona en el mismo documento (href="#id"); los navegadores bloquean un <use> que apunte a un archivo de otro origen, incluido un CDN.

<svg width="0" height="0" aria-hidden="true" focusable="false">
  <symbol id="luz-icon-menu" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></symbol>
  <symbol id="luz-icon-close" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></symbol>
  <!-- …the rest of the set, one symbol each -->
</svg>

<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><use href="#luz-icon-cart"/></svg>

Un icono junto a una etiqueta y otro aislado. El nombre del botón procede de su texto, así que asigna un nombre al botón que solo contiene un icono mediante la clase .u-sr-only, no con aria-label: el texto de la etiqueta se traduce con la página.

<!-- With a label: the icon is 16 px inside a button -->
<button class="luz-btn luz-btn--primary" type="submit">
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 4h2.5l2.2 10.5h9.6L19.5 7H6.2"/><circle cx="9" cy="19" r="1.4"/><circle cx="17" cy="19" r="1.4"/></svg>
  Add to cart
</button>

<!-- Icon only: the name is real text, hidden from the eye -->
<button class="luz-btn luz-btn--ghost" type="button">
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
  <span class="u-sr-only">Menu</span>
</button>

Dos iconos apuntan al final de la línea: chevron-end y arrow-end, marcados con data-luz-flip. En texto de derecha a izquierda, LUZ refleja cualquier elemento con ese atributo mediante la regla siguiente, en la capa de utilidades de core, así que no tienes que escribir nada.

Añade el atributo a cualquier icono tuyo que apunte al final de la línea.

:where([data-luz-flip]):dir(rtl) {
  transform: scaleX(-1);
}

Variantes y opciones

No hay modificadores. La cuadrícula muestra tantas columnas de al menos 100 px como permita el ancho.

Cómo funciona

Una lista <ul> de iconos con los estilos de components/icon-grid.css. Los botones para copiar son botones para copiar que activa clipboard.js.

• Cada botón incluye el SVG del icono, con los caracteres de escape, en data-copy. En esta página un script lo rellena a partir del icono que hay junto al botón, de modo que la página no lleva cada icono dos veces.
• Los iconos son propios de LUZ, dibujados sobre una cuadrícula de 24 × 24 con un trazo redondeado de 1,5 px en currentColor. No forman parte de ningún paquete ni se carga ningún archivo: copia el SVG o el sprite en tu página.
• El tamaño del icono es de 24 × 24 px tal como está escrito y de 16 px dentro de un .luz-btn. Para que un icono siga el tamaño del texto, establece width="1.5em" height="1.5em".

Sin JavaScript

Los botones para copiar quedan ocultos. La cuadrícula sigue mostrando todos los iconos y sus nombres.

Teclado y ARIA

Pulsa Tab para llegar a cada botón para copiar y Enter o Espacio para copiar el SVG.

• El nombre de cada botón combina su propio texto con el nombre del icono mediante aria-labelledby: «Copy SVG Plus».
• Los iconos tienen aria-hidden="true" y focusable="false": su nombre es el texto que aparece debajo o el texto .u-sr-only del botón que los contiene.
• Los iconos de información y advertencia siempre van acompañados de texto. Un glifo aislado no dice nada a quien no puede ver su forma o su color: coloca el texto a su lado o asigna al icono independiente role="img" y un nombre.
• El resultado de cada copia se anuncia en una región dinámica cortés.

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa una cuadrícula de iconos para que se pueda explorar un conjunto de iconos y copiar el que se necesite.

Cuándo no usarlo

No la uses para disponer iconos que realizan acciones: es un catálogo, no una barra de herramientas.

• Para una fila de acciones, usa botones con texto en un grupo de acciones.
• No uses nunca un icono como única etiqueta de una acción: ponle un nombre en texto, visible o en una etiqueta oculta con la clase .u-sr-only.
• Para un logotipo o una ilustración, usa un <img> o un SVG con su tamaño original.
• Si necesitas cientos de iconos, usa tu propio conjunto.

Qué hacer y qué no

Cómo escribir el contenido

Si puedes, nombra cada icono con una sola palabra que describa lo que muestra: «Plus», «Check», «Arrow».

• Usa nombres únicos dentro de cada cuadrícula.
• Dibuja todos los iconos con la misma cuadrícula y el mismo trazo, usando currentColor, para que sigan el color del texto en todos los modos.
• Acompaña Info y Warning con palabras en el mismo lugar. Son formas, no colores de estado: las alertas mantienen los suyos.

Contraste y foco

Los iconos y sus nombres usan el color de texto secundario de la página, por lo que un icono dibujado con currentColor mantiene un contraste superior a 3:1. En otros contextos, el icono adopta el color de su texto y, por tanto, su contraste: un icono aislado que transmita significado necesita 3:1.

Medido a partir de los valores de los tokens de cada modo, redondeado hacia abajo. Los requisitos son los mínimos de WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.

• Foco: solo los botones para copiar lo reciben, con su anillo de foco.
• Bordes: el borde del elemento (--luz-divider) es decorativo: el nombre identifica cada icono.

Tokens que usa

Los 6 tokens que lee components/icon-grid.css, agrupados por familia. Cada familia enlaza a su página, con los valores de cada modo. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color

--luz-divider, --luz-text-secondary

Spacing and sizing

--luz-space-md, --luz-space-xs

Typography

--luz-text-xs

Radius

--luz-radius-md

El teclado y ARIA están en la pestaña Código.