Inline Dynamic Data SVGs

How To
,
1

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?

Thank you!

2

I used this:

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)

<?php
$item_id = \Bricks\Query::get_loop_object_id();
$icon = get_field( 'field_name', $item_id );
echo '<p><i class="fa ' . $icon . '"></i></p>';
?>

If it’s going to appear on posts, you can switch $item_id for {post_id} and just use the code block.

<?php
$icon = get_field( 'field_name', $post_id );
echo '<p><i class="fa ' . $icon . '"></i></p>';
?>

Obviously you can add another class to style it if needed.

3 Likes
3

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):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <circle cx="15" cy="20" r="10" stroke="black" stroke-width="1" fill="white" /> <!-- Left Eye -->
  <circle cx="35" cy="20" r="10" stroke="black" stroke-width="1" fill="white" /> <!-- Right Eye -->
  <circle cx="25" cy="35" r="7" stroke="black" stroke-width="1" fill="black" /> <!-- Nose -->
  <path d="M 20 45 Q 25 40 30 45" stroke="black" fill="transparent" /> <!-- Smile -->
</svg>

Feel free to reach out if you or anyone else searching for SVG inlines want to see how we implemented this into our flow! :wink:

1 Like
4

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

Add dynamic data to SVG element - #2 by timmse

5

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 :slight_smile:

6

Hello!

Are you using that in an ACF repeater? I’m trying the code and seems something is not working.

Thank you

7

The code is just in a post loop. If you’re using the ACF Icon plugin, make sure it’s returning the class name - (settings in the field).

8

Yes. This is how a have it. But my acf field it’s in a repeater (inside if the query loop).
Thank You for the answer. I will investigate futher.

9

@digismith @marcorubiol - Refer to this one: Tutorial On How to Use Font Awesome Icons with ACF fields - #9 by jmcbade

Sridhar and a few of us are testing out with repeaters. Seems to be a trending topic right now with Bricks+ACF Repeaters :laughing:

1 Like
10

This should work with Metabox

1 Like