title: SVG sprite images not showing on iOS & Safari using React
body: <p>I am trying to use my svg images with a sprite file. Importing sprite file in relevant component and using custom Svg component to render images with symbol id's. Svg image dimensions described in css classes. Everything works without any problems in Firefox and Chrome but mobile &amp; desktop Safari does not rendering images. Based on suggestions, tried xmlns:xlink, width, height, viewBox attributes on svg tag. Nothing worked.</p>
  <p>In source code I can see that SVG is present and it's taking space in page. But it's blank.</p>
  <p>I appreciate any suggestions.</p>
  <p>Here is my sprite file content:</p>
  <pre><code>&lt;svg&gt;
    &lt;symbol xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 5 8.586&quot; id=&quot;icon-angle-left&quot;&gt;
      &lt;g&gt;
        &lt;g fill=&quot;none&quot;&gt;
          &lt;path d=&quot;M0 0H6.981V3.491H0z&quot; transform=&quot;translate(0.472 0.707) translate(3.821 3) rotate(90) translate(-2.809 0.331)&quot;&gt;&lt;/path&gt;
          &lt;path stroke=&quot;#555&quot; stroke-linecap=&quot;round&quot; d=&quot;M2577 1784.713l3.586 3.586 3.586-3.586&quot; transform=&quot;translate(0.472 0.707) translate(3.821 3) rotate(90) translate(-2579.998 -1784.713)&quot;&gt;&lt;/path&gt;
        &lt;/g&gt;
      &lt;/g&gt;
    &lt;/symbol&gt;
    &lt;symbol xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 21 21&quot; id=&quot;icon-home&quot;&gt;
      &lt;path fill=&quot;none&quot; d=&quot;M0 0h21v21H0z&quot;&gt;&lt;/path&gt;
      &lt;path fill=&quot;#555&quot; d=&quot;M10.75 5.354l4.375 3.938v6.834h-1.75v-5.25h-5.25v5.25h-1.75V9.291l4.375-3.937m0-2.354L2 10.875h2.625v7h5.25v-5.25h1.75v5.25h5.25v-7H19.5z&quot; transform=&quot;translate(-0.25 -0.375)&quot;&gt;&lt;/path&gt;
    &lt;/symbol&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>Here is my Svg component:</p>
  <pre><code>import React from 'react';
  import './style.scss'; 
  
  const Svg = ({ symbolId, className }) =&gt; {
    return (
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlnsXlink=&quot;http://www.w3.org/1999/xlink&quot; className={className}&gt;
        &lt;use xlinkHref={symbolId}&gt;&lt;/use&gt;
      &lt;/svg&gt;
    );
  };
  </code></pre>
  <p>export default Svg;</p>
  <p>And using it like this;</p>
  <pre><code>import React from 'react';
  import sprite from 'sprites/product-list.svg';
  import Svg from 'shared/Svg';
  
  const MyComponent = () =&gt; {
    return (
      &lt;div&gt;
        &lt;Svg className=&quot;image&quot; symbolId={sprite + &quot;#icon-home&quot;} /&gt;
      &lt;/div&gt;
    );
  };
  
  export default MyComponent;
  </code></pre>