React+typescript에서 svg 사용하기

React와 typescript를 사용하여 개인 프로젝트를 진행하는 중 svg를 사용하기 위해 아래와 같이 작성하였다.

import styled from "styled-components";
import Logo from "../assets/images/logo.svg";

const Wrapper = styled.header`
  height: 40px;
  background-color: ${({ theme }) => theme.headerBg};
`;

const Header = () => {
  return (
    <Wrapper>
      <Logo />
    </Wrapper>
  );
};
export default Header;

문제 발생

Cannot find module '../assets/images/logo.svg' or its corresponding type declarations.

해당 모듈을 찾을 수 없다고 나타나고 있다.
아마도 Webpack이 js 파일은 이해하지만 ts는 이해하지 못하여서 발생한것 같다.

해결 방법

custom.d.ts 생성

webpack의 문서를 따르면 custom.d.ts를 생성하라고 안내한다.

declare module '*.svg' {
  const content: any;
  export default content;
}

다음 tsconfig.json의 include에 custom.d.ts를 추가한다.

"include": ["src/components", "custom.d.ts"]

svg를 컴포넌트화하여 사용할 경우

// custom.d.ts
declare module "*.svg" {
  import React = require("react");

  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

import { ReactComponent as Logo } from "../assets/images/logo.svg";

const Header = () => {
  return <Logo />
};
export default Header;

참고

• stackoverflow
• anna coding
• webpack 공식