Feature Request: Icon Picker with an SVG Field?

Misho · October 22, 2020, 11:28pm

Hi!

Many elements like headings have the “graphics” set of settings. The key part is the Icons picker that shows the selected Font Awesome icons.

It would be fantastic if one of the tabs in the picker is custom SVG. Clicking it would open the field where we could paste the SVG code such as this one:

<svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>

This would open infinite graphic possibilities inside elements with graphic options. I have stole the idea from the GenerateBlock’s button Gutenberg block.

Thanks!

devinelston · October 22, 2020, 11:49pm

+1

Also, could be neat to add something similar to the section top/bottom separators too.

alexander · October 28, 2020, 10:30pm

Love this idea. I’m going to add it to our general issue tracker since it’s more of involved project that we would need to research how to fit into the current element systems.

Misho · April 17, 2021, 11:12pm

Expanding the idea with one more thing: it would be great if the Custom SVG field will also allow Dynamic content.

urchindesign · April 20, 2021, 7:24am

+1 for this too.

alexander · May 20, 2021, 6:16pm

Hey guys, just wanted to confirm I got the extra notes here and we’ll definitely be keeping all this in mind.

Misho · June 12, 2023, 7:47pm

Maybe it is a good time to revisit this idea.

The icon picker inside elements, having an option to paste an SVG instead of choosing an existing icon?

charlie · June 13, 2023, 5:53pm

I think if we had an option to enable SVG mime types we could use the WordPress media editor as well. The icon control and icon element seem to be pretty directed as a text based element. It might be better to have an SVG Icon element and try to get the icon controls to work with either. Seems a little involved so we can take a look after 6.3. Have a great day!