Two div elements wrap svg icon

[bezenson]

Is it necessary to wrap SVG by 2 div elements in DOM? Maybe render only svg without div's or use only one wrapper element?

[chuck-durst]

+1

[tanem]

Is it necessary to wrap SVG by 2 div elements in DOM? Maybe render only svg without div's or use only one wrapper element?

That was actually how this module was originally created, however:

• An extra parent element was added in ab0a4e7 to fix Uncaught TypeError: Cannot read property 'replaceChild' of null(...) #14.
• The img was changed to a div in ef9d172, since we weren't providing (and don't have a need for) the mandatory src attribute.

[DavidSvetlik]

Hi,
couldn't you please at least provide a way to target those divs (eg custom class)? Or how are we supposed to target those divs in CSS?

Thank you,
D.

[tanem]

@DavidSvetlik: without seeing your use-case I'm guessing a bit, but one way you can do this is wrap the output of this module in your own element which does have a class or id etc, then work from that to target the divs perhaps via a descendant selector.

If you want to provide a use-case, can you please open a new issue as well and we can work from that? (What you're asking sounds different to this original report).

[DavidSvetlik]

@tanem You are right, I can wrap it in another element. Thanks.

[iporollo]

Would love an example of the solution

[tanem]

@iporollo if we use the example contained in this repo, what I'm getting at is doing something like this:

<div className="wrapper">
  <ReactSVG
    path="atomic.svg"
    callback={svg => console.log(svg)}
    className="example"
  />
</div>

Then, you can use CSS however you like to target the internal elements, e.g.:

.wrapper > div { ... }
.wrapper > div > div { ... }
.wrapper svg { ... }

[austincondiff]

Can we wrap the svg in <></> instead? I really don't want every single icon I user wrapped in two div's. Seems needless and clutters the DOM.

[tanem]

Hey @austincondiff the reasons for the wrapping were posted earlier in this thread.

Long story short:

• The underlying module this lib is based on needs a parent element wrapping the one it's replacing. This means these two elements are not managed by this lib/React.
• This library itself then needs a wrapper element in React-land in order to manage things properly from it's side.

[JasonMichaelSmith]

Just use https://www.npmjs.com/package/react-inlinesvg

No unnecessary div/span wrappers.

[ckreeftmeijer]

This works for me. Replacing the most outer div with the svg after injecting

afterInjection={svg => {
        let parent = svg.parentNode.parentNode
        parent.parentNode.insertBefore(svg, parent)
        parent.parentNode.removeChild(parent)
    }}