ElMassimo/iles

Feature Request - IlesIcon module

Opened this issue · 4 comments

TechAkayy commented

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 commented

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 commented

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

  • 👍1
ElMassimo commented

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.

  • 👍1
TechAkayy commented

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