Is it possible to pull SVG paths dynamically from CMS text fields using SA5?

General
1

Hey guys. I’m hoping you could help me out with an answer.

Inside my Webflow website, I am working with some SVG items. The structure of such an item looks something like this:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24" fill="none"><path d="M0 0V24H24V0H0ZM7.87 6.95C9.39 6.95 10.63 8.19 10.63 9.71C10.63 11.23 9.4 12.48 7.87 12.48C6.34 12.48 5.11 11.24 5.11 9.71C5.11 8.18 6.34 6.95 7.87 6.95ZM4 17.43C4 15.3 5.73 13.57 7.87 13.57C10.01 13.57 11.73 15.3 11.73 17.43H4ZM18.9 14.12H13.38V11.92H18.9V14.12ZM20 9.71H13.38V7.51H20V9.71Z" fill="currentColor"></path></svg>

The problem I have is this. I want to link the path string of these SVGs to a CMS field, so I can globally control and change icons. For this, I created a CMS collection with a plain text field that holds the entire “d” property of each SVG icon. But, whenever I link the “d” property to that CMS field to pull that string from it, the actual icon is no longer sized properly, ignoring its view box.

I suspect this could be due to how the code is injected. I’m wondering whether SA5 could help with such a thing?

2

The rules on viewBox and SVG paths are such that it’s usually not adequate to store part of the SVG. Too many opportunities for variance. Store the entire SVG in the CMS instead.

You have a few approaches you can use there;