느린 개발자

Typescript로 프로젝트를 진행하던 도중 svg, png 파일에 대해 에러가 발생하였습니다. 이것저것 검색해 보고 알아본 결과로 Nuxt와 React에서 이런 에러가 발생했을 때 해결 방안을 알아보겠습니다.

 

Nuxt , Vue에서 해결 방안

루트 경로에 custom.d.ts를 생성합니다.

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

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

 

tsconfig.json 에서 custom.d.ts를 설정합니다.

// tsconfig.json

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

 

svg 아이콘을 컴포넌트로 해서 사용했을 때 에러가 사라지는 것을 확인할 수 있습니다.

<template>
 <div>
   <iconTest/>
 </div>
</template>
<script lang="ts">
import Vue from 'vue'
import iconTest from '~/assets/images/icon/iconTest.svg?inline'  //에러 사라짐

export default Vue.extend({
 name: 'test,
 components:{
 	iconTest
 }
})

</script>

 

---

React 에서 해결 방안

루트 경로에 custom.d.ts를 생성합니다.

위와 같이 tsconfig.json에 설정합니다.

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

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

 

svg 사용 방법은 아래와 같습니다.

import iconTest from '~/assets/images/icon/iconTest.svg' 

const IconStyle = styled.button`
  width: 100px;
  height: 100px;
  background-image: url(${iconTest});
  background-repeat: no-repeat;
`;