gatsby-plugin-react-svg를 사용하여 svg를 가져올 때 "InvalidCharacterError : String contains an invalid character"수신

Question

글꼴 멋진 svg 아이콘을 사용하고 있었지만 웹 사이트의 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는 표시되지 않았지만 웹 페이지는 정상적으로로드되었습니다.

Answer 1

포함 된 폴더는 정규식이므로 /svg/귀하의 경우 단일 경로 만 포함해야합니다 . 또한 큰 따옴표를 제거해야합니다 (잘못된 문자이므로 오류의 원인).

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

나머지 코드는 괜찮아 보입니다.

SVG가 ID내부를 공유하는 경우 다음 인라인 SVG로 대체되므로 심각한 문제가 발생할 수 있습니다. IDSVG 모양 내부 의 s는 각 벡터마다 달라야합니다.

Answer 2

반응 구성 요소 로 SVG 이미지를 추가하기위한 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 />