Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

React app does not render svg icons from external file

  • 1 baphendule
  • 1 inale nkinga
  • 1 view
  • Igcine ukuphendulwa ngu hopkinsjj9

hopkinsjj9
hopkinsjj9
more options

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

All Replies (1)

hopkinsjj9
hopkinsjj9 Umnikazi wombuzo
more options

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.