[React] Vite + React + TS 환경에서 svg component화 오류시 대안법

import { ReactComponent as Google } from "../../../assets/icons/google.svg";

위와 같이 svg 컴포넌트화를 해서 사용하려고 했다.

그러나 오류가 계속 발생해서 해결하려고 삽질을 2시간이나 했으나... 해결하지 못해서 다른 방법으로 svg 적용했다...

---

내가 시도한 svg 컴포넌트화

npm install vite-plugin-svgr

ts.config.ts

"include": ["src", "client.d.ts"]

client.d.ts

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

 vite.config.ts

plugins: [react(), svgr()]

해줬으나...

불러오지를 못하고 있다...

---

해결방법으로

react-inlinesvg 라이브러리를 사용해서 불러오는 것으로 대신했다.

npm install react-inlinesvg

 

import google from "@/assets/icons/google.svg";
import InlineSVG from "react-inlinesvg";

<InlineSVG src={google} width={24} />

이렇게 하면 잘 실행된다!

 

svg를 컴포넌트화하려는 이유는 가독성 향상과 스타일을 동적으로 바꾸기 위해서다