Support custom markup for icons in toolbar

[kolaente]

Is your feature request related to a problem? Please describe. I'm working on a Vue.js project where the icons are loaded as svgs with the Font Awesome vue package. Easymde is set up in a way which assumes the "classic" loading of font awesome icons, with <i class=""/> tags. The Fontawesome vue package is incompatible with this.

Describe the solution you'd like Ideally, easymde would provide a way to let me specify the markup for an icon for a toolbar entry. This could look something like this:

var easyMDE = new EasyMDE({
    toolbar: [{
            name: "bold",
            action: EasyMDE.toggleBold,
            title: "Bold",
                        markup: '<svg .../>'
        }
    ]
});

(This would mean for me to redefne each toolbar entry, but as I'm refining the toolbar itself already for the layout, that's not that much of a deal)

Describe alternatives you've considered An alternative would be to also load font awesome font files, which would create some clutter imho.

[olavgg]

I would prefer that icons was embedded as SVG images, just like Trix does. Relying on Font Awesome for just ~10 icons is in my opinion overkill.

[kolaente]

@olavgg You mean including the icons as svg right from the start?

IMHO a good idea, but this would probably break compatibility with simpleMDE (It would probably still be worth doing).

[kolaente]

Relevant parts needed to be extended would probably only be https://github.com/Ionaru/easy-markdown-editor/blob/master/src/js/easymde.js#L187-L192

I'll try to give it a go anytime soon.

[A-312]

You can already use svg with background:url(icon.svg);.

[kolaente]

@A-312 you mean by manually reimplementing the icons for fontawesome classes?

[A-312]

Rewrite FA class or add css class in your button

[kolaente]

I guess that could be a solution, but feels a lot like a workaround.

[kolaente]

I've put up a pr: #168