The issue I am facing is that firefox does not support # characters in data URIs. Chrome or Safari are totally fine with this.
Our UI guys have used a lot of inlining of SVGs and these all contain data URIS
for example in scss files:
content: url('data:image/svg+xml;utf8,<svg ...</svg>');
and in html files:
<img src='data:image/svg+xml;utf8,<svg width="234px" height="205px"...</svg>'>
And there are 100s of examples like this and none of these work in firefox because they have # character and I get the following error
but when we try %23 in place of that character, the SVGs load correctly.
How can I automate the build so that these get url encoded.
The string replace has to extremely specific and needs to do it only inside img tags in html and url('data:image/svg+xml;utf8 in less files.
This is what I am thinking of doing: find all stroke="# and replace with stroke='%23 and same thing with fill if harder to do with webpack