[Init/#6] svgr 세팅

[se0jinYoon]

항목	내용
⏰ Time	30M
🌱 Page	공통
#️⃣ Issue Number	6

Closes #6

☀️ New-insight

• svgr 세팅을 위해 vite-plugin-svgr 설치했습니다.
• svgr을 컴포넌트화 하기 위해서 custom.d.ts 에 svg 컴포넌트 타입을 지정해두었습니다.
  ( .d.ts 파일은 기존 js 모듈을 ts에서 사용할 수 있도록 타입을 정의할 수 있는 파일 )

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

참고자료 - 공식 문서

⁉️ Question

📸 Screenshot

[j-nary]

언니 넘모 고생많았엉요 !! 확인입니당 ~
나 합세 때 svgr 설정했을 때 .d.ts 파일이 아래와 같았는데

// svg.d.ts
declare module '*.svg' {
    const content: React.FC<React.SVGProps<SVGAElement>>
    export default content
}

기존 js 모듈을 ts에서 사용할 수 있도록 타입을 정의해줄 수 있는 파일이라는 건 처음 알았네용
많이 배워갑니당 !!

[ijieun]

고생하셨습니다!! svgr 을 처음 써보는데 이렇게 세팅하면 되는 군요!! 배워갑니다 :>

[yarimu]

고생하셨습니다..!!
js+리액트 환경에서만 svgr 초기세팅을 해보았는데, ts 환경에서는 이렇게 하는 것이군요..!! 배워갑니당

[lydiacho]

LGTM