Render SVGs from CPT field in Bricks loops

Background

I have a custom post type (using the free Pods plugin) called “Solutions” and want to be able to dynamically update the post list generated in the front-end from a query loop simply by adding a new solution post in the wp-admin area. In addition, I want to have SVG icons render without having to upload SVG files to the media area.

Thanks to the suggestions from Mohammad Khan Yousufzai in the Bricks Facebook group, I managed to come up with a cool solution.

My setup

Custom post type field settings

Below is a screenshot of my custom post type field setting using the Pods plugin:

The important thing to note is the field name, in my case it is called “icon”.

Adding the SVGs

I will add the SVG as markup inside the Icon field when adding a new custom post, example below:

Builder loop

Inside the Bricks builder query loop (assuming you know how to do this), I will add a code element and drop in the following code:

<?php
// Make sure you are inside the WordPress loop (e.g., in a template file like single.php or archive.php).

// Get the ID of the current post (inside the loop, this will be automatically set).
$post_id = get_the_ID();

// Get the value of the custom field with the name "icon" for the current post.
$custom_field_value = get_post_meta($post_id, 'icon', true);

// Check if the custom field value exists and is not empty before echoing.
if (!empty($custom_field_value)) {
    echo $custom_field_value;
}else {
    echo 'No custom field value found.';
}

?>

If you want to copy the above code, simply replace “icon” with whatever your field name is inside the quotation marks!

Output

You should now be able to see the SVG rendered in the front-end, example below: