SVG inserido diretamente no documento HTML com JavaScript
Modo de usar
Para incorporar um ícone SVG basta adicionar o atributo icon a um elemento HTML.
Exemplo:
<span icon="email"></span>
Resultado:
Use o elemento <span> nos ícones! Não é correto usar o elemento <i> como indicado nas documentações das fontes de ícones existentes.
O tamanho padrão do SVG é 16. Para alterar adicione o atributo size.
Exemplo:
<span icon="email" size="32"></span>
Resultado:
O atributo size muda o valor do atributo width do SVG.
Também é disponível o atributo top para posicionar icones caso necessário.
Exemplo:
<span icon="email" size="32" top="3"></span> <!-- valor negativo --> <span icon="email" size="32" top="-2"></span>
O attr top adiciona um atributo style com position: relative; e top: com o valor inserido em top.
Todos os SVGs recebem a classe ico, além de uma classe adicional com o valor do atributo icon para identificação. Isso simplifica a definição de estilos para todos os ícones e para ícones individuais.
Exemplo:
/* todos os ícones */
[icon] {
position: relative;
display: inline-block;
text-align: center;
color: darkblue;
}
.ico {
min-width: 1rem;
}
/* icone individual */
[icon=email] {
color: red;
}
.ico.email {
min-width: 1.65rem;
}
Na classe ico que representa o elemento svg, utilize min-width, se utilizar width o atributo size não funcionará corretamente.
Ao incorporar um ícone um atributo aria-label com valor padrão é adicionado. Para substituí-lo basta adicionar atributo aria-label com um novo valor, e o padrão será ignorado.