[React/TS] SVG 사용하기

상황

svg를 컴포넌트화하여 사용하기 위해 아래와 같이 코드를 작성했다.

// src/DraggableCard/styles.ts

import styled from "styled-components";
import { ReactComponent as DeleteIc } from "../../assets/delteIc.svg";

export const DeleteIcStyle = styled(DeleteIc)`
  width: 40px;
  height: 40px;
`;

그리고 theme 설정을 위해 생성해 둔 기존 styled.d.ts에 아래와 같이 svg와 관련된 코드를 추가했다.

// src/styled.d.ts

import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    bgColor: string;
    boardColor: string;
    cardColor: string;
    cardTextColor: string;
    cardHeadColor: string;
  }
}

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

문제 발생

Module '"*.svg"' has no exported member 'ReactComponent'.
Did you mean to use 'import ReactComponent from "*.svg"' instead?

기존에는 custom.d.ts를 따로 만들어서 svg 관련 코드를 작성했는데 '굳이 만들어야 하나..?' 싶어서 기존 styled.d.ts에 코드를 작성했더니 발생한 문제였다.

해결

역시 하라고 하는 데에는 이유가 있었다. custom.d.ts를 만들어서 아래와 같이 코드를 분리했더니 문제가 해결됐다.

// src/custom.d.ts

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

추가) Vite로 빌드한 경우

Vite로 프로젝트를 빌드한 경우, 설정을 추가해야 한다.

이 과정에서 여러 블로그 글을 봤지만 하나씩 빼먹은 게 많아서 고생을 살짝 했다. 그러던 와중, 최종본을 발견하게 되었고, 그대로 했더니 문제를 해결할 수 있 었다. 참고한 블로그는 아래와 같다.

https://breathof.tistory.com/m/311