Fixing the editor dropdown doesn't require too much additional work:
[CODE="javascript"]// removes the fa- prefix which we use internally
button.icon = button.icon.substr(3)
FroalaEditor.DefineIcon(cmd, { NAME: button.icon })[/CODE]
With something like this:
[CODE="javascript"]const icon = XF.Icon.extractIconFromClass(button.icon);
FroalaEditor.DefineIconTemplate(button.icon, XF.Icon.getIcon(icon.variant, icon.name, icon.classes.join(' ')));
FroalaEditor.DefineIcon(cmd, { NAME: button.icon, template: button.icon })[/CODE]
Where extractIconFromClass looks like something like this
[CODE="javascript"]XF.Icon.extractIconFromClass = function (classes) {
const icon = {variant: "", name: "", classes: []}, possibleNames = [];
for (const className of classes.split(' ')) {
if (className.match(XF.Icon.ICON_CLASS_BLOCKLIST_REGEX)) {
icon.classes.push(className)
continue
}
if (!icon.variant && ['fal', 'far', 'fas', 'fad', 'fab'].includes(className)) {
icon.variant = XF.Icon.normalizeIconVariant(className)
continue
}
if (icon.name) {
icon.classes.push(className)
} else {
if (className.match(XF.Icon.ICON_CLASS_REGEX)) {
icon.name = XF.Icon.normalizeIconName(className)
} else {
possibleNames.push(className)
}
}
}
if (!icon.name && possibleNames.length) {
for (const className of possibleNames) {
if (icon.name) {
icon.classes.push(className)
} else {
icon.name = className;
}
}
}
if (!icon.variant) {
icon.variant = 'default'
}
return icon
}[/CODE]
