SVG Icon on Button

Ask us anything
1

How do I set an animated SVG icon on a button? I tried dragging an Image into the button but that doesnt work. There doesnt appear to be a way to upload the SVG file as an Icon, only as an Image. Thanks.

2

Can’t do it.

Pretty sure I submitted this as a feature request a while ago.

I currently just style my own containers as ‘button’ elements so I can add the SVG to a html element inside.

2 Likes
3

Thanks @MichaelLovell. Can you elaborate on why you need to use an HTML element? Why not just use an Image with the SVG on it?

4

Oh I’m using the SVG code rather than the uploading a file, that’s all.

5

Oh ok. Thanks.

6

How are you handleing hover effects, like changing the color of the svg? I didn’t see a way a WW variable to custom HTML.

7

I figured out a way to do this using components and a quick javascript function. I created an svg prop and color prop. I think used a javascript function in the formula field bond to the HTML. The javascript takes the svg path infor (copy and paste SVG from figma or illustrator) and then uses regex to replace any fill or stroke values. That way I could assign hover states and control the color of the icons globally.

function replaceSVGColor(svgString, iconColor) {
// Regular expression to match fill or stroke attributes with color values
var regex = /fill=“([^”]+)“|stroke=”([^“]+)”/g;

// Replace fill or stroke attributes with the specified iconColor
var modifiedSVG = svgString.replace(regex, function(match, fill, stroke) {
    if (fill) {
        return 'fill="' + iconColor + '"';
    } else if (stroke) {
        return 'stroke="' + iconColor + '"';
    }
});

return modifiedSVG;

}
return replaceSVGColor(context.component?.props?.[‘ff1dce9f-db47-4dad-ab7b-bee8d4b6f778’],context.component?.props?.[‘f9721a44-0642-411f-93c4-7c4f78b8c662’])

The code has the weird WW pointer ID to the WW variable, but you can replace these with your variables.