TINU-93 feat: Vite SVG 세팅을 진행합니다.

[jungwoo3490]

🔥 Related Issues

• close TINU-93 feat: Vite SVG 세팅을 진행합니다. #41

✅ 작업 내용

Vite SVG 세팅을 진행했어요.

사용 방법은 다음과 같아요.
만약 아이콘 SVG 파일이라면 assets/icons 폴더에 위치시키고, 이미지 SVG 파일이라면 assets/imgs 폴더에 위치시키면 돼요.
그 다음으로 assets/index.ts에서 다음과 같이 추가한 asset을 import & export 해주면 돼요.

주의해야 할 점은 SVG 파일을 React 컴포넌트로 사용하기 위해 import 해올 때 다음과 같이 경로 끝에 ?react를 반드시 붙여줘야 해요.

// assets/index.ts

import IcRabbit from "./icons/ic_rabbit.svg?react";

export { IcRabbit };

사용하는 방법이 헷갈릴 수 있어 예시로 Home 페이지에 샘플 토끼 SVG를 넣어뒀어요🐰
다음과 같이 SVG를 React 컴포넌트처럼 import해서 사용할 수 있어요.

// Home.tsx

import { IcRabbit } from "../assets";

function Home() {
  return (
    <>
      <IcRabbit />
    </>
  );
}

export default Home;

[juheehasaeyo]

무한 감사를 드립니다🙇‍♀️🍀😃

[jungwoo3490]

🚀