Feature Request - IlesIcon module about iles HOT 4 OPEN

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

from iles.

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.

from iles.

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.

from iles.

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

from iles.