svgr VS framer/motion

Really interesting framework agnostic approach, but I think SVGR is a better option for my React homies. It imports an SVG file as a React component. Shouts also to react-icons if Font Awesome, Material Icons and friends are more your bag.

SVGR

There is another way to import an SVG in Create React App, though. We can import the SVG as a ReactComponent. This is because CRA leverages SVGR to process SVGs.

const { types } = require('@babel/core'); module.exports = { ... template: function svgrCustomTemplate( { imports, interfaces, componentName, props, jsx, exports }, { tpl } ) { // меняем корневой элемент на SvgIcon jsx.openingElement.name.name = 'SvgIcon'; jsx.closingElement.name.name = 'SvgIcon'; // https://github.com/gregberge/svgr/issues/530 // при изменении корневого элемента пропадает спред пропсов // поэтому необходимо добавить спред пропсов самостоятельно jsx.openingElement.attributes.push( types.jSXSpreadAttribute(types.identifier('props')) ); return tpl` ${imports}; import { SvgIcon } from '../SvgIcon'; ${interfaces}; const ${componentName} = (${props}) => ( ${jsx} ); ${exports}; ` } }

To solve these problems and have a better development workflow, I have created a package called cl-djula-svg which automates all the above steps for you. The inspiration for this package came from svgr which exactly does the same thing in React applications. It takes a SVG file, process some override logic, optimize it and create React wrapper components based on the SVG content.

I normally use SVGR but every time a designer sends me an svg i’ll pass it in svgOmg that deletes all the unnecessary attributes and propietary code from figma, illustrator &co.

https://github.com/gregberge/svgr/issues/362 this may help as well.

If you're using Webpack, CRA, or Next.js, you should be using SVGR.

SVGR is the library that powers this ability. Setting it up could be a little hairy, thankfully many popular frameworks (Create React App, Gatsby) support this feature out of the box.

⭐ Framer Motion -https://framer.com/motion/

I used Framer Motion for the animations which is an outstanding library and I learned a lot about layout's and groups. Another awesome mention I want to credit here is a library called cva or class-varience-authority. The amount of class concatication it has saved me from while building reactive components is just incredible.

Thank you so much! I can't take all the credits however – I'm building on top of the shoulder of giants/amazing OSS libraries like cobe.vercel.app, airbnb.io/visx, framer.com/motion, radix-ui.com, tailwindcss.com, and many more! :)

FWIW, I built the site using amazing OSS libraries like cobe.vercel.app, airbnb.io/visx, framer.com/motion, radix-ui.com, tailwindcss.com, and many more – so maybe you can refer to those to build something similar!

Not really – the globe was made with cobe.vercel.app, the graphs with airbnb.io/visx, the animations with framer.com/motion – all of which are really amazing open-source libraries!

I'm trying with framer motion but I still can't do it, can anyone help me?

framer-motion : To Add animation in project

// ... import { SiFramer, SiTailwindcss, SiApple, SiVercel, SiTwitter, SiTesla, SiArchlinux, SiDeno, SiFlutter, SiGithub, SiNike, SiDiscord, } from 'react-icons/si' export const commands: Command[] = [ { icon: , text: 'Framer Motion', perform: () => window.open('https://framer.com/motion', '_blank'), }, { icon: , text: 'TailwindCSS', perform: () => window.open('https://tailwindcss.com', '_blank'), }, { icon: , text: 'Apple', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Arch Linux', perform: () => window.open('https://apple.com', '_blank'), }, { icon: , text: 'Vercel', perform: () => window.open('https://vercel.com', '_blank'), }, { icon: , text: 'Tesla', perform: () => window.open('https://tesla.com', '_blank'), }, { icon: , text: 'Deno', perform: () => window.open('https://deno.land', '_blank'), }, { icon: , text: 'Discord', perform: () => window.open('https://discord.com', '_blank'), }, { icon: , text: 'Flutter', perform: () => window.open('https://flutter.dev/', '_blank'), }, { icon: , text: 'GitHub', perform: () => window.open('https://github.com/', '_blank'), }, { icon: , text: 'Nike', perform: () => window.open('https://nike.com/', '_blank'), }, { icon: , text: 'Twitter', perform: () => window.open('https://twitter.com', '_blank'), }, ]

Framer Motion has more than 15,000 GitHub stars and 1.2 million weekly NPM downloads.

I would suggest react-three-fiber for people who want to use Threejs in react, makes it so much nicer to work with. And framer motion for when you need an animation library.