Can't import SVG into React Component (says module not found)

Question

Before marking this question as a duplicate, please note that I have already viewed the following and their soutions, but to no avail: Cannot import SVG file into react React SVG import as a Component does not render React/Typescript cannot import svg file as component

I'm trying to import an SVG into my ReactJs 18 component, but during "build" it says it can't find the module (typescript detects it just fine with the file open though).

import wordmark from '../Images/wordmark.svg';
.
.
.
export const Header: FunctionComponent<{}> = () => {
  const { banner } = useContext(BannerContext);
  const { deviceMetadata } = useShadowController();

  // Just render plain old header
  if (!deviceMetadata) {
    return (
      <section className="site-header">
        <div className="site-header-logo">
          <Link to={routes.home}>
            <img
              height="25px"
              src={wordmark}
              alt="test"
            />
          </Link>
        </div>
      </section>
    );
  }
.
.
.
}

The svg has the following (had to edit some parts to hide personal info):

<svg width="134" height="18" viewBox="0 0 134 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="134" height="18" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="translate(0 -0.0104762) scale(0.00142857 0.0106349)"/>
</pattern>
<image id="image0" width="700" height="96" xlink:href="data:image/png;base64,confidential"/>
</defs>
</svg>

I have tried the following:

Creating a index.d.ts file with the following:

declare module "*.svg" {
  import React = require("react");
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

Importing the svg has a component (import { Component as logo } from .....)
Importing the svg has default (import { default as logo } from ....)
Placing the svg in the same directory as the component
Updating tsconfig.json
Passing the relative path directly into src (doesn't throw any errors but also doesn't render)

At this point I'm at my wits end. Any help is much appreciated.

Can't import SVG into React Component (says module not found)

0 Answers0