Como fazer condição para mais de uma classe igual

tentou:

div.innerHTML = '<svg class="' + element.getAttribute('class') + '"><use xlink:href="sprite/sprite.svg#'+ icons +'" /></svg>';     

	ai não faz nem sentido você separar icoMd e icoLg.

>

3 horas atrás, William Bruno disse:

tentou:

div.innerHTML = '<svg class="' + element.getAttribute('class') + '"><use xlink:href="sprite/sprite.svg#'+ icons +'" /></svg>';     

 ai não faz nem sentido você separar icoMd e icoLg.

	 

	Oi William,

	 

	Muito obrigada, sim, ajudou bastante e funcionou, mas tem um porém, a ordem é manter a classe que determina o seu tamanho :( .. no caso tenho essas:

	.ico-sm, .ico-md, .ico-lg, .ico-xl, .ico-90p

	Pensei em filtrar na busca só o que estivesse depois do primeiro espaço, mas se acontecer de em algum lugar, elas terem sido chamadas ao inverso, ferrou.. rsrs... E como se trata de um sistema já existente e com mais desenvolvedores trabalhando, não teria como controlar essa ordem. Por isso que pensei inicialmente, em buscar pelo nome exato da classe e guardar em uma variável. Desculpa não ter explicado em detalhes antes.

Oi Priscila, o que pensei foi algo assim:

<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>

<script>
var SIZE_CLASSES = ['ico-sm', 'ico-md', 'ico-lg', 'ico-xl', 'ico-90p'];
function removeSizeClasses(className) {
  return className.split(' ').filter(item => {
    return SIZE_CLASSES.indexOf(item) === -1
  }).join(' ');
}
function iconesSgv(){
  var elements = document.querySelectorAll("i[class*=ico-]");
  elements.forEach(element => {
    var className = element.getAttribute('class');
    var icons = removeSizeClasses(className);
    console.log('icons', icons);
    var div = document.createElement('div');
    div.innerHTML = '<svg class="' + className + '"><use xlink:href="sprite/sprite.svg#'+ icons +'" /></svg>';
    element.replaceWith(div.firstChild);
  });
};
iconesSgv();
</script>

	Veja que usei uma função para remover as classes de tamanho dinamicamente, ai não importa mais a ordem em que foram declaradas.

Oi... Bom dia!!!

Deu certo, muitoo obrigada mesmo!!!

Estou finalizando esse script e me deparei com outra situação?

Se eu precisasse percorrer e guardar em uma variável parte da chamada de uma classes, no caso parte de uma url, eu consigo?

Por exemplo, hoje eu chamo o ícone pelo nome da classe, mas observei que em alguns casos a classe é um nome e o ícone chamado para ela tem nome diferente de arquivo:

.ico-check {background-image:url(../icon/feather/check-circle.svg);}

.ico-check-in {background-image:url(../icon/feather/check.svg);}

Seria possível pegar somente o check-circle.svg dessa classe para aplicar posteriormente no js?

Como jogar na variável chamada em 'icons', conforme segue abaixo:

div.innerHTML = '<svg class="' + currentClass + '"><use xlink:href="assets/icon/sprite/sprite.svg#'+ icons +'" /></svg>';

>

Em 19/04/2018 at 19:22, William Bruno disse:

tentou:

div.innerHTML = '<svg class="' + element.getAttribute('class') + '"><use xlink:href="sprite/sprite.svg#'+ icons +'" /></svg>';     

 ai não faz nem sentido você separar icoMd e icoLg.

	 

	Oi William,

	 

	Muito obrigada, sim, ajudou bastante e funcionou, mas tem um porém, a ordem é manter a classe que determina o seu tamanho :( .. no caso tenho essas:

	.ico-sm, .ico-md, .ico-lg, .ico-xl, .ico-90p

	Pensei em filtrar na busca só o que estivesse depois do primeiro espaço, mas se acontecer de em algum lugar, elas terem sido chamadas ao inverso, ferrou.. rsrs... E como se trata de um sistema já existente e com mais desenvolvedores trabalhando, não teria como controlar essa ordem. Por isso que pensei inicialmente, em buscar pelo nome exato da classe e guardar em uma variável. Desculpa não ter explicado em detalhes antes.

complicadinho ler atributo de classe css.. ficou assim:

veja que no html gerado final, eu estou sim mantendo a classe de tamanho...

<style>
.ico-check {background-image:url(../icon/feather/check-circle.svg);}
.ico-check-in {background-image:url(../icon/feather/check.svg);}

</style>

<i class="ico-check ico-md"></i>
<i class="ico-check-in ico-lg"></i>
<script>
var SIZE_CLASSES = ['ico-sm', 'ico-md', 'ico-lg', 'ico-xl', 'ico-90p'];
function removeSizeClasses(className) {
  return className.split(' ').filter(item => {
    return SIZE_CLASSES.indexOf(item) === -1
  }).join(' ');
}
function iconesSgv(){
  var elements = document.querySelectorAll("i[class*=ico-]");
  elements.forEach(element => {
    var className = element.getAttribute('class');
    var icons = removeSizeClasses(className);
    var styleClass = findByClassName(icons.replace('icons '))
    var file = styleClass.style.backgroundImage.match(/([^\/]+\.svg)/)[0]
    console.log('file', file);
    var div = document.createElement('div');
    div.innerHTML = '<svg class="' + className + '"><use xlink:href="sprite/sprite.svg#'+ file +'" /></svg>';
    element.replaceWith(div.firstChild);
  });
};
function findByClassName(className) {
  var sheets = Array.from(document.styleSheets)
  var styleClass;
  sheets.forEach((sheet) => {
    var rules = Array.from(sheet.rules);
    styleClass = rules.find((rule) => {
      return rule.selectorText === `.${className}`
    })
  })
  return styleClass;
}
iconesSgv();
</script>