I was using font-awesome svg icons, but I realized that they might be having a significant effect on the LCP of my website, so I'm trying to replace them. I went into my html and copied the svg code, and put these svg ponents into svg files. They open as images in my photoshop knockoff so I figured they should be good.

When I try to include them in on my page using

import FacebookIcon from '../images/svg/facebookF.svg'
import Email from '../images/svg/email.svg'

      <FacebookIcon />
      <Email /> 

And adding the following to my gatsby-config.js (after installing gatsby-plugin-react-svg

{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: "/src/images/svg/"
    }
  }
}

I receive the error

InvalidCharacterError: String contains an invalid character

This error is happening in my MRE, which you can view on this Github repo. In my actual program the svgs were just not showing up, but the web page loaded fine.

I was using font-awesome svg icons, but I realized that they might be having a significant effect on the LCP of my website, so I'm trying to replace them. I went into my html and copied the svg code, and put these svg ponents into svg files. They open as images in my photoshop knockoff so I figured they should be good.

When I try to include them in on my page using

import FacebookIcon from '../images/svg/facebookF.svg'
import Email from '../images/svg/email.svg'

      <FacebookIcon />
      <Email /> 

And adding the following to my gatsby-config.js (after installing gatsby-plugin-react-svg

{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: "/src/images/svg/"
    }
  }
}

I receive the error

InvalidCharacterError: String contains an invalid character

This error is happening in my MRE, which you can view on this Github repo. In my actual program the svgs were just not showing up, but the web page loaded fine.

• javascript
• reactjs
• svg
• gatsby

3 Answers 3

From the create-react-app docs for adding SVG images as react ponents

Note: this feature is available with [email protected] and higher, and [email protected] and higher.

https://create-react-app.dev/docs/adding-images-fonts-and-files/

Try

import { ReactComponent as FacebookIcon } from '../images/svg/facebookF.svg';
import { ReactComponent as Email } from '../images/svg/email.svg';

...

  <FacebookIcon />
  <Email /> 

The included folder is a regular expression so, it must only contain a single path,/svg/ in your case. In addition, you need to remove the double quotes (what is causing your error since it's an invalid character):

{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: /svg/
    }
  }
}

The rest of the code looks good.

Keep in mind that if the SVG shares any ID inside, it may cause severe issues since they will be replaced for the following inlined SVG. The IDs inside the SVG shapes must be different for each vector.

With react-scripts 5.0.1 + React 18.2.0 + TypeScript, I'm having to do this:

// custom.d.ts (in project root)
declare module "*.svg" {
  const content: string;
  export default content;
}

// MyComponent.tsx
import image from "./image.svg";

const MyComponent = () => {
  return <img src={image} />;
};

Contrary to the docs, so can't promise this is the perfect way to do it. Looks elegant enough to me though.

For background info about custom.d.ts, see this StackOverflow answer.