Como fazer condição para mais de uma classe igual
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();Discussão (5)
Carregando comentários...