SVG tem um elemento muito legal e poderoso chamado . É muito simples no conceito. Ele encontra outro bit de código SVG, referenciado por ID, e o clona dentro do elemento.
O caso de uso mais básico seria: Eu já desenhei esta (s) forma (s) uma vez na página e quero desenhá-la novamente em outro lugar. Vá pegar essa (s) forma (s) e desenhe-a novamente.
Podemos usar essa habilidade como o conceito raiz para (drumroll!) E sistema de ícones inteiro! Podemos assumir todas as formas que pretendemos usar na página em um grande bloco SVG. Vamos envolvê-los todos em uma tag que é uma forma semântica de dizer "Estamos apenas definindo essas coisas para usar mais tarde." Também garante que eles não serão renderizados (mas você também deve fazer display: none;o próprio.
Funciona assim:
Esse xlink:hrefatributo de aparência estranha faz referência a um ID em outro lugar. Esse ID pode estar em um elemento de qualquer forma, como ou , ou pode estar em um grupo de elementos como a .
O melhor de tudo, no caso de um sistema de ícones, pode estar em um elemento. Além de ser semanticamente correto (um ícone é um símbolo, não?), O elemento pode carregar seu próprio atributo viewBox e informações de acessibilidade, como tags e . Isso torna a implementação muito fácil (conforme mostrado acima).
Portanto, você só precisa ter certeza de que isso está definido em algum outro lugar do documento:
Basketball Veja o Pen JoDmd de Chris Coyier (@chriscoyier) no CodePen.