Embeded SVG icons cause rendering issues on reponse other than 200

[WengerK]

Motivation/Probleme

When no SVG icons are generated, the page embed the 404 page into the current page.

For now, we have to add the following code to works with SVGIcon

<!-- Toolbox svg icons -->
<script type="text/javascript">
window.svgPath = "/{{ directory }}/build/icons/icons.svg";
</script> 

The problem is that the code will fetch the given path & it will append the results to the page, even with a non 2xx response is given .... Then it will append a 404 embed into the current page !

Resolutions

Check the response code before append it into the page.

[Yago]

You can manually add a test into your assets/svg/svg-icons.js like :

const svgIcons = () => {
  const ajax = new XMLHttpRequest();
  const svgPath = window.svgPath || 'icons/icons.svg';
  ajax.open('GET', svgPath, true);
  ajax.send();
  ajax.onload = function (e) {
    if (200 >= ajax.status < 300) { // ← here
      var div = document.createElement('div');
      div.innerHTML = ajax.responseText;
      document.body.insertBefore(div, document.body.childNodes[0]);
    } // ← end here
  };
};

export default svgIcons;

We must add that to the generator too 😉