Switch to SVG icons instead of icon font

[raucao]

When I wanted to add a new icon the other day, I found out that we still use some ancient custom icon font, created on Icomoon, for which I don't even have an account anymore.

SVG icons are generally easier to work with, can be styled with CSS, animated, and so on. I came up with an easy way to use them in Ember last year: placing the icon's SVG in a app/templates/icons/my-icon.hbs file, and then simply including them as a partial via {{partial "my-icon"}}. (See https://gitlab.com/skddc/inspektor for a real-world example.)

Any comments/opinions/links on beautiful icon sets would be useful for this one, of course.

[raucao]

Once this is done, we can replace one of the two icons in the purple channel header with an icon for leaving the channel (see discussion in #104). We can also add another icon bar in the bottom left for global/user-specific actions (e.g. app settings) and make the icons in the top right be a tab switcher purely for the current channel's functionality (files, user list, channel settings, etc.).

[galfert]

Just FYI: partials are not really a thing in Ember anymore. Just use a component instead.

[raucao]

Oh no. I'd think we don't actually want a component there, because a partial should be much more lightweight (is my totally uneducated assumption). Every single icon in the entire app would be a component then.

Is there another replacement for partials, or are components actually efficient enough for us to use hundreds of them at once?

[galfert]

I couldn't find it just now, but I think I read somewhere that a template-only component should perform the same way as a template.

[raucao]

Ah, that makes sense. If there's no component code specified, then the framework can treat it like a partial. Thanks.

[raucao]

@galfert Another terrible negative about that approach is that it encloses every single icon in an Ember div. So if you have an <svg> in an <a>, Ember will throw a <div> between the two. That's some abysmal markup for just adding an HTML partial.

And I already found the solution: adding tagName: "" to the component definition removes the enclosing element entirely.

[raucao]

Regarding icon sets, https://feathericons.com seems nice. Or just plain Material icon: https://material.io/tools/icons/ for example.

[galfert]

FYI: there is an actual RFC to deprecate partials now. And it even states that partials "perform poorly in comparison to components".

[raucao]

Yeah, I already replaced them with components in some other Ember apps.