title: React + SVG with "defs" -- styles are ALWAYS ignored
body: <p>Here's one of my original SVG:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"&gt;
  &lt;style type="text/css"&gt;
      .st0{fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
  &lt;/style&gt;
  &lt;g&gt;
      &lt;path class="st0" d="M34.2,19h-4l-0.6-2.5c-0.2-0.9-1-1.5-1.9-1.5h-3.9c-0.9,0-1.7,0.6-1.9,1.5L21.3,19h-4c-1.7,0-3,1.3-3,3v12
          c0,0.6,0.4,1,1,1h21c0.6,0,1-0.4,1-1V22C37.2,20.3,35.9,19,34.2,19z"/&gt;
      &lt;rect x="17.2" y="17" class="st0" width="2" height="2"/&gt;
      &lt;path class="st0" d="M27.2,19h-3c-0.6,0-1-0.4-1-1l0,0c0-0.6,0.4-1,1-1h3c0.6,0,1,0.4,1,1l0,0C28.2,18.6,27.8,19,27.2,19z"/&gt;
      &lt;circle class="st0" cx="25.7" cy="27.5" r="5.5"/&gt;
      &lt;circle class="st0" cx="25.7" cy="27.5" r="3.5"/&gt;
      &lt;circle class="st0" cx="34.2" cy="22" r="1"/&gt;
      &lt;path class="st0" d="M17.2,35V24c0-0.6-0.4-1-1-1h-2"/&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Open it in a browser like Safari, and the image shows correctly:</p>
  
  <p><a href="https://i.stack.imgur.com/yJmkD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yJmkD.png" alt="enter image description here"></a></p>
  
  <p>Now I'm creating an SVG containing two SVGs using <code>defs</code> and <code>symbol</code> - one of them is the one I've shown here above, the other is a similar one:</p>
  
  <pre><code>&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"&gt;
      &lt;defs&gt;
          &lt;symbol viewBox="0 0 50 50" id="videographer"&gt;
              &lt;style type="text/css"&gt;
                  .st0{fill:none;stroke:#010101;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
              &lt;/style&gt;
              &lt;g&gt;
                  &lt;circle class="st0" cx="21" cy="19.5" r="2.5"/&gt;
                  &lt;circle class="st0" cx="26" cy="19.5" r="2.5"/&gt;
                  &lt;polyline class="st0" points="33.5,27.8 37.5,31 37.5,23 33.5,26.2   "/&gt;
                  &lt;rect x="30.5" y="25" class="st0" width="3" height="4"/&gt;
                  &lt;rect x="14.5" y="24" class="st0" width="2" height="6"/&gt;
                  &lt;rect x="16.5" y="22" class="st0" width="14" height="10"/&gt;
              &lt;/g&gt;
          &lt;/symbol&gt;
          &lt;symbol viewBox="0 0 50 50" id="photographer"&gt;
              &lt;style type="text/css"&gt;
                  .st0{fill:none;stroke:#010101;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
              &lt;/style&gt;
              &lt;g&gt;
                  &lt;path class="st0" d="M34.2,19h-4l-0.6-2.5c-0.2-0.9-1-1.5-1.9-1.5h-3.9c-0.9,0-1.7,0.6-1.9,1.5L21.3,19h-4c-1.7,0-3,1.3-3,3v12
          c0,0.6,0.4,1,1,1h21c0.6,0,1-0.4,1-1V22C37.2,20.3,35.9,19,34.2,19z"/&gt;
                  &lt;rect x="17.2" y="17" class="st0" width="2" height="2"/&gt;
                  &lt;path class="st0" d="M27.2,19h-3c-0.6,0-1-0.4-1-1l0,0c0-0.6,0.4-1,1-1h3c0.6,0,1,0.4,1,1l0,0C28.2,18.6,27.8,19,27.2,19z"/&gt;
                  &lt;circle class="st0" cx="25.7" cy="27.5" r="5.5"/&gt;
                  &lt;circle class="st0" cx="25.7" cy="27.5" r="3.5"/&gt;
                  &lt;circle class="st0" cx="34.2" cy="22" r="1"/&gt;
                  &lt;path class="st0" d="M17.2,35V24c0-0.6-0.4-1-1-1h-2"/&gt;
              &lt;/g&gt;
          &lt;/symbol&gt;
      &lt;/defs&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>My React code to import that <code>SVG</code> and render it...</p>
  
  <pre><code>import VendorIcons from '../../images/vendor_icons.svg';
  
  const VendorIcon = props =&gt; {
      return (
          &lt;svg version="1.1" id="Layer_1" x="0px" y="0px"
              xmlns="http://www.w3.org/2000/svg"
              xmlnsXlink="http://www.w3.org/1999/xlink"&gt;
              &lt;use xlinkHref={`${VendorIcons}#${props.icon}`} /&gt;
          &lt;/svg&gt;
      )
  };
  </code></pre>
  
  <p>Code to render it:</p>
  
  <pre><code>&lt;VendorIcon icon={"videographer"}/&gt;
  </code></pre>
  
  <p>And this is how it renders, <strong>without style</strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/v4Pke.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v4Pke.png" alt="enter image description here"></a></p>
  
  <p>Why is this happening? why is the style lost? Can this be fixed?</p>