Support

Account

Home Forums Gutenberg Gutenberg Block Custom SVG Icon Not Displaying

Solving

Gutenberg Block Custom SVG Icon Not Displaying

  • 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

    • ryan62

    • December 22, 2018 at 2:14 am

    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.

    • philf

    • December 23, 2018 at 1:34 pm

    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!

    • jnicol

    • February 22, 2019 at 4:28 pm

    @philf Your plugin works like a charm! Thank you for taking the time to make it.

    • philf

    • March 7, 2019 at 8:39 pm

    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!

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.