Add SVG icons as an option

[yochannah]

the current icon solution uses icon fonts, which repeatedly get caught up by CORS issues and result in nonsense icons instead of page navigation controls.

I suggest we upgrade to allow users to choose embedded SVG if they wish, and use the free icons from icomoon: https://icomoon.io/app/#/select

[CodHeK]

@yochannah I'd like to work on this project and found this in the list of GSoC'19 projects under InterMine ... Can I take up this issue for a start ...?

[CodHeK]

@yochannah I'm having problems setting up the project, the commands I ran successfully :

1. git clone
2. npm install
3. bower install

I am not able to run the make js command as mentioned in the contributing docs...can you please help with setting up a demo project ... Thankyou!

[yochannah]

This was part-fixed in #172 where we realised that the contributing guide was out of date. Thanks for this fix!

@CodHeK As you may have noticed, building this project is a bit tricky! We're hoping a GSoC student will be able to help us upgrade this library to a recent version of node, but right now I have the suspicion it needs to be built under node 0.10 or lower. Some of the notes in the project spec here might help: http://intermine.org/gsoc/project-ideas/2019/detailed-specs/upgrade-imjs-and-imtables

[Manasa2850]

@yochannah I would like to work on this. Could you please guide me on how to start?
Thanks!

[yochannah]

@Manasa2850 Amazing, thank you 🙌

Start by setting up the repo using the contributing guide: https://github.com/intermine/im-tables/blob/dev/CONTRIBUTING.md

Once you've gotten that far, have a hunt about for the icon code and let me know how far you get - if you get stuck we can work things out together! ✨

[km-js]

Being an outreachy aspirant, I would like to work on this.

[Manasa2850]

@km-js sorry I've been assigned this and I'm working on this :)

[km-js]

@Manasa2850 Cool. If you need any help let me know 👍

[Manasa2850]

@yochannah I've set up the repo. As I was looking through the codebase I found most of the code related to icons in imtables.js and main.css
I thought of creating something like a button in imtables.js which would enable users to choose between glyph icons or SVG. Then we can replicate whatever we have for glyph icons for SVG icons as well.
Please do let me know if this is the right way to proceed. Thanks!

[yochannah]

so - the intent is not for users to change the icons, but for intermine admins to be able to do so
I can think of two ways. 1 would be to upgrade to modern fontawesome, which I think supports svg now
and the other would be to manually add all the icons needed using something like icomoon.app
if you look here at the options table there is a way to configure icons already, so if you went for the second option, you might add "svg" to the list of icon choices available - see

https://github.com/intermine/im-tables/blob/dev/CONFIGURING.md

and

https://github.com/intermine/im-tables/blob/dev/src/options.coffee#L79