Merge pull request #50 from MikeCheek/dev

Dev

gatsby-config.ts

@@ -61,6 +61,7 @@ const config: GatsbyConfig = {
     },
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
+    'gatsby-plugin-loadable-components-ssr',
     {
       resolve: 'gatsby-plugin-robots-txt',
       options: {
@@ -92,11 +93,24 @@ const config: GatsbyConfig = {
       __key: 'assets',
     },
     {
-      resolve: 'gatsby-plugin-react-svg',
+      resolve: 'gatsby-plugin-svgr',
       options: {
-        rule: {
-          include: /assets/,
-          omitKeys: ['xmlnsDc', 'xmlnsCc', 'xmlnsRdf', 'xmlnsSvg', 'xmlnsSodipodi', 'xmlnsInkscape', 'id'],
+        prettier: true, // use prettier to format JS code output (default)
+        svgo: true, // use svgo to optimize SVGs (default)
+        svgoConfig: {
+          plugins: [
+            {
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  removeViewBox: false,
+                },
+              },
+            },
+            'cleanupIds',
+            'removeXMLNS',
+            // { name: 'removeAttrs', params: { attrs: 'xmlns*' } },
+          ],
         },
       },
     },

global.d.ts

@@ -1,18 +1,15 @@
-declare module '*.svg' {
-  import React from 'react';
-
-  const ReactComponent: SVG;
+declare type SVG = React.FunctionComponent<React.SVGAttributes<SVGElement>>;
 
-  export default ReactComponent;
+declare module '*.svg' {
+  import { FC, SVGProps } from 'react';
+  export const ReactComponent: FC<SVGProps<SVGElement>>;
 }
 
 declare module '*.mp4';
 declare module '*.webm';
 
 declare type LinkType = 'internal' | 'external';
 
-declare type SVG = React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;
-
 declare type ImageDataType = {
   images: {
     fallback: {

package.json

@@ -22,30 +22,31 @@
     "@bsmnt/scrollytelling": "^0.3.3",
     "@fontsource/cairo": "^4.5.13",
     "@fontsource/poppins": "^4.5.10",
-    "@loadable/component": "^5.16.3",
-    "@types/loadable__component": "^5.13.8",
+    "@loadable/component": "^5.16.4",
+    "@svgr/webpack": "^8.1.0",
     "@types/p5": "^1.7.6",
     "canvas-confetti": "^1.6.1",
-    "gatsby": "^5.8.0",
+    "gatsby": "^5.13.6",
     "gatsby-plugin-canonical-urls": "^5.9.0",
     "gatsby-plugin-google-tagmanager": "^5.9.0",
     "gatsby-plugin-image": "^3.8.0",
+    "gatsby-plugin-loadable-components-ssr": "^4.3.2",
     "gatsby-plugin-manifest": "^5.8.0",
     "gatsby-plugin-react-i18next": "^3.0.1",
-    "gatsby-plugin-react-svg": "^3.3.0",
     "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-sass": "^6.8.0",
     "gatsby-plugin-sharp": "^5.8.1",
     "gatsby-plugin-sitemap": "^6.8.0",
+    "gatsby-plugin-svgr": "^3.0.0-beta.0",
     "gatsby-source-filesystem": "^5.8.0",
     "gatsby-transformer-sharp": "^5.8.0",
     "gsap": "^3.12.5",
     "i18next": "^23.7.7",
     "js-cookie": "^3.0.5",
     "p5": "^1.9.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-circular-progressbar": "^2.1.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-i18next": "^13.5.0",
     "react-intersection-observer": "^9.4.3",
     "react-p5": "^1.4.1",
@@ -57,6 +58,7 @@
   "devDependencies": {
     "@types/canvas-confetti": "^1.6.1",
     "@types/js-cookie": "^3.0.3",
+    "@types/loadable__component": "^5.13.9",
     "@types/node": "^18.15.8",
     "@types/react": "^18.0.29",
     "@types/react-dom": "^18.0.11",