Íconos SVG reutilizables en HTML

Define la forma una vez y luego referénciala donde aparezca el ícono.

<svg aria-hidden="true" width="0" height="0">
  <symbol id="icon-star" viewBox="0 0 24 24">
    <path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/>
  </symbol>
</svg>

<button type="button">
  <svg class="icon" width="16" height="16" aria-hidden="true">
    <use href="#icon-star"/>
  </svg>
  Favorite
</button>

Cómo funciona

1. Un <svg> de tamaño cero con elementos <symbol> es la hoja de sprites.
2. <use href="#id"> estampa una copia; el fill se hereda del CSS.
3. Un ícono con significado necesita título; uno decorativo se oculta.

El intento, en números

Líneas

12

Caracteres a escribir

305

Tokens

73

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 58 segundos.

Escribe este fragmento

Paso 7 de 9 en Medios e incrustaciones; paso 14 de 23 en Semántica y metadatos.

← Anterior Siguiente →