search

LeCoupa / vuetimeline

🕵️‍♀️🕵️‍♂️ One easy-to-use component for Vue.js to build beautiful responsive timelines.
https://www.growthbunker.dev/vuetimeline
MIT License
349 stars 44 forks source link

add support for other icon libraries #1

Open vesper8 opened 4 years ago

vesper8 commented 4 years ago

First of all, really great package and love the look on your website!!

I see that you're using Material icons by default.. they are not displaying at all on my screen, I assume that's because I need to pull in the Material icons css file somewhere.. not sure if this is mentioned in the docs? In any case, I already use font-awesome in my project and would like to avoid having to pull in an additional icon library, those are not lightweight either.

Could you possibly make it a little more flexible and add support for other popular libraries, such as font-awesome ?

this could either be a configuration when initializing the plugin with Vue.use, or it could through a slot maybe? I would prefer the configuration.

What do you think?

Thanks!

LeCoupa commented 4 years ago

Thank you :)

I am using the BaseIcon component from VueDarkMode.

What is strange is that I thought this line automatically imported the necessary font file.

https://github.com/growthbunker/vuedarkmode/blob/2dd28b674b1dbdd80e86acedb05a5ff3435781fc/src/components/base/BaseIcon.vue#L165

vesper8 commented 4 years ago

well.. I'm not using your vuedarkmode package. On my screen the icon wasn't visible because I have a white background maybe? I'm not sure if you're implying that this vuedarkmode dependency is loaded by default as part of vuetimeline? If it is.. then I would ask you to reconsider.. we all want to keep our bundles as light as possible so best not to make it too opinionated. I love your timeline package in general but I would want to be able to choose which icons I use for those cases, such as mine, where I'm already committed to another icon solution. And the darkmode looks great but I really just want the timeline features and would like it to be as lightweight as possible : )

LeCoupa commented 4 years ago

The vuedarkmode package is a dependency on package.json, but I took care to only import two components from the library in vuetimeline. The goal is, of course, to make the bundle as lightweight as possible.

For your first question, if your background is white, it might hide the icon (which is white by default).

I keep this issue opened. I will think about a clean way to let people import their icons.

jamesthedev commented 3 years ago

well.. I'm not using your vuedarkmode package. On my screen the icon wasn't visible because I have a white background maybe? I'm not sure if you're implying that this vuedarkmode dependency is loaded by default as part of vuetimeline? If it is.. then I would ask you to reconsider.. we all want to keep our bundles as light as possible so best not to make it too opinionated. I love your timeline package in general but I would want to be able to choose which icons I use for those cases, such as mine, where I'm already committed to another icon solution. And the darkmode looks great but I really just want the timeline features and would like it to be as lightweight as possible : )

Hey I know this is almost two years old, but I had the same issue with icons not showing. I added color: black to the gb-base-icon in my CSS and now I can see it the icons! It took me forever to figure out.