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 :
https://github.com/uPortal-contrib/uPortal-web-components/issues/85

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
part)
- 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/.