Dynamic icons as SVG

How To
1

Hi,

I have a CPT and will SVG to the posts. I will display them as an icon but I can’t use dynamic data on icon. How to fix this?

Cees

2 Likes
2

Hey,
I have the same issue with SVG.
Mainly because with image element we are not able to use other color on SVG.
Or did I miss a feature in the image element, that can do this?
@timmse @digitalgravy

3

Hi guys,
This is currently not possible within the builder settings. SVGs are a bit more special (see code)… But of course you can use custom code (inside the code element) to display the SVG:

<?php

  $icn = get_field('feature_icon');

  if($icn) {
    $icnUrl = $icn['url'];
    $icnID = $icn['ID'];

    $arrContextOptions=array(
      "ssl"=>array(
        "verify_peer"=>false,
        "verify_peer_name"=>false,
      ),
    );

    $response = file_get_contents($icnUrl, false, stream_context_create($arrContextOptions));
    echo '<span class="feature_card-icon">';    	
    echo $response;
    echo '</span>';
  }
?>
1 Like
4

Thank you! Though native support would be way easier and faster to use. I hope that this will be added natively into Bricks anytime in the (near) future!

5

Hello @ timmse. I have 2 questions:

  1. I tried your code on an ACF field, ‘icon’, which is an image array. When I run the code it takes over 30 seconds to render the page. Should I be using another type of ACF field?

  2. I’ve also added a field, $color = get_field(‘icon_color’); and modified your code like this:
    echo '<span style="color: '.$color.';" class="feature_card-icon">';
    It doesn’t change the color, though.

Thanks for all,
Seth

6

Hi Seth,
Welcome to the forum!

  1. You should use the acf file field.
  2. If your SVG is treated as an image, it can’t work. But if it is included as SVG (file), you can influence the color with fill or stroke (depending on your SVG). Or you prepare your SVG so that it uses currentColor for the fill and stroke, which you can then influence with color.
7

Thank you Stefan!

The icons are changing color now – but I still have a page load problem when I add the PHP code to the query loop. Before adding the code the page loads quickly. Do you have any ideas why it might be taking so long?

Here’s the page:
https://staging.sethquittner.net/acss/test-services/

I appreciate your help (and Bricks!!!),
Seth

8

Unfortunately I don’t know. You can test if it is also so slow when you query a single SVG outside of a loop. If so, it will probably have something to do with your server.

9

Thanks Stefan – I just migrated the site to my local environment and there are no load issues with the page load. I’ll try to narrow this down to an svg syntax problem and report back here.

1 Like
10

I made a dynamic icon element if you want it