svg icon usage

[gtraxx]

Hi, I try to integrate an icon svg to my plugin with your method but impossible to display it. I used a fontawesome icon 5 : https://fontawesome.com/icons/youtube?style=brands

editor.ui.registry.addIcon('youtube', '<svg width="24" height="24"><use xlink:href="'+url+'/img/youtube-brands.svg"></use></svg>'); editor.ui.registry.addButton('youtube', { icon: 'youtube', onAction: () => { _api = editor.windowManager.openUrl(_urlDialogConfig) } });

[martyf]

The way icons are used is incredibly different to v4, and for v5, still undocumented and I believe the Tiny team are still finalising the way they want to recommend it working.

For me to get custom icons in the first plugin, it was a lot of trial and error - I found that any xlink:href attempts never worked as expected, and I had to create a separate file with the path data.

Have a look at custom-icons.svg for how I created an SVG of all of the icons used, and then referenced using the addIcon call in each plugin.js (such as the helloworld.js plugin).

[martyf]

I've been speaking with the Tiny team and will have a bit of a play with a few ways to do this (and what fits best for a plugin). There'll be a new blog post coming. Stay tuned.

[gtraxx]

Thank you very much, it may allow me to improve my Youtube plugin. https://github.com/gtraxx/tinymce-plugin-youtube

[martyf]

It is best for you to embed your icons in your plugin JS file (and obviously check licensing conditions are met if using third party icons).

The key elements here are ensuring you set the width/height of the SVG element, plus the viewBox of the actual SVG data.

The easiest way to tackle this is to simply embed the SVG data within your plugin.js file.

Take a look at: https://www.martyfriedel.com/blog/adding-custom-icons-to-your-tinymce-5-plugins