We’ve built out a really unique templated solution for several clients so they may manually manage all their own dynamic data content from the page/post edit screen.
The only remaining feature we need to solve for is dynamic SVG support inside bricks - being able to set with MetaBox/ACF post specific SVGs (for use as an icon(s) on that page/post) or even brand SVG sets. The issue with using an Image block is is renders all images as a contained src=“/file.svg” rather than inline…
The main reason we want these to be dynamic is so that we’re able to control the stroke, fill, and other SVG properties, which are not available if set as a src= asset.
Anyone have any solutions or ideas for how to incorporate SVGs dynamically?
Which gives a nice, searchable box to pick and icon. Then placed the icon in a code block - in a loop (to show categories - as I used it for category icons)
Thanks for your ideas and sharing the ACF: Font Awesome plugin! We would 100% use this, except for we’re building primarily with MetaBox at the moment. We have a few sites on ACF still but with Bricks, I’ve noticed that MetaBox seems to “play” really nicely.
I was able to create a nifty workaround by simply creating a class with a color filter applied. Then created a custom variable via a MetaBox > Custom Settings Page > Site Brand Group > Custom field to set the filter value. Using this codepen tool - https://codepen.io/sosuke/pen/Pjoqqp to generate the filter value from a HEX color.
Once we have the filter values, then we can dynamically set the filter to affect any icon we want to use as a dynamic data image (svg file from each post’s backend). Works out really well and doesn’t limit us to using any icon libraries.
Would be fantastic if bricks is able to natively support dynamic data SVG inline files but from my understanding and research, it’s more on the wordpress side to decode the svg file into a true inline SVG format.
Example inline SVG (for anyone else searching for similar topic):
Seems like u figured it out and I need another coffee and re read everything to fully understand but… I’ve used this to inline svgs attached to cpts n what not, posting just in case it improves anything
That’s a clever bit of code. But I think I’ll stick with fill=“currentColor” and boring one-colour icons. My brain can’t manage the complexity!
Thanks for sharing the solution tho… always good when people share ideas