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.
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.
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.
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.
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.
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