svgr VS svgo

yeah, not sure why anyone would copy-paste SVG as JSX when SVGR exists: https://react-svgr.com/

SVGO (or SVGR for react) is making it a very easy process. Behind the scenes, it mostly deletes all unnecessary stuff for us.

The Icons and Fonts modules add depth to the visual language. Icons are managed through an efficient process that generates components from SVG files using SVGR and tsup. This ensures that icons are consistent and can be flexibly integrated across the system.

//@ts-check // eslint-disable-next-line @typescript-eslint/no-var-requires const { composePlugins, withNx } = require('@nx/next'); /** * @type {import('@nx/next/plugins/with-nx').WithNxOptions} **/ const nextConfig = { nx: { // Set this to true if you would like to use SVGR // See: https://github.com/gregberge/svgr svgr: false, }, }; const plugins = [ // Add more Next.js plugins to this list if needed. withNx, ]; module.exports = composePlugins(...plugins)(nextConfig);

Most of the time, developers tend to add svg images to an assets directory and import them either directly or as a React component. This process not only increases your app bundle size but also makes managing all the assets difficult. What if there was a way to manage all the application icons like the way we import them from any other icon library? Yes, react-svgr helps you manage all the icons in your React application.

If you are using react, there is a tool called SVGR, which will take in an SVG file and return a react component with all the props. This can be really useful if you want to treat SVG more like a markup that will be embedded directly into your HTML. This becomes really helpful when you want to style SVG through props or add transformations and animations. Using SVG directly in markup has so many perks and advantages to the point i don't use them as source in image tags.

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

We often come across large and complex SVG files full of redundancies, which can be a hassle. Fortunately, we can optimize this with SVGO, a tool that reduces the size of SVG files by removing unnecessary data without compromising quality.

SVGO (or SVGR for react) is making it a very easy process. Behind the scenes, it mostly deletes all unnecessary stuff for us.

Surprised this is being discussed here. It's worth noting that SVGOMG runs SVGO 3.0.0 while the latest version is 3.2.0 (so run SVGO locally for the latest optimizations), but I understand that once https://github.com/svg/svgo/pull/1943 is merged Jake will release an updated version of SVGOMG.

image-shrinker is a simple, easy to use open source tool for shrinking images. Under the hood it uses pngquant, mozjpg, SVGO, and gifsicle. You can also install these tools individually if you need to compress some images. I often use pngquantafter exporting PNGs for web projects from Figma or similar tools. I literally run it like this:

In addition to the techniques we’ve discussed so far, there are optimization tools available that can further enhance SVG images. These tools, such as SVGO and ImageOptim, offer valuable features to reduce file size and clean up SVG markup, making it easier to standardize and optimize the overall performance of SVG assets.

Open the terminal and cd to the folder containing your SVG files and run the command inkscape *.svg --export-plain-svg --export-type=svg And Inkscape is going to save your files as plain SVG and append the word "_out" to them. Note : Plain SVG files are not optimized for the web, you should use SVGO or any other Node.js tool, there are a lot of them on MPM

Look at software you use and identify underlying libraries.

SVGO https://github.com/svg/svgo is used by many graphics software but hasn't seen donations commensurate with usage https://opencollective.com/svgo