this post was submitted on 04 Nov 2024
253 points (96.3% liked)
Open Source
31358 readers
206 users here now
All about open source! Feel free to ask questions, and share news, and interesting stuff!
Useful Links
- Open Source Initiative
- Free Software Foundation
- Electronic Frontier Foundation
- Software Freedom Conservancy
- It's FOSS
- Android FOSS Apps Megathread
Rules
- Posts must be relevant to the open source ideology
- No NSFW content
- No hate speech, bigotry, etc
Related Communities
Community icon from opensource.org, but we are not affiliated with them.
founded 5 years ago
MODERATORS
you are viewing a single comment's thread
view the rest of the comments
view the rest of the comments
Why are these TypeScript + JSX rather than just SVGs? It seems that the paths are defined as SVG but they are using some JavaScript framework to define the animations rather than just using SVG or CSS animations.
Because they're using events and downloading a few megabytes of extra javascript framework is, of course, a way better option than six lines of SVG stylesheets.
Edit: forgot a /s
It's jsx which is framework agnostic and used in several frameworks but most closely associated with react. It's easy to convert to html but I guess the author is a react dev and also these icons use framer-motion which is a react animation library to animate the cursor hover. Looks like you can strip those out if you wanted to use these icons in html without animations.
But it isn't, because they depend on framer-motion and React. JSX is, but the icons aren't.
You can trivially provide on-hover animations using CSS in SVG then your icons are framework agnostic. Not to mention smaller to download and more efficient to execute.