Register block type SVG icon not displayed

• cr0ybot

• March 26, 2020 at 2:20 am

There was already an issue opened regarding this, but it was marked as resolved thanks to a community member providing a temporary plugin fix. See https://support.advancedcustomfields.com/forums/topic/gutenberg-block-custom-svg-icon-not-displaying/

However, the issue still remains that adding an icon with an SVG string in acf_register_block_type() does not display the icon in the editor.

User philf described the issue & solution:

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.

See their plugin for a fix: https://github.com/pfaciana/acf-block-icon

• cr0ybot

• March 27, 2020 at 2:34 am

Just a small update, the acf-block-icon plugin is not actually working for me.

I did a little digging into the ACF code and it looks like a string starting with <svg is being detected, but only for the icon property and not if you’ve set the icon via icon['src']. I was setting my icon like this because I want to have a custom foreground color:

acf_register_block_type( array(
    // ...
    'icon' => array(
        'foreground' => '#7bb12d',
        'src' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0,0H24V24H0Z" fill="none"/><polygon points="20 18 4 18 4 20 20 20 20 18"/><path d="M22,3H2A1,1,0,0,0,1,4V15a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V4A1,1,0,0,0,22,3ZM21,5V9.92l-3.38-2.7a1,1,0,0,0-1.24,0L12,10.74,8.6,8.2a1,1,0,0,0-1.15,0L3,11.13V5ZM3,14v-.46l5-3.32L11.4,12.8a1,1,0,0,0,1.22,0L17,9.28l4,3.2V14Z"/></svg>',
),

I’m looking to see if I can add a filter via JS on blocks.registerBlockType to handle the icon with foreground color for the time being.

• cr0ybot

• March 27, 2020 at 2:47 am

I’ve successfully filtered the block registration to include the SVG icon with custom foreground color. Note that I had to bump up the priority of the enqueue action to 9 in order for the filter to apply; maybe there is a better way of doing it. Also note that the SVG element is not a string; you’ll need to have a workflow set up like what wp-scripts provides.

The code below is within a custom plugin.

acf-filter.js

const { addFilter } = wp.hooks;

/**
 * ACF Custom SVG Icon filter
 *
 * ACF detects an SVG string for icon but not icon['src']
 */
addFilter(
	'blocks.registerBlockType',
	'cr0ybot/acf-block-icons',
	( settings, name ) => {
		if ( name === 'acf/my-block' ) {
			settings.icon = {
				foreground: '#7bb12d',
				src: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0,0H24V24H0Z" fill="none"/><polygon points="20 18 4 18 4 20 20 20 20 18"/><path d="M22,3H2A1,1,0,0,0,1,4V15a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V4A1,1,0,0,0,22,3ZM21,5V9.92l-3.38-2.7a1,1,0,0,0-1.24,0L12,10.74,8.6,8.2a1,1,0,0,0-1.15,0L3,11.13V5ZM3,14v-.46l5-3.32L11.4,12.8a1,1,0,0,0,1.22,0L17,9.28l4,3.2V14Z"/></svg>,
			};
		}

		return settings;
	}
);

plugin.php

function cr0ybot_block_editor_enqueue_assets() {
	wp_enqueue_script(
		'cr0ybot-block-filter',
		plugins_url( '/acf-filter.js', __FILE__ ),
	);
}
add_action( 'enqueue_block_editor_assets', 'cr0ybot_block_editor_enqueue_assets', 9 );

• creativelogic

• March 22, 2021 at 5:49 pm

Hey @cr0ybot have you tried this again recently? I just did and was definitely able to add an SVG icon without the plugin or extra effort. I was able to just drop in the SVG code. Custom category icons are still a pain, but that’s not an ACF thing of course, but WP itself.