[typescript-react] svg를 import 하는 방법

typescript에서 svg를 import 하는 방법

svg를 넣으려는데, type 'typeof import("*.svg")' is not assignable to type 'string'.ts(2322) 에러가 발생하였다.

Steps

d.ts 생성

src 디렉토리에 custom.d.ts를 만든다.

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

tsconfig 수정

tsconfig.json 에서 include에 포함시켜준다.

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

컴포넌트에서 svg를 import

이제 svg를 import해서 img src로 사용할 수 있다.

import BlogHover from '../svg/blog_hover.svg';
export const SideContentIcons: React.FC = () => {
  return (
    <div>
      <img src={BlogHover} alt='' />
    </div>
  );
};

Ref

• stackoverflow
• next.js에서 svg를 사용하는 경우