Avatar for Username

Zoeken in Support

Vermijd ondersteuningsscams. We zullen u nooit vragen een telefoonnummer te bellen, er een sms naar te sturen of persoonlijke gegevens te delen. Meld verdachte activiteit met de optie ‘Misbruik melden’.

Learn More

Deze conversatie is gearchiveerd. Stel een nieuwe vraag als u hulp nodig hebt.

React app does not render svg icons from external file

  • 1 antwoord
  • 1 heeft dit probleem
  • 3 weergaven
  • Laatste antwoord van 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

Alle antwoorden (1)

hopkinsjj9
hopkinsjj9 Vraageigenaar
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.