Change icon structure in javascript

Asked

Viewed 384 times

1

I’m starting in development and I’m on a mission I’m banging my head and I don’t know how to finish.

I need to change tags <i> for <svg><use></svg>. That way I stop calling class and I call upon the id, as follows code below.

I would like to manipulate by js. Wherever there is <i class="ico-nomedoicone"> in HTML, be changed to

<svg class="icon"><use xlink:href="icons/icons.svg#icon-nomedoicone"/></svg>

Could someone help me with a code idea?

I thought of something like this...

var i = document.querySelectorAll("i");
        for(var i=0;i<=i.length;i++) {
            if(i[s].className == "ico-") { 
            i[i].innerHTML = "<svg class='icon'><use xlink:href='icons/icons.svg#icon-italic'/></svg>"; 
        }
    }
javascript

  • There are 2 problems: you use i for two different things, and the comparison with == will not consider partial coincidence of the strings.

2 answers

1

You can use the method replaceWith.

<!DOCTYPE hml>
<html>
    <head>
        <title>Title of the document</title>
    </head>

    <body>
        <span>Span (Not replaced)</span>
        <i>Italic (Not replaced)</i>
        <i class="icon-android">Icon (Replace)</i>
        <i class="icon">Icon (Not replaced)</i>
        <i class="icon-test">Second Icon (Replace)</i>

        <button type="button">Substituir icons</button>

        <script>
            const btn = document.querySelector("button");

            btn.addEventListener("click", () => {
                var elements = document.querySelectorAll("i[class*=icon-]");

                elements.forEach(element => {
                    let div = document.createElement("div");
                    div.innerHTML = "<svg class=\"icon\"><use xlink:href='android-icon.svg#android'/></svg>";

                    element.replaceWith( div.firstChild );
                })
            });
        </script>
    </body>
</html>

It is necessary that you create an element (with the document.createElement) temporary, if you pass the html "direct" Javascript will consider as string and write the code on the screen.

For demo follow the steps below:

  1. Copy and paste the above code into a page .html
  2. Download the image https://cdn.svgporn.com/logos/android-icon.svg
  3. Add the downloaded image to the same directory where you created the .html above.
  4. Access through your server.

  • Thanks for the help, I tested here, but nothing yet, does not appear the icon!

  • @Priscilaneu The code is all OK. Check if only the code <svg class="icon"><use xlink:href="icons/icons.svg#icon-nomedoicone"/></svg> works. I added a step by step for you to check the demo.

0

Another way is by using createDocumentFragment(). In the example below I included a <circle> for illustration only, you should delete.

let els = document.querySelectorAll("i[class*='icon-']");
let frag = document.createDocumentFragment();

for(let item of els){
   let svg = '<svg class="icon"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /><use xlink:href="icons/icons.svg#'+item.classList+'" /></svg>';
   item.innerHTML = svg;
   frag.appendChild(item.removeChild(item.firstChild));
   item.parentNode.replaceChild(frag, item);
}
<i class="icon-nomedoicone">elemento 1</i>
<i class="icon-italic">elemento 2</i>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.