✅ – ✅ – lxd – 14-50 Mar 27
My SVG doesn't appear in react-bootstrap <Button> component but appears if I dont use the <Button> component . (Screenshots in thread)
24 Replies
with <Button> react-bootstrap component (the blue rectangle on top right is the button component with SVG in it)
without the component
Code with the component-
<Button>
<svg
xmlns="http://www.w3.org/2000/svg"
data-name="Layer 1"
viewBox="0 0 24 24"
id="cart"
>
<path d="M8.5,19A1.5,1.5,0,1,0,10,20.5,1.5,1.5,0,0,0,8.5,19ZM19,16H7a1,1,0,0,1,0-2h8.49121A3.0132,3.0132,0,0,0,18.376,11.82422L19.96143,6.2749A1.00009,1.00009,0,0,0,19,5H6.73907A3.00666,3.00666,0,0,0,3.92139,3H3A1,1,0,0,0,3,5h.92139a1.00459,1.00459,0,0,1,.96142.7251l.15552.54474.00024.00506L6.6792,12.01709A3.00006,3.00006,0,0,0,7,18H19a1,1,0,0,0,0-2ZM17.67432,7l-1.2212,4.27441A1.00458,1.00458,0,0,1,15.49121,12H8.75439l-.25494-.89221L7.32642,7ZM16.5,19A1.5,1.5,0,1,0,18,20.5,1.5,1.5,0,0,0,16.5,19Z"></path>
</svg>
</Button>Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I will have to resize it and maintain separate css file for flex and other styles but this react-bootstrap component should take care of all of it as I am not maintaining any css file for the project and everything is on bootstrap/react-bootstrap
I typed
hi inside the <Button> component and I was able to get hi on the button
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Yes I want to contain it inside and size will also be taken care of by <Button>
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I was wondering is there' any way I can use the svg code directly instead of saving the file and importing it?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Oh I see
Let me try that out
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I am planning to use only the cart icon in my app for now as its not a big project, do u recommend installing the library or I can go ahead with this 1 svg
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Another interesting observation, the svg is there in the markup in source but still not visible in the page
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Ahh the SVG was corrupt I believe when used inline in code , i tried a different SVG and it showed up
This question has an answer! Thank you for helping 😄
If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1089924462595547156
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
This question has an answer! Thank you for helping 😄
If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1089924462595547156
This thread hasn’t had any activity in 12 hours, so it’s now locked.
Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1089924462595547156