gatsby-image에서svg 사용하기

gatsby-image에서svg를 사용하고 싶을 때 필기에 빠졌어요.

문제.

같은 방식으로svg의 다른 확장자 (png,jpg) 의 그림을 얻을 수 있으며,gatsby-image로 표시하려고 해도 표시할 수 없습니다.

const Index = () => {
  const images = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "like.svg" }) {
        childImageSharp {
          fluid {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `);
  return (
    <div>
      <Img fluid={images.file.childImageSharp.fluid} />
    </div>
  );
};

해결책

svg를 사용할 때childImageSharp가 아니라publicURL을 가져와 탭으로 표시합니다.

const Index = () => {
  const image = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "like.svg" }) {
        publicURL
      }
    }
  `);
  const { publicURL } = image.file;
  console.log(publicURL); ///static/e152474a47557a24b12490f46840ebb7/like.svg
  return (
    <div>
      <img src={publicURL} width="100px" height="100px" alt="like" />
    </div>
  );
};

잘 표현했어.너무 좋아요.😘

gatsby-image에서svg가 지원되지 않음

issue
gatsby-plugin-sharp/gatsby-image doesn't handle SVGs or GIFs. The fluid query (in your case) creates multiple images from 0px to 1060px (+ bigger sizes for retina). That wouldn't make sense with SVGs as they're vector files and don't need different sizes - they can scale indefinitely without loss of quality.
이런 댓글이 있습니다.
의역하면gatsby-plugen-sharp와gatsby-image는svg와gif를 처리하지 않습니다.flidquery는 0px에서 1060px의 여러 이미지를 생성하지만svg는 벡터 이미지이기 때문에 필요없습니다.
그렇습니다.
즉svg 형식을 받아들이지 않는query를 던져서null이 돌아왔다는 것이다.