Design comparison
Solution retrospective
One thing I couldn't figure out, when you display an SVG by importing it as a ReactComponent, (used when you need to style it, like changing the fill color etc.) how do you then center the SVG inside the component? Mine kept appearing at the top left.
Community feedback
- @ryanbradley-webdevPosted over 1 year ago
Looks pretty good! On your question, I have two things.
First, if you have a single-use svg you can absolutely copy-paste the html directly where you need it, and then apply a className prop to style it directly with css.
Second, if you're using a component to just return the SVG (I do this most of the time) it shouldn't change the styling directly. If the return statement looks like this:
return ( <svg> ... </svg> )
It will be the same as putting it directly in the html. If you wrap it in another component it may alter your styling if you have any styles already applied to those components.
If you don't already use this tool, Chrome and FireFox have developer tools built in that can help you identify styling issues like this and make life a little easier.
I hope this helps with your future projects!
0@riwepoPosted about 1 year ago@ryanbradley-webdev Thanks very much for your comments Ryan
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord