0

As part of my internship, I'm trying to optimize the loading times of my company's site which uses Gatsby. After analyzing using Webpack Bundle, I realized the site was having performance issues because SVGs were not being optimized. Looking at the codebase, it's likely because many SVGs are being used as React functional components. For example:

export const SomeSvg = ({ className = "", ...props }) => {
return (<svg> ... </svg>)
}

These components live in a directory called illustrations. There is an index.tsx file in illustrations that would then export these components for use in e.g. components in the pages directory.

export * from SomeSvg

The main confusion is on how to optimize SVG images that are React functional components.

Here are a list of approaches I've tried to optimize these SVGs, and why I think they don't work:

  1. Gatsby Image plugin: Doesn't work because it doesn't support optimization of SVGs. The SVGs are in the form of React components anyway, so there's no direct way to use this plugin.
  2. Gatsy Loadable Components: I can't seem to get it running because of an error, although I've followed the Gatsby Loadable Components setup: "Cannot convert undefined or null to object: ./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js:70". As a side note, I figured that using React Lazy wouldn't be helpful, as its implementation would fall under Gatsby Loadable Components.

Does anyone have any suggestions on how else to optimize for SVGs-as-functional-components?

Ferusel
  • 1
  • 1
  • If you use [`gatsby-plugin-svgr`](https://github.com/zabute/gatsby-plugin-svgr) you can load `.svg` files as React components (it creates the functional components for you) and have them automatically run through SVGO for optimization. Disclosure: I am a contributor. – coreyward May 16 '23 at 19:56

0 Answers0