CSS Height issue, parent of svg

[jepicode]

Hi, I interested with your repo. But something happen. when I declare the reactSVG like this
<ReactSVG path={LogoBanner} alt="" svgStyle={{ width:"100%", height:"auto" }} />

that will create div parent with svg tag inside. But the problem is the div parent is different height with the svg tag (the div is more tall then the svg), I inspect and not found which one makes the parent taller

[tanem]

Hey @jepicode.

Any props not part of the documented API are automatically applied to the wrapper element. This means you can do something like apply a classname to the wrapper element like so:

<ReactSVG
  {/* ... your other props ... */}
  className="wrapper-class-name"
/>

And your associated styles can then target the inner elements once the SVG is rendered, for example:

.wrapper-class-name > div { /* targets the inner div */ }
.wrapper-class-name svg { /* targets the rendered SVG */ }

You can apply a similar strategy if you're using an inline style library too. In that case, you might end up passing a style prop instead of a className prop when calling ReactSVG as per the above example.

I think that should provide the hooks you need to solve your issue, but keen to hear how you get on so will leave the issue open for a while ⌛️

[tanem]

Will close this issue now @jepicode as I'm pretty confident my previous response is what you're after. Feel free to comment again though if you're still stuck.