matschik / vue-hero-icons

A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/heroicons, as Vue 2 functional components.
https://vue-hero-icons.netlify.com
MIT License
100 stars 8 forks source link

Sending component name icon #128

Closed productdevbook closed 4 years ago

productdevbook commented 4 years ago

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 4 years ago

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 4 years ago

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 4 years ago

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.