[Feature Request] Include Icons in build instead of doing network requests

madebyfabian commented 1 year ago

Hey there, thanks so much for this module! It's absolutely great and easy to use. I noticed something though, where I couldn't find a config for. In Production, the icons are loaded over the network via https://api.iconify.design/ri.json?icons=icon-name. This can cause several issues, such as:

When API is potentially offline, users would not see icons?
In the EU it's actually a law issue with GDPR since the HTTP endpoint could receive & process some personal data in the headers (I'm sure you don't, but of course I don't have any control), like the IP, User-Agent, Refrerrer, etc. See the google fonts GDPR issue https://complianz.io/google-fonts-and-gdpr-does-it-work/)
The loading times for slow connections could be high, leading in slower web loading times
Building offline apps (PWAs) might be more difficult (I see that it gets cached in localStorage)
Other general issues I may not have listed above

Maybe I'm understanding wrong and the Module perfectly works without connecting to this API, but I think it would be great to have an option to store all used icons locally on build and request them from a local server endpoint.

vencho-mdp commented 1 year ago

Hey guys! I was thinking of implementing this feature but I was wondering which approach should I take. Maybe adding a module option like offline and then downloading icons at build-time and referencing them conditionally in the Icon component.

toniengelhardt commented 1 year ago

I think it's also important for online mode, bc for instance if I have a theme switcher and click on it (switching color theme and icon) the icon disappears for a few hundred ms until the new one is downloaded. Would be nice if in online mode it would download and cache all icons right away in the background after page load is finished.

You can see the effect here: https://webapicheck.com

suchorski commented 1 year ago

Hey guys! I was thinking of implementing this feature but I was wondering which approach should I take. Maybe adding a module option like offline and then downloading icons at build-time and referencing them conditionally in the Icon component.

Any news about that? Thanks

XStarlink commented 1 year ago

I found this in the Doc for building an offline bundle https://docs.iconify.design/icon-components/bundles/

suchorski commented 1 year ago

I found this in the Doc for building an offline bundle https://docs.iconify.design/icon-components/bundles/

Hi, thanks for the help. I took a look.

I'm using this https://github.com/nuxt-modules/icon and figured out that this module puts the svg directly on html, so it loads offline.

I saw that using capacitor and generating an apk the icon wasn't showing. So I think the problem is with capacitor and not from offline.

vencho-mdp commented 1 year ago

I think it's also important for online mode, bc for instance if I have a theme switcher and click on it (switching color theme and icon) the icon disappears for a few hundred ms until the new one is downloaded. Would be nice if in online mode it would download and cache all icons right away in the background after page load is finished.

You can see the effect here: https://webapicheck.com

@toniengelhardt I guess you could do that with plain CSS

toniengelhardt commented 1 year ago

I think it's also important for online mode, bc for instance if I have a theme switcher and click on it (switching color theme and icon) the icon disappears for a few hundred ms until the new one is downloaded. Would be nice if in online mode it would download and cache all icons right away in the background after page load is finished. You can see the effect here: https://webapicheck.com

@toniengelhardt I guess you could do that with plain CSS

It says "the icons won't be loaded on initial load and an HTTP request will be made to Iconify CDN to load them" in the README though?

lynxionxs commented 1 year ago

I need this. It only shows mdi:access-point-network-off text, instead of the icon when the PWA is offline.

mkdirnow commented 1 year ago

In the end, I downloaded icons from icones.js.org and integrated them using nuxt-icons. 😅

lynxionxs commented 1 year ago

In the end, I downloaded icons from icones.js.org and integrated them using nuxt-icons. sweat_smile

@mkdirnow how is that possible?

toniengelhardt commented 1 year ago

In the end, I downloaded icons from icones.js.org and integrated them using nuxt-icons. 😅

Seems inconvenient though...

mkdirnow commented 1 year ago

@mkdirnow how is that possible?

Seems inconvenient though...

In fact, most of the icons in my project are individual SVG files, and only a few places use icons from icones.js.org. However, this plugin is really convenient, and I'm looking forward to the offline feature.

warflash commented 1 year ago

I agree with everything @madebyfabian mentioned but want to add another point. The icon svg's are embedded into the rendered html nuxt renders meaning the nuxt server had to actually fetch them on request time - which can't be beneficial for performance/ time to first byte.

Tbh I was assuming things were bundled at build time as nowhere in the readme individual http requests are mentioned. Hoping this is something that can be resolved, going down the rabbit hole of individually creating components for each icon sort of defeats the purpose of the module unfortunately

valgeirb commented 1 year ago

I was using unplugin-icons (which bundled the icons at build time) before migrating to Nuxt.

Do you foresee this to be a difficult issue to solve?

leoboyerbx commented 1 year ago

With Unplugin icons you need to import manually the icons you use, with Nuxt icons its a string that could be any unicons icon. Maybe we could have a whitelist feature that bundles the whitelisted icons ?

valgeirb commented 1 year ago

With Unplugin icons you need to import manually the icons you use, with Nuxt icons its a string that could be any unicons icon. Maybe we could have a whitelist feature that bundles the whitelisted icons ?

Not if you set up auto-importing

frasza commented 1 year ago

As a user od the module I would also love to see the option to support bundled icons without having to do the request to get them. Only missing part for it to be perfect for us.

stafyniaksacha commented 7 months ago

We can create a nitro event handler to serve the icons data from either @iconify/json or @iconify-json/[collection-id] if installed, with a fallback to iconify api?

What do you think @Atinux ?

Atinux commented 7 months ago

In what case would it be more performant than Iconify API @stafyniaksacha ?

kantum commented 5 months ago

I'm currently developing a Vue application designed for offline use. I've been contemplating migrating to Nuxt due to its appealing features, such as automatic component imports and integrated UI libraries. However, I'm concerned that Nuxt may predominantly cater to applications with an online-first approach.

I'm eager to hear from anyone who has experience in building offline applications using Nuxt. Specifically, I'm interested in understanding any potential drawbacks or limitations encountered during development. Does Nuxt accommodate the needs of offline applications effectively, or are there significant challenges I should be aware of?

sohaha commented 3 months ago

Currently very unfriendly for offline applications.

Atinux commented 3 months ago

We are planning to rewrite this module to avoid making network requests.

As workaround, if you are using UnoCSS, you can use https://unocss.dev/presets/icons

If you are using TailwindCSS, you take take a look at https://github.com/egoist/tailwindcss-icons

If you are using Nuxt UI, we already support offline with UIcon component (based on TailwindCSS-Icons)

nuxt / icon

[Feature Request] Include Icons in build instead of doing network requests #34