Reply To: Gutenberg Block Custom SVG Icon Not Displaying

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