How to use react-svg for images used in CSS background? about react-svg HOT 8 CLOSED

@raghav1086 I've added to working examples of what I'm talking about to an issue-49 branch. I'll merge this stuff to master at some point.

To view the examples on that branch, run npm start, then point a browser at either http://localhost:8080/issue-49/fill (changing fill via CSS) or http://localhost:8080/issue-49/swap (swapping the SVG out as per your earlier example).

As per your original issue description though, and my earlier example, I'd recommend just trying to change the fill colour via CSS as opposed to swapping different SVGs in and out.

from react-svg.

Hey @raghav1086, the API exposes a wrapperClassName prop which you can then use to target the innards of your SVG with custom styles.

Using the example in this repo which sets wrapperClassName="wrapper-class-name", I could add the following style somewhere to change the fill of a part of the SVG on hover:

.wrapper-class-name:hover g {
  fill: black;
}

Does that answer your question?

from react-svg.

@tanem I got your point we can easily give hover effect if element is in direct DOM but my question was for images used as background using css like this...

<input type="button" name="" value="Click me" class="btn" />

.btn {
    background: url('./icon.svg') left center no-repeat;
    background-size: 16px 16px;
    border: none;
    font-size: 14px;
    height: 20px;
    padding-left: 20px;
}
.btn:hover {
    background: url('./icon-hover.svg') left center no-repeat;
    background-size: 16px 16px;
}

from react-svg.

@raghav1086 I'm having trouble understanding your question exactly: Is it related to this library, or is it a general CSS question?

If you're looking to replicate what you just posted using this library, then you could just re-render this component with the new SVG path when it's appropriate.

If it's a CSS question I'll close this issue as it's not related to this library, but I did do some digging for you and it might be appropriate in your situation to use one of the methods outlined here.

from react-svg.

@tanem My bad for bad explanation but you got it correct. I am looking to replicate above code using this library but not able to do it. Could you please show me example how I can use this library for scenarios I have posted above. It will be a great help.

from react-svg.

Hey @raghav1086, no worries, I'll have a go at a couple more examples soon once my day job quietens down a little 😉

from react-svg.

@tanem Thanks very much for your time. It is a great helps 👍 please close this issue.

from react-svg.

No problem @raghav1086 👌

from react-svg.