SVG tiene un elemento muy interesante y poderoso llamado . Es bastante simple en concepto. Encuentra otro bit de código SVG, referenciado por ID, y lo clona dentro del elemento.
El caso de uso más básico sería: Ya dibujé esta (s) forma (s) una vez en la página y quiero dibujarla nuevamente en otro lugar. Ve a buscar esa (s) forma (s) y dibuja de nuevo.
¡Podemos usar esa habilidad como el concepto raíz para (¡redoble de tambores!) ¡Y todo el sistema de iconos! Podemos tomar todas las formas que pretendemos usar en la página en un gran bloque SVG. Los envolveremos todos en una etiqueta que es una forma semántica de decir "Solo estamos definiendo estas cosas para usarlas más adelante". También se asegura de que no se procesen (pero también debería display: none;el propio.
Funciona así:
Ese xlink:hrefatributo de aspecto extraño hace referencia a una identificación en otro lugar. Ese ID podría estar en cualquier elemento de forma, como un o , o podría estar en un grupo de elementos como un .
Lo mejor de todo en el caso de un sistema de iconos es que puede estar en un elemento. Además de ser correcto semánticamente (un icono es un símbolo, ¿no?), El elemento puede llevar su propio atributo viewBox e información de accesibilidad, me gusta y etiquetas. Esto hace que la implementación sea muy fácil (como se muestra arriba).
Por lo tanto, solo debe asegurarse de que esto esté definido en otro lugar del documento:
Basketball Vea el Pen JoDmd de Chris Coyier (@chriscoyier) en CodePen.