Reply To: Register block type SVG icon not displayed

• 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 );