I have a ACF color picker field and it is set to output the hex code.
In Bricks I attach the color to the RAW field of a svg element fill color.
Nothing happens. No color is output.
I have the latest versions of plugins as of this post.
I would take screenshots but unfortunetly the project moved on and I don’t want to go back and try to break things to get a screenshot. I just wonder if I can even use an ACF dynamic data for color picker in the svg fill color RAW field at all.
Thanks!
Hi Zack,
Thanks so much for your report!
Yes, of course you can.
In 9/10 cases, problems with SVGs are caused by the SVG itself, because, for example, they already have a fill attribute that cannot be overwritten. Try using a different SVG, such as one of these, and compare the SVG source code with yours:
Best regards,
timmse
I did a quick experiment with a downloaded icon, uploaded to media library, used in svg element. Still didn’t work.
Probably part of the issue is that it’s used in the context of a post loop. Do I need to use other syntax when it’s in a loop?
I use icons with color from acf colorpicker inside a post loop. Svg’s do have some issues.
Make sure you can output the #hex color inside a text field just to see if the data is there.
If so, it should be able to color the svg if it is just a 2 layer image. Some svg’s consists of many pieces and will be a problem.
Font awesome icons should work out of the box. I upload the icons separate to save data from the entire font.
The colorcode should be in the dynamic data list and look something like {acf_my_color_picker} where my_color_picker is the acf field name
Do you insert them as an image or by the icon manager? (i use icon manager)
Thanks for the reply.
It’s not the icon’s fault, I can color the icon just fine within the settings, or use a CSS variable instead etc. It’s only the ACF dynamic field.
I also know the ACF field works because I can output it elsewhere like say into a custom attribute and check it from the frontend and the attribute is there.
Here I’m outputting the acf field into a basic text element:
It works, the hex is output, different per post etc.
But putting it in the SVG fill color in the raw field:
I can drop a random hex code into the raw field and the icon will color as normal:
When I put in a hex value, the output is like this in CSS:
But when I use the ACF field, there is no output at all, the fill simply isn’t set at all.
Really weird.
I color my icons by assigning the acf color field to textcolor under typography
Sure. For media library icons, it doesn’t color through text color. It needs to set fill for all the svg sub elements. Like Bricks does it, with this kind of CSS:
.brxe-123456 .brxe-123456.brxe-svg :not([fill="none"]) {
fill: var(--feature-color) !important;
}
PS, the reason I have a variable here is because my workaround is to set the ACF color into a custom style attribute that sets the variable, which I can then use for the fill as custom RAW color. But I’d still like to know why the ACF field doesn’t work directly.
Can’t be sure if it’s a Bricks bug yet.
Here’s how mine SVG looks with color by ACF field. Probably useless, but maybe there’s something.
I set all SVG colors by text color, that’s why a single layer SVG is important for me.
The yellow ish color is the icon’s color. The path is the SVG as uploaded to the icon manager.
Aaah, it’s in a loop 
Then I can reproduce the problem. Apparently, the fill/stroke is missing.
Workaround: Add the color inline.
Is this considered a bug or will there be a fix so we can use ACF in the raw field within a loop? If so, when might that be added? Just curious.
Thanks!
I have not explored the new icon manager too much. I wonder what the limits are in terms of how complex of SVGs can be added in there?
You said single layer but does that also mean single path? Or would it support multiple paths as long as they all use the same fill color?
Need to be a single path icon. I tested 3 paths with the same color, but it will not color any of them and only form a border outside the path and not use the border of the path.
You can color the svg beforehand. That will show, but will not color by setting.
That’s why I changed the thread title to WIP = work in progress. I can’t say when the problem will be fixed, but we will let you know right here. However, you can use the workaround mentioned until then.
Oh, didn’t notice the thread title. Good news!
Thanks!
