I'm importing an svg into react as a Component but it has Style tags around the css classes and therefore throws an error when I try to import this, if I remove the css in the style tags it loads the svg but obviously missing the extra styling

I would like to avoid moving all the styles into a seperate .css file if possible, how can I import the svg as a ponent in React but keep all of the styling?

import React from 'react'

export const StoffFarbe = () =>
<svg version="1.1" id="Layer_1" xmlns="" x="0px" y="0px"
     viewBox="0 0 40 40">
   <style type="text/css">
    .st0{fill:none;stroke:#1D1D1B;stroke-width:3.2003;stroke-linejoin:round;stroke-miterlimit:10;}
    .st1{fill:none;stroke:#1D1D1B;stroke-width:1.6001;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
    <path className="st0" d="M6.3,33c-1.4-1.4-2.4-3.8,0.2-6.4s7.4-4.8,7.4-4.8s0.8-3.8,0.2-6.6c1.6-1.6,10.8-10.8,10.8-10.8l10.2,10.2
        c0,0-9.2,9.2-10.8,10.8c-3.2-1.4-6.2,0-6.2,0s-2.8,5-5,7.4C10.5,35,7.7,34.5,6.3,33z"/>
</g>
<line className="st1" x1="15.7" y1="13.8" x2="25.5" y2="23.6"/>
<circle className="st1" cx="9.3" cy="29.8" r="0.4"/>
<path className="st1" d="M20.1,9.4c0,0-0.4,1.4,1.6,2.2s3.4-1.2,4,0.6s-1.6,4.2,1.4,5.2c3,0.8,3.8-0.8,4.2,0.4"/>
</svg>

I'm importing an svg into react as a Component but it has Style tags around the css classes and therefore throws an error when I try to import this, if I remove the css in the style tags it loads the svg but obviously missing the extra styling

I would like to avoid moving all the styles into a seperate .css file if possible, how can I import the svg as a ponent in React but keep all of the styling?

import React from 'react'

export const StoffFarbe = () =>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3/2000/svg" x="0px" y="0px"
     viewBox="0 0 40 40">
   <style type="text/css">
    .st0{fill:none;stroke:#1D1D1B;stroke-width:3.2003;stroke-linejoin:round;stroke-miterlimit:10;}
    .st1{fill:none;stroke:#1D1D1B;stroke-width:1.6001;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
    <path className="st0" d="M6.3,33c-1.4-1.4-2.4-3.8,0.2-6.4s7.4-4.8,7.4-4.8s0.8-3.8,0.2-6.6c1.6-1.6,10.8-10.8,10.8-10.8l10.2,10.2
        c0,0-9.2,9.2-10.8,10.8c-3.2-1.4-6.2,0-6.2,0s-2.8,5-5,7.4C10.5,35,7.7,34.5,6.3,33z"/>
</g>
<line className="st1" x1="15.7" y1="13.8" x2="25.5" y2="23.6"/>
<circle className="st1" cx="9.3" cy="29.8" r="0.4"/>
<path className="st1" d="M20.1,9.4c0,0-0.4,1.4,1.6,2.2s3.4-1.2,4,0.6s-1.6,4.2,1.4,5.2c3,0.8,3.8-0.8,4.2,0.4"/>
</svg>

• javascript
• reactjs
• svg

• Can't you just import StoffFarbe from './StoffFarbe.svg'? – anatoli Commented Feb 21, 2018 at 10:55
• See Also: How to display svg icons(.svg files) in UI using React Component? – KyleMit ♦ Commented Sep 19, 2020 at 1:01

2 Answers 2

If you use create-react-app 2.0 you can now do do it like this:

import { ReactComponent as YourSvg } from './your-svg.svg';

<div>
   <YourSvg />
</div>

You can import the stylesheet:

import './StoffFarbe.css';

Inside CSS file:

.StoffFarbe {
    // add styles
}

Another option will be using the svg as an image:

<img src="StoffFarbe.svg" class="yourCSSClass">

SOURCES:

• 4 ways to style react ponents
• Using CSS with SVG