Home › Forums › Bug Reports › Register block type SVG icon not displayed › Reply To: Register block type SVG icon not displayed
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 );
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
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 Privacy Policy. If you continue to use this site, you consent to our use of cookies.