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

This thread was archived. Please ask a new question if you need help.

React app does not render svg icons from external file

  • 1 reply
  • 1 has this problem
  • 3 views
  • Last reply by 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 Question owner
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.