Comments (8)
@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.
Related Issues (20)
- Jest unit testing HOT 3
- Components don't work properly in iframe
- Components don't work properly in iframe HOT 4
- <style>-tag inside SVG becomes a page-wide style HOT 2
- Setting color HOT 3
- src prop warning in unit testing react testing library HOT 2
- Re-render of react-svg lost reference HOT 2
- ref type is incompatible HOT 2
- React SVG isn't working, when we give the external source. HOT 2
- wrapper rendered twice HOT 2
- Unit test cases are failing, if i use ReactSVG. HOT 4
- Namespace 'React' has no exported member 'JSX'. HOT 3
- Styling in scss HOT 2
- Doesn't update <use /> tag "href" attribute when `renumerateIRIElements` is true HOT 2
- CORS issue HOT 4
- SVG URL EXTERNAL, How Can I mock!? HOT 2
- ForwardedRef not assignable to ref type
- Make wrapper optional HOT 1
- 'ReactSVG' cannot be used as a JSX component.
- react-svg ssr compatibility with nextJs v14 App router
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-svg.