Hello there. I’m having trouble adding a custom icon to my ACF Gutenberg block. I’m using ACF 5.8.0-beta2 and WordPress 4.9.8.
My code is below though the icon code is taken directly from the acf_register_block() documentation. The block itself works great but all I get is a blank icon.
When I look at the source code there is nothing to display. It’s almost like WP has scrubbed it out. There is also no errors in the console.
acf_register_block(array(
'name' => 'campactivities',
'title' => __('Camp Activities Grid'),
'description' => __('A custom grid to display camp activities.'),
'render_template' => 'template-parts/block/content-camp-activities.php',
'category' => 'common',
'icon' => '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>',
'post_types' => array( 'page' ),
'align' => false,
'keywords' => array( 'daily', 'activities', 'grid' ),
));
Thanks for any help you can give.
David J.
Same here. Can’t get anything to display but a dash-icon.
I am dealing with this glitch as well. It does not work when setting icon or declaring the array with src
Same here. Any word if a fix for this is rolling out in the next release? Would be great to not be limited to Dashicons.
It looks like this issue is marked as “Solving”, so hopefully a permanent fix is on the way soon. However, I was having the same issue, so I created my own fix for the time being. It’s a drop-in plugin, just download and activate and it should work for you. Everyone is welcome to check it out to see if it fits your needs: https://github.com/pfaciana/acf-block-icon
The issue is that the Gutenberg Block (essentially) accepts two types of inputs, 1) a string or 2) a JavaScript Object (in the form of a React element/component/fragment), see: https://wordpress.org/gutenberg/handbook/designers-developers/developers/components/icon/ . So if you pass svg code in the form of a string, like the documentation suggests, then WordPress thinks it’s a Dashicon. WordPress will then look for it in the components.js, but won’t find it, and return null. That null translates to no icon showing up. So what I did was check to see if the icon (or icon[‘src’]) starts with “<svg”, if so, then have PHP convert it to arbitrary JSON. Then have JavaScript hook into the acf ‘ready’ action, take that arbitrary JSON and convert it to a React element, and Voila! the svg icon is rendered. If the icon doesn’t start with “<svg”, then it just passes through with as normal. If anyone has any questions, just let me know.
Thanks!
@philf Your plugin works like a charm! Thank you for taking the time to make it.
No problem! Happy I could help. I needed it for myself anyway, no reason not to open source it and let others use it. Thanks!
An update for anyone coming here now… For me I had no issues adding an SVG icon as per the ACF docs (no plugin needed). Now if you are adding an icon for a custom category, that’s a whole other thing and not as easy. But for a just a custom ACF block, I could drop in the SVG code no issues.
