Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Oi,
Estou batendo cabeça com algo que deva ser simples, mas eu não sei.. rsrs...
Estou transformando chamadas de ícones em svgs inline através de javascript, está funcionando, mas o porém é que tenho mais de uma classe junto que determina tamanho do ícones e eu desejaria manter essa classe.
Tenho o seguinte código, ele está funcionando, porém executa uma vez só e não sei como fazer a partir de agora.
HTML antes do script:
<i class="ico-activity ico-md"></i>
<i class="ico-folder ico-lg"></i>
<i class="ico-zap ico-md"></i>
<i class="ico-add-version ico-lg"></i>
<i class="ico-folder-mac ico-lg"></i>
HTML após script:
<svg class="ico-md"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sprite/sprite.svg#activity"></use></svg>
<svg class="ico-md"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sprite/sprite.svg#folder"></use></svg>
<svg class="ico-md"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sprite/sprite.svg#zap"></use></svg>
<svg class="ico-md"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sprite/sprite.svg#add-version"></use></svg>
<svg class="ico-md"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sprite/sprite.svg#folder-mac"></use></svg>
Código Javascript atual:
function iconesSgv(){
var elements = document.querySelectorAll("i[class*=ico-]");
elements.forEach(element => {
var icoMd = document.querySelector(".ico-md");
var icoLg = document.querySelector(".ico-lg");
var icons = element.getAttribute('class').replace('ico-', '').split(' ')[0];
var div = document.createElement('div');
if(icoMd){
div.innerHTML = '<svg class="ico-md"><use xlink:href="sprite/sprite.svg#'+ icons +'" /></svg>';
element.replaceWith(div.firstChild);
}else if(icoLg){
div.innerHTML = '<svg class="ico-lg"><use xlink:href="sprite/sprite.svg#'+ icons +'" /></svg>';
element.replaceWith(div.firstChild);
}
});
};
iconesSgv();Carregando comentários...