TS에서 svg파일을 가져오지 못 할 때

꾀꼬리

 

willa 클론코딩을 하고있는데 이상한 일이 발생하였다.

import를 해도 안되고 img 태그를 사용하여도 파일을 제대로 불러오지 못 하는 상황이였다.

img 폴더안에 분명히 cut.svg파일이 있는데 이 놈의 컴퓨터가 없다고 한다. (경로도 확실하다)

 

img태그를 사용하면 인식을 못한다.

const WorkSlide = () => {
  return (
    <Container>
      <img src='../../img/cut.svg' alt='cut' />
    </Container>
  );
};

하지만 아래의 방식처럼 직접 svg을 넣으니깐 제대로 작동을한다.

const WorkSlide = () => {
  return (
    <Container>
      <svg
        width='91'
        height='14'
        viewBox='0 0 91 14'
        fill='none'
        xmlns='http://www.w3.org/2000/svg'
      >
        <path
          d='M0 14V.016h5.066c2.426 0 4.05.965 4.05 3.628 0 1.261-.395 2.29-1.502 2.865v.047c1.941.234 2.775 1.589 2.775 3.55C10.39 13.035 7.947 14 5.46 14H0zm3.534-8.503h.394c.94 0 1.911-.171 1.911-1.355 0-1.277-1.107-1.354-2.063-1.354H3.52v2.71h.015zm0 5.716h.455c1.046 0 2.82.062 2.82-1.48 0-1.682-1.758-1.526-2.911-1.526h-.364v3.005zM14.712 0h4.246l2.548 3.8L24.054 0h4.247l-5.02 7.273v6.711h-3.55V7.273L14.712 0zm31.516 14h-4.413l-3.337-5.388h-.03V14h-3.55V.016h5.294c2.7 0 4.732 1.323 4.732 4.298 0 1.93-1.047 3.597-2.988 3.955L46.228 14zm-7.796-7.724h.334c1.153 0 2.457-.218 2.457-1.744s-1.304-1.744-2.457-1.744h-.334v3.488zM52.962 0h5.02c3.792 0 6.916 3.068 6.916 6.992 0 3.925-3.14 6.992-6.916 6.992h-5.02V0zm3.534 10.917h.788c2.109 0 3.913-1.184 3.913-3.91 0-2.506-1.607-3.908-3.882-3.908h-.82v7.818zM75.515 14h-3.55V.016h3.55V14zM86.799 3.083V5.42h3.989v3.084h-3.99v2.414H91V14h-7.75V.016H91v3.083h-4.201v-.016z'
          fill='#000'
        ></path>
      </svg>
    </Container>
  );
};

 

원인

svg 파일은 자바스크립트가 아니므로 자바스크립트 모듈처럼 사용할 수 없다. 

대신 http 요청을 사용하여 해당 파일을 로드해야 한다고 한다.

해결

• src/custom.d.ts 파일 생성

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

• tsconfig 수정

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

 

 

https://velog.io/@xmun74/TS%EC%97%90%EC%84%9C-svg-import-%EC%95%88%EB%90%A0-%EB%95%8C