Add SVGs as Component Properties

Step 1: Add The Following CSS

<style>
.svg-wrap svg {
  width: 100% !important;
  height: 100% !important;
}
.svg-wrap.cc svg path {
  fill: currentColor !important;
}
</style>

Step 2: Add The Folllowing Javascript

<script>
  document.querySelectorAll('.svg-code').forEach(el => {
    // Get the inner text (escaped SVG code)
    const svgCode = el.textContent.trim();
    // Replace the div with actual SVG
    el.outerHTML = svgCode;
  });
</script>

Step 3: Define Width and Height

Add a div where you want the icon to appear, give it a class of svg-wrap, and set its width and height to match the size you want for the icon.

Step 4: Connect Property

Add another div inside the svg-wrap div, give it the class svg-code set it to display none, and connect it to the component’s text property.

Step 6: Publish

Add your code inside the property, then publish.

By default, the color of an SVG is defined by its original color. If you want to apply a color using the text color property (and change it on hover), give the svg-wrap a combo class of cc. This way, the SVG will inherit its color from the svg-wrap text color.