React app does not render svg icons from external file
My React app renders in Chrome and Android, but not in Firefox. I use an external reference to a static svg file.
<use href="/static/media/icons.2ce40b6f.svg#sun" class="srkBlack" transform="translate(236.4941000749839 64.73127047444365)scale(.4)"></use>
icons.2ce40b6f: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="sun" viewBox="0 0 200 200">
<path style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.4;stroke-opacity:1" d="m 16.136067,15.83614 h 0.09665 v 0.09665 h -0.09665 z m -9.6934884,0.263275 a 9.6572458,9.6572463 0 1 0 19.3144874,0 9.6572458,9.6572463 0 1 0 -19.3144874,0 m 8.6915274,0 a 0.96572559,0.96572565 0 1 0 1.931451,0 0.96572559,0.96572565 0 1 0 -1.931451,0" />
</symbol> </defs> </svg>
css: .srkBlack {
fill:black; stroke:black;
}
Any help would be appreciated
My React app renders in Chrome and Android, but not in Firefox. I use an external reference to a static svg file.
<use href="/static/media/icons.2ce40b6f.svg#sun" class="srkBlack" transform="translate(236.4941000749839 64.73127047444365)scale(.4)"></use>
icons.2ce40b6f:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="sun" viewBox="0 0 200 200">
<path style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.4;stroke-opacity:1"
d="m 16.136067,15.83614 h 0.09665 v 0.09665 h -0.09665 z m -9.6934884,0.263275 a 9.6572458,9.6572463 0 1 0 19.3144874,0 9.6572458,9.6572463 0 1 0 -19.3144874,0 m 8.6915274,0 a 0.96572559,0.96572565 0 1 0 1.931451,0 0.96572559,0.96572565 0 1 0 -1.931451,0" />
</symbol>
</defs>
</svg>
css:
.srkBlack {
fill:black;
stroke:black;
}
Any help would be appreciated
การตอบกลับทั้งหมด (1)
UPDATE: I was able to fix this problem by sending the Icons.svg file thru http://svg.enshrined.co.uk/.
There were a few missing tags that chrome forgave, but Firefox did not.