Dynamic class names

[Bartozzz]

I am trying to add a class to the ReactSVG component once something happens. I am using the latest version of react, react-svg, classnames.

render() {
    const themeIcon = className( "qilin-icon", {
        "is-active" : this.props.isThemeToggled,
    } );

    return (
        <ReactSVG className={themeIcon} path="images/icons/menu/theme.svg" />
    );
}

themeIcon is a valid string:

CSS clases are not changing in the DOM once SVG is loaded:

Is there an easy way to dynamically change SVG classes or should I use refs and the callback function?

[tanem]

@Bartozzz that looks like expected behaviour to me?

In your example screenshot, I can see the icon class is showing up on the svg element. If you sent through icon is-active as the value for the className prop (say, when that render function was called again), then those two classes will show up on the svg element.

[Bartozzz]

Yes, the .icon class shows on the svg element on the first render, but it's keeps showing on the consecutives ones - even if themeIcon has changed. Maybe it happens only on my machine as I am using NW.js and the Node.js/Window context is messed up a little. At this moment I am adding the .is-active class to the parent element.

Anyway, can you provide a working, tested example that's adds a class to the ReactSVG element?

[tanem]

I see what you mean now. This module delegates to SVGInjector, and I think that keeps an internal cache of the SVG's it loads, and if it determines an SVG has already been loaded, then it won't update it. I'd need to investigate further.

In the meantime it sounds like your workaround will be ok, I'm guessing (have yet to test this) you're doing something like wrapping ReactSVG in a div, and getting at the SVG element via a selector like .icon.is-active svg {}?

[Bartozzz]

Yup, that's exactly what I am doing.

[tanem]

@Bartozzz this issue should be fixed if you want to try grabbing the latest version now.

[tanem]

Closing, assuming the thumbs up meant things were all good? Feel free to post a new issue or reopen this one if you feel the issue isn't resolved.