SVG Image Import: Support for defaultProps will be removed from function components

All my imports for SVG images are showing this error and making it difficult to debug other issues.

Setup

Gatsby 5.13.3 using Typescript gatsby-plugin-react-svg 3.3.0

configs

gatsby-config.ts

{
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /img\/.*\.svg/, 
        },
      },
    },

svg.d.ts

declare module "*.svg" {
  const content: any;
  export default content;
}

sample code

import WarningIcon from 'img/icons/icon-warning.svg';

Sample Error Browser Warning

There's a lot of them.

Warning: IconWarning: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
    at IconWarning
    at div
    at div
    at div
    at AlertBar (webpack-internal:///./src/components/partials/alert-bar.tsx:24:5)
    at div
    at Layout (webpack-internal:///./src/components/layout.tsx:28:5)
    at Kitchen (webpack-internal:///./src/pages/kitchen.tsx?export=default:61:5)
    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:24:76)
    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:34:30)
    at RouteHandler
    at div
    at re (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:9865)
    at ee (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:9680)
    at ae (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:10957)
    at oe (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:10831)
    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:23:35)
    at RouteUpdates (webpack-internal:///./.cache/navigation.js:252:32)
    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:18:30)
    at LocationHandler (webpack-internal:///./.cache/root.js:61:29)
    at eval (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:8283)
    at F (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:7181)
    at H (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:7483)
    at WithErrorBoundary()
    at G (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:9074)
    at Root
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:129:32)
    at SliceDataStore (webpack-internal:///./.cache/query-result-store.js:176:32)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:20:35)
    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:119:5)
    at RootWrappedWithOverlayAndProvider
    at App (webpack-internal:///./.cache/app.js:167:80)

Same here. I confirm this issue. It shows up after I upgraded React from v18.2.79 to v18.3.2. Can't find a solution so far

[UPDATE] I've just migrated away from using this plugin because it seems like the issue comes from the dependency, the package svg-react-loader which is not actively maintained. I've replaced this plugin with gatsby-plugin-svgr (don't forget also adding the @svgr/webpack as a dependency). It does the job but I had to slightly adjust the component usage in this manner:

// BEFORE
import MySvg from './my-img.svg';
render <MySvg />;

// NOW
import { ReactComponent as MySvg } from './my-img.svg';
render <MySvg />;

Also, I had to adjust my TypeScript types' definition for the SVG files. It looks like this now:

declare module '*.svg' {
  import { FC, SVGProps } from 'react';
  export const ReactComponent: FC<SVGProps<SVGElement>>;
}

jacobmischka / gatsby-plugin-react-svg