Feature Request - IlesIcon module

[TechAkayy]

Is your feature request related to a problem? Please describe.

It would be nice to have an iles-icon module that can provide the ability use & treeshake over 100,000 Iconify icons.

Similar to AstroIcon and NuxtIcon.

Describe alternatives you've considered

Currently, we can use unocss/preset-icons to use and treeshake iconify icons.

Sample repo - https://github.com/TechAkayy/nature-delights-with-iles (BaseIcon component used in HeroSection component)

• Stackblitz is not loading the above repo properly, so please clone the git repo to test.

• Due to current peer dependencies issue, to install use the force flag. Use command npm install --force

Thanks in advance!

[ElMassimo]

Hi 😃

Have you tried @islands/icons?

It allows you to use any icons, and with auto-import you get tree-shaking out of the box.

Here's an example in the docs.

[TechAkayy]

Thanks bunch Max.

The above feature request is a little different to the unplugin-icons way.

For eg, AstroIcon & NuxtIcon, we can specify the icon name as a prop. It's quite useful especially with antfu's vs-code iconify extension (https://github.com/antfu/vscode-iconify). It delivers a great developer experience.

Also, using Icon as a special component has great flexibility and has some advantages over using the unplugin-icons way which many of us have encountered. Here are some related threads - unplugin/unplugin-icons#203, Vuetify

Shipping an IlesIcon component as part of the current @islands/icons module that supports specifying icon-names as props might be a nice win supporting both unplugin-icons & the prop way.

For eg, Nuxt icon is wrapper on top of @iconify/vue component (https://github.com/nuxt-modules/icon/blob/main/src/runtime/Icon.vue). They also have another version called IconCSS (fetches the icon from iconify api at build/ssr time).

[ElMassimo]

I like the idea, I think it would make sense to favor this approach in @islands/icons.

Would like to know whether that approach would support configuring and using custom icons, as that's currently possible with unplugin-icons with very little effort.

[TechAkayy]

AFAIK, Iconify already provides some robust utilities to load custom icons.

• Unocss/preset-icons use the iconify utils to support custom icons - https://github.com/unocss/unocss/tree/main/packages/preset-icons#nodejs
• NuxtIcon currently doesn't support custom icons explicitly yet, Sebastien suggested using unplugin-icons for this or the third-party nuxt-icons module for now.
• AstroIcon handles local icons using svgo - https://github.com/natemoo-re/astro-icon#local-icons