typescript에서 svg 파일을 가져올 수 없습니다.

typescript에서 svg 파일을 가져올 수 없습니다.

---

에서 typescript(*.tsx)파일 나는이 문을 SVG 파일을 가져올 수 없습니다 :

import logo from './logo.svg';

Transpiler의 말 : [ts] cannot find module './logo.svg'.내 svg 파일은 <svg>...</svg>.

그러나 .js파일 에서 정확히 동일한 import 문으로 문제없이 가져올 수 있습니다. ts transpiler에 대해 어떻게 든 설정 해야하는 svg 파일 유형과 관련이 있다고 생각합니다.

TS 파일에서이 작업을 수행하는 방법을 공유해 주시겠습니까?

---

웹팩을 사용하는 경우 사용자 정의 유형 파일을 생성하여이를 수행 할 수 있습니다.

다음 내용으로 custom.d.ts 라는 파일을 만듭니다 .

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

출처 : https://webpack.js.org/guides/typescript/#importing-other-assets

---

사용을 지적 해 주신 smarx 에게 감사드립니다 require(). 따라서 제 경우에는 다음과 같아야합니다.

const logo = require("./logo.svg") as string;

* .tsx 파일에서 잘 작동합니다.

---

react + typescript 튜토리얼을 시도하는 동안 동일한 문제가 발생했습니다.
나를 위해 일한 것은 다음 수입 진술이었습니다.

import * as logo from 'logo.svg'

다음은 package.json의 종속성입니다.

  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts-ts": "3.1.0"
  },

누군가에게 도움이되기를 바랍니다.

---

구현 한 다른 방법이 있습니다. SVG 구성 요소를 만듭니다. 나는 require내 imports 와 함께 commonJS 문 을 사용하고 있다는 것이 나를 괴롭 혔기 때문에 이것을했다 .

참고 URL : https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript