오늘의 목표

🌱 Gatsby 에 svg 적용하자!

오늘의 퀴즈 🙃

Gstsby에서 svg 적용하기

⚠️ 문제 상황

평소와 같이 리액트에서처럼 svg 파일을 받아 이용해 주려 했는데 이미지가 전혀 나오지 않는 문제가 발생했습니다

⚠️원인

1. 처음에는 경로를 확인해 주었으나, 경로에서 문제가 없다는 것을 확인 했습니다

2. 검색 후 나온 힌트들!

   ✨svg를 지원하지 않는 라이브러리를 사용하고 있을 수도 있다!.

   ✨별개의 설정을 해줘야지 svg를 사용 할 수 있다!

⚠️ 시도

1. 1차적으로 라이브러리 설치

2. 라이브러리 설치 후 진행해 주었으나 두 가지 상황이 생겼다

   ✨ 컴포넌트로 이용해야 한다

   ✨ 컴포넌트를 이용해주면 바로 에러가 발생한다

3. 그냥 라이브러리를 사용하지 않고 진행해도 되었던거야....^^…

• 해결시 참고한 글

⚠️ 최종 코드

import LogoReact from "../assets/react.svg";
const ICON = [
  { name: "react", value: LogoReact },
  { name: "js", value: "a" },
  { name: "html5", value: "a" },
  { name: "css", value: "a" },
];
const ICON_MAP = new Map(ICON.map((icon) => [icon.name, icon.value]));
<MainContentTechImg alt="react" src={ICON_MAP.get("react")} />

위와 같이 svg파일을 별도로 import 해서 src에 넣어주면 됩니당!

여기서 의문

🤔 svg를 사용해 주는 이유가 뭐지?. 뭐가 좋아서 그런걸까?