CODEWITHSUNDEEP
javascriptvue.jsvuejs2nuxt.jsvue-treeselect
SkydersZ
SkydersZ

Reputation: 173

How to customize the folding icons in Vue Treeselect Component?

I have a Vue TreeSelect component in my nuxt application.

The problem is that I want to customize the folding icons in the Treeselect component:

enter image description here

How can I do this ? I tried to modify the css classes, to replace the svg dom child by a custom created with javascript, but I have the impression that this is not the right way to do it...

Edit:

here is the dom structure for the first icon :

enter image description here

As you can see, I can't just change the css class. I need to change the entire svg node.

Upvotes: -3

Views: 980

Answers (1)

SkydersZ
SkydersZ

Reputation: 173

To solve my problem partially, I needed to replace the <svg></svg> node by a <span></span> node :

// Creation of the new span node 
const plusIcon = document.createElement("span");
plusIcon.setAttribute("class", "vue-treeselect__option-arrow");

After that, I needed to retrieve all the differents nodes having the class vue-treeselect__option-arrow :

const treeOptions = treeMenu.getElementsByClassName("vue-treeselect__option-arrow--rotated");

// Replace all the svg elements by span elements
Array.from(treeOptions).forEach((treeOption) => {
  if (!treeOption.getAttribute("class").includes("--rotate")) {
    treeOptions.parentElement.replaceChild(
      plusIcon.cloneNode(true), treeOptions
    );
  }
});

And in the css part, I have replaced the vue-treeselect__option-arrow class :

.vue-treeselect__option-arrow {
  content: url(path/to/my/svg);
}

Upvotes: 0

Related Questions