Use scalable icons

[1j01]

I've started converting the icons to SVG:

This should be able to be swapped out easily.

(alternatively? icon fonts)

[josdejong]

Thanks, sounds cool! All modern browsers now support SVG, so we could indeed replace the PNG with SVG. Would be great if you could contribute the SVG (the image above is still PNG).

[1j01]

"Unfortunately, we don’t support that file type." - Apparently I can't drop an SVG file in here.

I've done the rest of the icons:

The {} and [] icons didn't scale well (they'd either vertically centered when zoomed in or at 1x) so I had to convert them to paths. The FIELD and VALUE labels should really be done with psuedo elements (::before or ::after with pointer-events: none; etc.)

I'll try to send a PR later with the SVG and the pseudo elements if that sounds good.

[1j01]

...I was not aware that there was already an SVG source file.

I combined them and tried to take the best of both.

[josdejong]

...I was not aware that there was already an SVG source file.

oops, I didn't remember that either. Sorry...

[1j01]

@josdejong That's what I figured, heh.

[josdejong]

@1j01 triggered by your work on the SVG icons I've been working on a new design for the editor, you can have a look in the develop branch.

I think we should take the SVG icons one step further: make them monochrome and such that you can colorize them later with CSS. That will allow for custom styling. Here is an article on how that should work: https://css-tricks.com/svg-sprites-use-better-icon-fonts/. Would you be interested in giving this a try?

Here's a screenshot of the new design, please let me know what you think:

And here is an experiment to use CSS to change the editor into a dark theme:

And with such a dark theme it gets hairy because you can't change the colors of the icons, it would be really cool if we have a "real" SVG icon sprite.

[zendre4]

+1 for icon fonts