I'm trying to use https://applause-button.com/ this button but turn the hands into a heart instead, but I'm having some trouble with it. I know I need to change the SVG image somehow, but I don't really understand how. Just changing the numbers in "path d" didn't change anything.
I'm trying to change it to this one: https://www.svgrepo.com/svg/503037/heart
I tried to add the JS here but it exceeded the character limit so here's a codepen: https://codepen.io/thepasteldyke/pen/LYqYKRg
I tried to put this code from the downloaded SVG file into the JS file, but I must've done it in the wrong place or something, cus that didn't work for me either. I tried replacing all the "path d" in the file with no success.
This is the code for the image I want instead of the hands:
<svg width="80px" height="80px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z" fill="#000000"/></svg>
What section of the JS do I replace? I already tried changing the CSS but it seems like the symbol is somewhere in the JS section, not the CSS or the HTML.
When you use an open-source project you can look at the source code... Look at the unminified javascript code here: https://github.com/ColinEberhardt/applause-button/blob/master/src/applause-button.js
At line 78, we see the start of the svg. We see that the SVG is in two parts: two g tags with each class "flat" or "outline". We must therefore adjust the svg to correspond to the one we wish to replace:
<svg width="80px" height="80px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g class="flat"><path d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z"/></g><g class="outline" fill="none"><path d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z"/></g></svg>
After a test we see that the SVG outline is not displayed, this is because the library also uses fill for the color of the stroke. You need to modify your css by deleting the line "stroke:none;" in your "applause-button svg" selector
Here is the result : https://codepen.io/SioGabx/pen/RwvwXxp