Inline SVG Icon ✅

In Webflow, inline SVGs are generally rendered using an Embed element.

In this approach, limiations exist;

• The SVG cannot be stored in the CMS and bound to an Embed

  • A rich text embed hack workaround can work but makes it difficult to work with the SVG

• The SVG cannot be componentized and slotted conveniently

Features

• Paste the SVG code directly into a property

  • Data-bind it to any text field in the CMS, or a parent component, if you like

• Choose from several pre-defined icon sizes for convenience

• Color the icon easily through it's wrapper DIV and the SVG currentColor property

  • That color can be stored in the CMS as a color field, and bound to the DIV's textcolor

The component will automatically;

• Verify that it's an SVG

• Render the SVG content

Future

When supported by Webflow, switch to an Embed property field type.