Auto-import based on prop binding pattern

[TechAkayy]

Thanks for this amazing plugin. I'm using auto-import via unplugin-components, unicons (prefix is 'uil') iconset in the below example (https://stackblitz.com/github/techakayy/vuetify3-beta-unplugin-icons?file=src%2FApp.vue).

So, basically, <i-uil-android> will auto-import just fine as it uses the {prefix}-{collection}-{icon} tag pattern.

But, if I'm binding the icon as a prop (uilShoppingCart in the below example), then looks like I need to manually import the icon.

Is it possible to support auto-import based on prop-binding pattern as well, for example {prefix}{Collection}{Icon} (camelCase equivalent)?

[userquin]

@TechAkayy you can use the v-alert slots: https://stackblitz.com/edit/github-dranvy?file=src%2FApp.vue

You should also file an issue on vuetify: the prepend slot (and maybe also the append slot) will not add the additional i, so the docs are wrong or it is a bug: https://next.vuetifyjs.com/en/api/v-alert/#slots

[TechAkayy]

Many thanks @userquin. Yes, VAlert allows adding icons via slot. But, not all vuetify components supports icon via slot, for eg, VBtn, VAvatar etc, hence the above request.

[userquin]

@TechAkayy https://discord.com/channels/340160225338195969/660898563139567625/977160663057195038

[userquin]

@TechAkayy you can use preset-icons from UnoCSS instead:

• https://github.com/unocss/unocss/tree/main/packages/preset-icons
• https://uno.antfu.me/?s=i-twemoji-frog

[TechAkayy]

Ohh woww.. thanks bunch @userquin :-) Much appreciated. Unocss is new to me, going to explore it tonight!

[userquin]

there is no way to infer the icons, check this entry there is no way to infer a component from a dynamic string

[userquin]

vuetify should add a way to use custom icons via slot instead prop

[TechAkayy]

Unocss icons preset is an amazing combo for vuetify :-) I think I will leave unplugin-icons behind for now. Thanks a lot for suggesting it..

https://stackblitz.com/github/techakayy/vuetify3-beta-unocss-icons

[TechAkayy]

Added feature request in vuetify - vuetifyjs/vuetify#15164