web-component and icons

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view

web-component and icons

Julien Gribonvald
Hi folks,

I would like to talk about a problem using web-font (using @font-face)
for icons on web-components. This is related to this issue :

To use icons into web components we have two choice (is there others ?):

- using web-font
- using components like fontawesome that load a svg

When using a component, mainly it uses a web-font but I don't see how to
override that expect overriding css.

Here is my feed back about the two choice:

#  PRO  using web-font

- ultra lightweight packaging
- only need to add some css
- use the portal font
- solve bug of font-face loading into shadow-dom on chrome and firefox
64 & +
- reuse a font-face already loaded
- supported by all browsers

#  CON  using web-font

- depends on uPortal web-font update (if an update is done we should
watch on each elements => loose web-component isolation benefit on this
- need to load the font also in html dom to avoid @font-face loading
problems into firefox nightly and chrome

# PRO using fontawesome component

- isolated css and elements not depending on uPortal
- no @font-face problem on firefox/chrome as using svg icons

#  CON using fontawesome component

- need to load a component and all his declared icons (not lightweight
for mobile)
- svg icons doesn't seem working totaly for IE (somes parts aren't
working, and I don't know if there is a fallback system)

So my choice would be to use web-font, but what do you think about that ?

I believe that the svg icons is the futur but how to do if we can't
support all browsers and avoid that mobile have too much datas to load ?

Best regards,

Julien Gribonvald

You received this message because you are subscribed to the Google Groups "uPortal Developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
Visit this group at https://groups.google.com/a/apereo.org/group/uportal-dev/.