[React] SVG 불러오기 (Webpack5 설정 + SVGR)

개발환경

• React 18
• Typescript 4
• Webpack 5
• styled-components
• SVGR

 

원래는 React에서는 SVG를 사용할 때 아래와 같은 방법을 주로 사용했다.

import { ReactComponent as Logo } from "assets/images/logo.svg";

<Logo />

 

 

그러나 Webpack5, Typescript 등 새로운 환경에서는 기존 방법이 잘 작동하지 않아 SVGR 라이브러리를 설치하여 사용하고 있다. 그러면서 아래와 같은 문법을 주로 사용하여 SVG를 호출하고 있었다.

import CancelSvg from "assets/images/cancel.svg";

<Cancel />

 

 

위와 같은 방법으로 잘 사용하고 있었으나 체트박스 컴포넌트를 만들면서 background-image에 url을 넣는 방법을 적용 중이었는데 해당 경로를 불러오지 못하여 webpack 설정을 다시 했다. 아래와 같은 설정을 적용하여 url과 컴포넌트 형식으로 사용 가능하다.

설치 및 설정

svgr/webpack 설치

npm install @svgr/webpack

https://www.npmjs.com/package/@svgr/webpack

@svgr/webpack

 

webpack.config.js파일 수정

// webpack.config.js

module.exports = {
  ...
  module: {
    rules:[
      ...
      {
        test: /\.svg$/,
        oneOf: [
          {
            use: ['@svgr/webpack'],
            issuer: /\.[jt]sx?$/,
            resourceQuery: { not: [/url/] },
          },
          {
            type: 'asset',
            resourceQuery: /url/, // *.svg?url
          },
        ],
      },
    ]
  }
}

 

svg.d.ts 파일 생성

나는 declarations.d.ts 파일에 declarations 설정들을 모아놓았다.

*.svg?url 과 *.svg 2가지 declare을 추가 해준다.

// src/types/declarations.d.ts

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

declare module '*.svg' {
  import React = require('react');

  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

 

tsconfig.json 파일 수정

tsconfig.json 파일에 위에 선언해준 해당 d.ts파일을 인식시키기 위해 include에 폴더 경로를 추가해준다.

{
  ...
  "include": [..., "src/**/*.d.ts"],
}

 

SVG 사용하기

1. SVG를 url로 사용

styled-compoents의 css를 통하여 commonStyles.ts를 관리하고 있었다.

import시 svg 경로 뒤에 ?url 을 붙여야 한다.

// commonStyles.ts

import { css } from "styled-components";
import CheckSvg from "assets/images/check.svg?url";

const check = css`
	background-image: url(${CheckSvg});
`;

 

import LogoSvg from 'assets/images/logo.svg?url';

<img src={LogoSvg} />

 

2. SVG를 컴포넌트로 사용

원래 svgr 라이브러리를 사용하던 방식대로 사용하면 된다.

import LogoSvg from 'assets/images/logo.svg';

<LogoSvg />

 

위 webpack 설정을 통해 2가지 방법으로 SVG를 사용할 수 있게 되었다.

 

참고자료
https://velog.io/@song961003/webpack5-tw.macro%EC%97%90%EC%84%9C-svg-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0