Reponsive Interactive pricing component using Vite+React+Tailwind
Design comparison
Solution retrospective
Hi everyone, I've been a coder for a few years , but I'm still new to the web development, any comments or suggestions would be greatly appreciated!
Technologies Used:
Unresolved Issues:
#slider::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 40px;
height: 40px;
background: no-repeat center, #10d8c4;
background-image: url("./icon-slider.svg");
border-radius: 50%;
box-shadow: 0px 15px 30px 0px rgba(0, 255, 231, 0.6);
cursor: pointer; /* Change cursor on hover */
margin-top: -18px;
}
I added this code in the index.css file, but when I deploy I get this problem： GET https://diviner-beibei.github.io/interactive-pricing-component/assets/icon-slider.svg 404
I know the reason for this problem, but there is no solution, if you can provide me with some solutions, I will be very grateful
Community feedback
- @tomazi15Posted about 1 year ago
dont think you can import svg's using css in React, you can import svg as a component: there are some examplese here good read:
https://www.freecodecamp.org/news/how-to-import-svgs-in-react-and-vite/
Marked as helpful0@Diviner-BeibeiPosted about 1 year ago@tomazi15 Thank you very much for your reply, I used Tailwindcss to build this project, because I need to customize the style of Slider, but Tailwindcss does not provide such a function, so I had to put this code in the index.css file, so generated this problem
0@Diviner-BeibeiPosted about 1 year ago@tomazi15 It's just that the file path is incorrect, I think the problem is complicated! ! ! I have solved it
0
Please log in to post a comment
Log in with GitHub
Join 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