gatsby-plugin-react-svgを使用してsvgをインポートする際に「InvalidCharacterError：Stringに無効な文字が含まれています」を受信する

Question

私はfont-awesomesvgアイコンを使用していましたが、それらが私のWebサイトのLCPに大きな影響を与える可能性があることに気付いたので、それらを置き換えようとしています。HTMLにアクセスして、svgコードをコピーし、これらのsvgコンポーネントをsvgファイルに配置しました。それらは私のフォトショップの模造品で画像として開くので、私はそれらが良いはずだと思いました。

を使用してページにそれらを含めようとすると

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

      <FacebookIcon />
      <Email /> 

そして、以下を私のに追加しますgatsby-config.js（インストール後gatsby-plugin-react-svg

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

エラーが発生します

InvalidCharacterError: String contains an invalid character

---

このエラーは私のMREで発生しています。これは、このGithubリポジトリで確認できます。私の実際のプログラムでは、svgは表示されませんでしたが、Webページは正常に読み込まれました。

Answer 1

インクルードされたフォルダーは正規表現であるため、この場合は1つのパスのみを含める必要があり/svg/ます。さらに、二重引用符を削除する必要があります（無効な文字であるため、エラーの原因となっています）。

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

コードの残りの部分は良さそうです。

SVGがID内部を共有している場合、次のインラインSVGに置き換えられるため、重大な問題が発生する可能性があることに注意してください。IDSVG形状内のsは、ベクトルごとに異なる必要があります。

Answer 2

SVG画像をreactコンポーネントとして追加するためのcreate-react-appドキュメントから

注：この機能が利用可能であり[email protected]、より高い、そして[email protected]より高いです。

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

試してみてください

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

...

  <FacebookIcon />
  <Email />