Nested svg conversion fails due to react-fontawesome/FontAwesome 5 ::before svg pseudo-element

[JohnDDuncanIII]

Use case: description, code

jsfiddle

react-fontawesome generates DOM elements that look like

---

Expected behavior

The dom-to-image conversion works.

---

Actual behavior (stack traces, console logs etc)

The dom-to-image conversion fails due to

TypeError: Cannot set property className of #<SVGElement> which has only a getter
    at clonePseudoElement (dom-to-image.js:261)
    at dom-to-image.js:251
    at Array.forEach (<anonymous>)
    at clonePseudoElements (dom-to-image.js:250)

clonePseudoElements => clone.className = clone.className + ' ' + className;

is the error line since svg elements do not have a className

className can also be an instance of SVGAnimatedString if the element is an SVGElement. It is better to get/set the className of an element using Element.getAttribute and Element.setAttribute if you are dealing with SVG elements. However, take into account that Element.getAttribute returns null instead of "" if the element has an empty class attribute.

https://developer.mozilla.org/en-US/docs/Web/API/Element/className#Notes

So, I think this should probably be something like

clone.setAttribute("class", (clone.getAttribute("class") || '') + ' ' + className);

---

Library version

2.6.0

---

Browsers

• Chrome 86.0.4240.111

---

Related Pull Requests

#190
#250
#327

Since I need to use this for some production functionality for a product launch coming up, I am going to use https://github.com/1904labs/dom-to-image-more mentioned in #250 (comment)!