FontAwesome Icon Support

[trevor-coleman]

FontAwesome is free and full of great icons. I think it would be really useful to have support for them built in to the package.

Icons like: cloud-upload-alt or sort-alpha-up could be very useful.

I've never contributed to an open source project, but this seems like something I could do. And I've got some time to work on it. Should I give it a go and make a PR?

I've never contributed to an open-source project before, so apologies if this is in the wrong place or inappropriate. And if there's anything I should know before getting started, let me know!

[trevor-coleman]

Looking at the code, it seems that you pass a string to nativeImage which can be either text or the path to an image.

My thought is I could write a function to inspect that string, and if it matches a FontAwesome icon name, then return the path to the icon, or else return the original string.

We could prefix the icon name with fa- to disambiguate it. So if you wanted folder-open you could type fa-folder-open because some icons have names people might like to use as text labels, like folder or edit.

FontAwesome comes as svgs and nativeImage only supports pngs/jpgs, so either I could use something like font-awesome-svg-png or maybe choose a different icon font that has a png set.

[inakineitor]

The pathOfIcon string should always be the path to an image. Someone before asked if it was possible to integrate Octicons with the images of the buttons. I did a little research and came up with an answer.

While the answer from the other Issue could still be used to add FontAwesome icons to buttons, I like the idea of using font-awesome-svg-png to generate images on the go from the font.

What I don't think would be a good idea is to have FontAwesome icons prefixed with fa-. I think a JSON structure like the following would be better. The icon property would replace the pathOfIcon property. This would allow us to add more fonts easily in the future.

icon: {
    type: 'font-awesome' or 'image'
    id: 'icon-name' or 'path/to/image'
}

If you have time and want to try to implement it, go ahead.

[ProLoser]

Since I was the one who asked for the same thing for Octicons (the icons actually used all over Atom itself) I thought I'd throw in my 2c.

I suggested Octicons because they are synonymous with Atom already. I feel this is less so for FontAwesome. That said, it would still make sense to have some sort of support for icon fonts (although I'm learning sizing is a bit complex).

Instead of having built-in or hard-coded solutions for any particular icon font, perhaps just have a field to specify a path to an icon font and then the sprite to use. I've actually been interested in using the native OS icons too which is another variation of this whole thing.

[inakineitor]

The native icons can be easily implements using Electron's nativeImage.createFromNamedImage, which generates a Touch Bar compatible image from the system resources.

I don't currently have time, but if someone adds the new JSON structure for images to the parser, the adding of new fonts and system icons would be made trivial.