[dead]
Show HN: Free animated icon library for Vue
11–20 of 22 posts
Re: Show HN: Free animated icon library for Vue
#12That's awesome. I wish there was like a "raw code" option like on many icons sites you can just copy the SVG.
Thanks and noted!
I can add something like this, limited to "simple" animations, tho. Transform, opacity, stroke-draw ones should work, then you'd need zero dependencies. Everything that uses spring, path-morph or state-driven animation likely cant be flattened to static code.
Oh and only the hover trigger would be usable that way, not the others.
Re: Show HN: Free animated icon library for Vue
#13Can't these just be done as SVG hover transitions? Then you have the option to use them inline with no JS.
For a subset, definitly. Anything that's just transform/opacity/stroke-draw can be done.
However, this works only for hover animations then, I believe. The library also provides other triggers.
And some icons use springs, where when you hover away mid-animation it settles "smoothly".
But yes, I can defs add a no JS option for selected icons :)
Re: Show HN: Free animated icon library for Vue
#14Nit on the page itself: let me use my back button after opening an icon instead of having to reach up for the close button.
When I hit back and get returned here when I wanted to check out other icons made me not go back to check out others.
Re: Show HN: Free animated icon library for Vue
#15Nit on the page itself: let me use my back button after opening an icon instead of having to reach up for the close button. When I hit back and get returned here when I wanted to check out other icons made me not go back to check out others.
Fair, will adjust :D Didn't test too much on mobile tbh
Re: Show HN: Free animated icon library for Vue
#16Nit on the page itself: let me use my back button after opening an icon instead of having to reach up for the close button. When I hit back and get returned here when I wanted to check out other icons made me not go back to check out others.
Fair, will adjust :D Didn't test too much on mobile tbh
Nice. Yeah, I was checking it out while drinking my coffee and thought I'd share the impact of the experience, because I'm sure you'd like folks to hang around and check it out more!
Re: Show HN: Free animated icon library for Vue
#17Earlier quoted context omitted.
Thank you for the great comment, the effort, and your view/experience shared! The droplet is what I found unexpected, too, indeed. Yet, the overall ideas, including the reverse animations on rotating ones, with some funky ease, is purely genius, I believe... If the actual animations/work are of hand of the Tim Rietz, the developer signed alongside Claude LLM, the they are a great artist! Related: https://icones.js.or…
Thanks! Great to learn about other new icons libs, too
Thank you for the response!
To clarify, are you the author of the animations, or is it anyone/anything else as LLM, as the Claude used?
It seems like some look like of artists' Elliot Sutton (imskyleen at GitHub) and/or and dmytro (pqoqubbw at GitHub).
Oh... and the animation ease effect of rating items is also of dmytro's, isn'it it? It may be seen at:
- https://lucide-animated.com/
In this case, what is the main reason of your/LLMs project, if I may ask? What does it provide the aforementioned don't?
// ----- Edit (+20m)
I see, your project is a port to Vue you started:
- https://github.com/imskyleen/animate-ui/discussions/178
Relatively similar to projects as RadixVue, ShadcnVue, and the following:
- https://github.com/iloomilo/itshover-vue
Just in case, the aforementioned `icones.js.com` is not "new", but a project of Vue Community, initiated by Anthony Fu (antfu at GitHub), who is a member of the Vue core Team.
Regardless, though I don't appreciate use of LLMs (and presenting its output as personal work/effort), I appreciate you heartfelt for the added support for the ineffably marvelous Vue!
Re: Show HN: Free animated icon library for Vue
#18Some of the animations are really good and make sense based on the icon.
Others just draw the SVG path or wiggle/bounce a bit.
If I were the creator here I might differentiate this into two buckets: custom animation or not. And then allow the generic animations to be applied to any of them.
Re: Show HN: Free animated icon library for Vue
#19Some of the animations are really good and make sense based on the icon. Others just draw the SVG path or wiggle/bounce a bit. If I were the creator here I might differentiate this into two buckets: custom animation or not. And then allow the generic animations to be applied to any of them.
Good idea, might also make it easier to pick icons / see whats there already and what might need more work (if it makes sense based on the icon, as you mentioned)
Re: Show HN: Free animated icon library for Vue
#20Earlier quoted context omitted.
Thanks! Great to learn about other new icons libs, too
Thank you for the response! To clarify, are you the author of the animations, or is it anyone/anything else as LLM, as the Claude used? It seems like some look like of artists' Elliot Sutton (imskyleen at GitHub) and/or and dmytro (pqoqubbw at GitHub). Oh... and the animation ease effect of rating items is also of dmytro's, isn'it it? It may be seen at: - https://lucide-animated.com/ In this case, what is the main re…
Lot to unpack in the comment, but maybe to clarify from my end >
I'm not the author of most of the animations so far, only a tiny fraction is remade as of now, I just started building tooling for me to develop new / more useful animations or animations for icons that dont exist yet from the lucide lib.
The majority of animations was ported from animate-ui and lucide-animated (github.com/imskyleen/animate-ui, lucide-animated.com), mentioned in the attributions, also visiable on the bottom of each icon page.
The reason I worked on this was that these components were built for react, and we're on vue for all of our work projects (and I use vue for my private ones, too).
Then I added additional QoL features to make the icons easy to use, not conflict with static lucide icons you might already use, and fix various animation bugs I encountered.
Not possible time-wise without LLMs here, for this project I see them mostly as an enabler to make this possible :)