React + SVG with "defs" -- styles are ALWAYS ignored - reactjs

Question

Here's one of my original SVG:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<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"/>
<rect x="17.2" y="17" class="st0" width="2" height="2"/>
<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"/>
<circle class="st0" cx="25.7" cy="27.5" r="5.5"/>
<circle class="st0" cx="25.7" cy="27.5" r="3.5"/>
<circle class="st0" cx="34.2" cy="22" r="1"/>
<path class="st0" d="M17.2,35V24c0-0.6-0.4-1-1-1h-2"/>
</g>
</svg>
Open it in a browser like Safari, and the image shows correctly:
Now I'm creating an SVG containing two SVGs using defs and symbol - one of them is the one I've shown here above, the other is a similar one:
<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">
<defs>
<symbol viewBox="0 0 50 50" id="videographer">
<style type="text/css">
.st0{fill:none;stroke:#010101;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<circle class="st0" cx="21" cy="19.5" r="2.5"/>
<circle class="st0" cx="26" cy="19.5" r="2.5"/>
<polyline class="st0" points="33.5,27.8 37.5,31 37.5,23 33.5,26.2 "/>
<rect x="30.5" y="25" class="st0" width="3" height="4"/>
<rect x="14.5" y="24" class="st0" width="2" height="6"/>
<rect x="16.5" y="22" class="st0" width="14" height="10"/>
</g>
</symbol>
<symbol viewBox="0 0 50 50" id="photographer">
<style type="text/css">
.st0{fill:none;stroke:#010101;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<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"/>
<rect x="17.2" y="17" class="st0" width="2" height="2"/>
<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"/>
<circle class="st0" cx="25.7" cy="27.5" r="5.5"/>
<circle class="st0" cx="25.7" cy="27.5" r="3.5"/>
<circle class="st0" cx="34.2" cy="22" r="1"/>
<path class="st0" d="M17.2,35V24c0-0.6-0.4-1-1-1h-2"/>
</g>
</symbol>
</defs>
</svg>
My React code to import that SVG and render it...
import VendorIcons from '../../images/vendor_icons.svg';
const VendorIcon = props => {
return (
<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">
<use xlinkHref={`${VendorIcons}#${props.icon}`} />
</svg>
)
};
Code to render it:
<VendorIcon icon={"videographer"}/>
And this is how it renders, without style:
Why is this happening? why is the style lost? Can this be fixed?

Answer 1

It should work fine if you have change the styles in vendor_icons.svg to presentation attributes rather than CSS in a style tag. It looks like you are using Adobe Illustrator, so you should be able to change the SVG export settings to do this for you. The result will be something like:
<symbol viewBox="0 0 50 50" id="videographer">
<g>
<circle fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" cx="21" cy="19.5" r="2.5"/>
<circle fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" cx="26" cy="19.5" r="2.5"/>
<polyline fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" points="33.5,27.8 37.5,31 37.5,23 33.5,26.2 "/>
<rect x="30.5" y="25" fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" width="3" height="4"/>
<rect x="14.5" y="24" fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" width="2" height="6"/>
<rect x="16.5" y="22" fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" width="14" height="10"/>
</g>
</symbol>
Result using the component as you’ve written it: