cra 없이 리액트에서 svg 사용하기

svg를 string으로 불러오기

~~.d.ts에 아래와 같이 string으로 불러오고 이미지 태그안에 src로 넣으면 svg를 사용할 수 있다.

declare module '*.svg' {
  const value: string;
  export = value;
// }

 

그런데 svg태그 자체가 필요한 경우가 있다. 예를 들어 fill을 한다던가... 그럴때는 조금 설정이 필요하다.

 

svg 자체 태그를 불러오기

먼저 웹팩 간단한 웹팩 설정이 필요하다.

yarn add -D @svgr/webpack

      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },

 

그리고 d.ts를 아래와 같이 변경해야 한다.

~~.d.ts

declare module '*.svg';

 

마지막으로 불러올 때 다음과 같이 사용하면 된다. cra를 사용하면 default 대신 ReactComponent를 넣어서 많이 사용하는데 나는 cra가 아니라서 또 따로 설정해줘야되는 것 같다.

import { default as SmallSpinner } from '@/assets/img/spinner/small-40-spinner.svg';

 

끝!!