Search code examples
svgtinymce

Adding a FontAwesome icon to TinyMCE 6 but it's invisible

I want to add the SVG for a FontAwesome icon as a custom icon in TinyMCE v6.

I've seen the docs for editor.ui.registry.addIcon() and have successfully got their example to work:

editor.ui.registry.addIcon('triangleUp', '<svg height="24" width="24"><path d="M12 0 L24 24 L0 24 Z" /></svg>');

editor.ui.registry.addToggleButton('myToggleButton', {
  icon: 'triangleUp',
  onAction: // etc...
});

However, if I download the SVG for a FontAwesome icon such as this star and try to use that instead, no icon is visible in the button, although it's present in the page's source:

editor.ui.registry.addIcon('customIcon', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>');

editor.ui.registry.addToggleButton('myToggleButton', {
  icon: 'customIcon',
  onAction: // etc...
});

I assume there's some crucial difference between the SVGs, but I don't know what it is, or how to fix it.

Solution

  • Since a viewBox of FontAwesome icon is 0 0 576 512 its size should be decreased so it can fit the button. The same values as triangleUp has

    height="24" width="24"

    can be used:

    editor.ui.registry.addIcon('customIcon', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="24" width="24"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>');