matschik/vue-hero-icons

Sending component name icon

productdevbook opened this issue · 3 comments

productdevbook commented

Sample:

<Heroicon name="AnnotationIcon" >

Otherwise I had to import all the icons. Can you do a solution to this ?

Screen Shot 2020-08-08 at 06 42 22

matschik commented

Importing all the icons will decrease the performance of your app. Doing <Heroicon name="AnnotationIcon" > will do exactly the same because we must import all icons in Heroicon component.
You must import your icon like this: import { AnnotationIcon } from @vue-hero-icons/outline
This is a choice and I will not change that.
You can do import { AnnotationIcon as HeroAnnotationIcon } from @vue-hero-icons/outline if you care about namespacing icon.

productdevbook commented

Many button components would like to use it this way. I will be happy if you can. Thank you. I respect your opinion. 🙏

<AppButton :icon-name="AnnotationIcon">

We use more than one different location button. It means more than one symbol.

matschik commented

This will not work. Your AppButton is waiting for an icon name from an integrated very specific library like Font Awesome, Feather icons,...
Check out your UI component library docs to see which icon names you can use. Normally there is an alternative via a vue slot where you can use any icon of your choice.