svgr VS esbuild

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.

esbuild https://esbuild.github.io/ I usually write my bundling progmatically with it now.

esbuild for using & bundling npm packages

integration with state-of-the-art JavaScript bundler - esbuild

The so-called 'next generation compilers' have been gaining more and more momentum recently. The revolution started with the Go language powering ESBuild and now it's mainly focused on Rust and tools like SWC. What's the point?  - one may ask. Well, back in the past, JavaScript was used to build small or medium-sized web pages. However, this changed years ago and there are huge applications composed of hundreds of views and thousands of files available on the market.

Packaging - turning all your code, CSS, assets, etc. into the files you'll actually stick on your host server. e.g. webpack, maybe esbuild, etc..

Where do you begin if the code was in hundreds of separate modules? It's not clear if it's easier. You would take time to load the code into your brain regardless of the structure.

By the way, JavaScript parser in esbuild is a 16 thousand lines of code module too:

https://github.com/evanw/esbuild/blob/0db0b46399de81fb29f6fc...

ESBuild is a swift JavaScript compiler used for ViteJS. You can play with him in Angular, changing a single line in the angular.json file.

One of the advantages Vite provides is how incredibly fast it is at building. Vite uses rollup for bundling and esbuild for transforming. Esbuild is written in Go and is 10-100x faster than the JavaScript-based alternatives.

A bundler lets you write modular code and bundle it together into small packages to optimize load time. Popular bundlers: webpack, Parcel, esbuild, swc.