Swap embeded SVGs in button component

I want to swap out icons in a button component (code embed SVGs, not an image), but can’t find a practical way to do this.

Currently, the only 2 ways I know how to do this would be either:

  1. Detach the component instance and then edit the embed code for the SVG.
  2. Just have an SVG image rather than have it embed (because Webflow allows images to be swapped). The issue with this is that Webflow doesn’t allow for the color of SVGs to change unless I embed the code.

Does anyone have any solutions/tutorials etc. that might be helpful? Possibly some kind of instance swapping?

I have the same need. I create component buttons in my style guides and have several with html-embedded SVG’s - and was hoping the latest component update would allow this - but the overrides are still on simple elements.

They did day that custom properties we can override would evolve to include styling elements/properties, so lets hope we can replace the contents of an embed soon.

Just figured out one solution.

Using Timothy Ricks method of converting cms text to an svg, you could include 2 text fields in your component (left and right icon).

Timothy Ricks cloneable for converting text field to svg:

Before body:

<script>
// create svg elements
$(".svg-code").each(function (index) {
  let svgCode = $(this).text();
  $(svgCode).insertAfter($(this));
});
</script>

Add 2 text blocks with .svg-code as class name in button component. You need to set the text block to display none and publish to view.
The text field will have all of the svg text in it.

Sample:

<svg width="100%" height="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 12.8894L10.39 7.99938L5.5 3.10938" stroke="currentColor" stroke-width="1.5"/>
</svg>

Hope that all makes sense.