[Feature Request]: SVG folder for offline mode and custom SVGs

[dany68]

Hi

I would like to know if some contributors might be interested in a change of the api. I would be happy to help.

The idea is to load icons from an SVG folder inside the assets folder. To achieve this, there is a need to implement an npm command, such as npm run icon:prepare, that will download the used icons from Iconify during the deployment script or before pushing to the git repository.

• The icons will be downloaded in @/assets/svg/[name of the collection]/[name of the icon].svg
• Additionally move the custom icons from @/components/global to @/assets/svg/custom

The main advantages are:

• No need to rely on iconify API
• Ability to include the icons in server-side rendering
• Improved performance
• Ability to change/customize the icons's SVG locally if needed
• Disable cache in the local storage from Iconify

[atinux]

Thank you for the feature request @dany68

This may bring some limitations:

• What about dynamic icons?
• How do you plan to detect the icons used in the user code?

[dany68]

What about holding a list of icons in an icons.config.ts file at the nuxt root folder ? All those icons will be downloaded as svg in the assets/icons folder. When using the <Icon> component it will import the svg markup server side. If the icon is not in the config list, it will fallback to the default behavior using the Iconify API.

Additionally we can make the following cmds:

• icon add/remove {name} that will add/remove the icon in the config file and download/delete the svg file from the assets/icon folder
• icon sync that sync the state of the assets/icon folder with the config file (in case of manual edit)

I would like to use this package for my projects but the fact that it needs to fetch on iconify client side is a blocking point. I think this approach can let the flexibility and improve performance for most apps.

[alexcroox]

Downloading the referenced icons in user code at build time would really improve the experience with iconify. It was a big gotcha for me not realising that icons are loaded from the network in production and that I can’t build offline apps with nuxt-icon.

[Rednas83]

I would love this feature too. Why not render the required icons directly from nuxt.config.ts

Something like: icons: ["uil:github"]

formkit/icons seems to be doing something similar with a more limited set of icons.

[atinux]

We are in discussion with Anthony to remake this module to support all different solutions, we will keep you posted.

[adinvadim]

I created module for working with local icons (color and monotone) with nuxt-icon or any iconify module. https://github.com/adinvadim/nuxt-local-iconify

[atinux]

cc @antfu what do you think to support local in your new iteration based on @adinvadim work?