Support

Account

Home Forums Bug Reports Register block type SVG icon not displayed

Solving

Register block type SVG icon not displayed

  • 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

  • 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.

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.