gilbarbara/react-inlinesvg

Could we make the span wrapper optional and put the class in the SVG?

shukriadams opened this issue · 3 comments

shukriadams commented

This isn't a bug, but a request for a feature. It has already been addressed and closed in #4
but I figured I'd try my luck.

Would it be possible for us to render the SVG with that SPAN wrapper it currently has? Maybe with an optional attribute like

<InlineSVG className="myClass" src="mysource" nowrap=true />

I know it might sound like nitpicking, but that SPAN just isn't doing anything other than carrying a classname which is meant for the SVG anyway.

Also, I'm not that keen on @matthewwithanm's suggestion of using a css selector like .myclass > svg because this goes against BEM convention of keeping selectors as lean as possible.

Pretty please?

gilbarbara commented

PRs welcome. with tests

atav32 commented

Yeah I'm also running into unexpected alignment behavior with the <span> when the container is display: flex

  • 👍1
samiraguiar commented

I would also like this, though it can't be easily done. React doesn't seem to provide a way to create elements from strings, just setting the innerHTML of an existing element.

What fixes alignment problems for me is to either set the SVG style:

display: block;
margin: 0 auto;

Or the span style:

display: inline-flex;