@svgr/webpack 적용기 (feat. storybook 에러)

목차

1. 아이콘 컴포넌트, next/image를 안쓴다고?

2. @svgr/webpack

3. 컴포넌트 생성 과정

4. storybook 에러

5. 결과물

---

1. 아이콘 컴포넌트, next/image를 안쓴다고?

프로젝트에는 IconButton 컴포넌트에 사용하기 위한 임시 컴포넌트인, CustomImage 컴포넌트가 있었다.

import NextImage from 'next/image';
import type { ReactElement } from 'react';

type ImageProps = {
  src: string;
  alt?: string;
  width?: number;
  height?: number;
};

/**
 * 테스트용 Image 컴포넌트
 * - src는 필수
 * - alt 기본값은 빈 문자열
 */
export default function CustomImage({
  src,
  alt = '',
  width = 20,
  height = 20,
  ...rest
}: ImageProps): ReactElement {
  return <NextImage src={src} alt={alt} width={width} height={height} {...rest} />;

next/image를 사용하는 컴포넌트이다. 

 

그런데 svg, gif, apng 형식은 Next.js에서 이미지 최적화를 진행해주지 않는다고 한다.

용량이 매우 작기 때문에 그냥 사용해도 된다고..

 

그래서 보통 아이콘을 어떻게 처리하는지 찾아보니까 Next에서는 @svgr/webpack이라는 웹팩 로더를 설치해서 사용한다고 한다.

 

아이콘을 더 여기저기서 사용하기 전에 후다닥 수정을 해보기로 했다.

---

2. @svgr/webpack

1. svg 파일 사용하는 방법들 : 일반 /  리액트 쿼리 파라미터 / 웹팩 로더

svg 파일을 사용하는 방법은 세 가지가 있다.

그냥 svg 파일을 바로 불러오는 방법, 리액트 쿼리 파라미터를 붙이는 방법, 웹팩 로더를 사용하는 방법이다.

	사용 방법	TS/React 인식	props 지원
기본 svg	import MyIcon from './icon.svg'; <img src={MyIcon} />	그냥 모듈 객체(string, any type)	불가
?react 붙임	import MyIcon from './icon.svg?react'; <MyIcon width={24} height={24} />	React 컴포넌트	가능
svgr/webpack	import MyIcon from './icon.svg'; <MyIcon width={24} height={24} />	React 컴포넌트	가능

 

React 컴포넌트로 변환하여 사용하면 svg 파일의 크기, 색상 등을 더 편하게 조작할 수 있다.

 

여기서 ?react 파라미터를 붙이면 쉽게 리액트 컴포넌트로 변환할 수 있으나, svgr/webpack을 사용하면 초기 세팅이 좀 필요하다.

?react의 장단점과 svgr/webpack의 장단점을 비교해보자.

 

?react vs svgr/webpack

	?react	svgr/webpack
👍 장점	- 필요한 SVG만 React 컴포넌트로 변환 가능 - Next.js/Turbopack 환경에서 설정이 간단 - props 전달 가능	- 모든 svg 파일을 자동으로 React 컴포넌트로 변환 - import 구문만 써도 바로 <Icon /> 같이 사용 가능 - props를 통일된 방식으로 관리 가능
👎 단점	- import마다 일일이 ?react 붙여야 함 - 프로젝트 전반에 걸쳐 일관된 규칙을 적용하기 어려움 - 기존 import 방식과 섞일 위험이 있음	- 초기 Webpack/Turbopack 설정 필요 - 필요없는 SVG까지 모두 React 컴포넌트로 변환될 수 있음

 

장단점을 비교해보면 svgr/webpack을 사용함으로써 일관성을 얻을 수 있다는 것을 알 수 있다.

또한 svgr 사이트를 확인해보면 React 컴포넌트로 변환하고 싶지 않은 svg 파일을 따로 지정할 수가 있다고 한다.

 

이 프로젝트는 규모가 꽤 있으며, 내가 찾아보면서 적용하고싶은 것들이 있었기 때문에 svgr/webpack을 사용해보기로 했다.

 

 

2. svg/webpack 설치 및 세팅

svgr/webpack은 SVG를 리액트 컴포넌트로 바꿔주는 툴(웹팩 로더)이다.

 

https://react-svgr.com/docs/what-is-svgr/

SVGR - Transforms SVG into React Components. - SVGR

 

1. 설치하기

cli에 입력해서 간단하게 설치해준다.

npm install --save-dev @svgr/webpack
# yarn
yarn add --dev @svgr/webpack

 

 

2. next.config.js 세팅 ( turbopack 사용 시 )

공홈에서는 webpack setting을 알려주는데, turbopack을 사용한다면 그거 에러난다.

아래 내용만 작성해주면 된다.

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // svg in turbopack setting
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
};

export default nextConfig;

 

3. svgr.d.ts & tsconfig.json 세팅 ( TypeScript 사용 시 )

TypeScript는 모듈을 가져올 때 타입을 알아야 하는데 svg 파일은 기본적으로 타입 정보가 없다.

따라서 svgr.d.ts에 svg 파일의 타입을 정의해야 한다.

// svgr.d.ts
declare module '*.svg' {	// .svg 확장자를 가진 모든 파일은 이 모듈 구조를 가짐을 선언
  import React from 'react';	// 이 모듈의 타입은 React의 타입
  // React.FC.. : 반환값이 없고 children을 받지 않는 React 컴포넌트
  // React.SVG.. : 이 컴포넌트가 받을 수 있는 props 타입 (SVG 기본 속성을 모두 사용할 수 있음)
  const SVG: React.FC<React.SVGProps<SVGSVGElement>>;
  export default SVG;
}

 

svgr.d.ts 같은 모듈 선언 파일은 TypeScript가 프로젝트를 컴파일할 때 가장 먼저 참조해야한다. 따라서 svgr.d.ts를 가장 먼저 include 하도록 tsconfig.json을 작성한다.

// tsconfig.json
...
"include": ["svgr.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]

 

4. .storybook/main.ts 세팅 ( storybook 사용 시 )

이건 뒤에 작성

 

---

3. 컴포넌트 생성 과정

필요한 파일들을 모두 작성했으니 이제 SVG 컴포넌트를 더 쉽게 사용하도록 세팅할 거다.

이 상태로 SVG 컴포넌트를 사용하면 이런 방식이 될 것이다.

import MyIcon from './MyIcon.svg';

...

<MyIcon className="..." width={24} height={24} />

 

지금도 충분히 사용하기에 좋지만 컴포넌트화 하여 속성을 좀 더 일관성있게, 자유롭게 다룰 수 있다.

 

1. svg 파일들 수정

우선 svg 파일에 고정값이 들어가있는 width, height, fill 을 모두 current로 바꿔주어야 마음대로 저 값을 변경할 수 있다.

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.7071 14.2929C12.3166 14.6834 11.6834 14.6834 11.2929 14.2929L8.70711 11.7071C8.07714 11.0771 8.52331 10 9.41421 10H14.5858C15.4767 10 15.9229 11.0771 15.2929 11.7071L12.7071 14.2929Z" fill="black"/>
</svg>

<svg width="current" height="current" viewBox="0 0 24 24" fill="current" xmlns="http://www.w3.org/2000/svg">
<path d="M12.7071 14.2929C12.3166 14.6834 11.6834 14.6834 11.2929 14.2929L8.70711 11.7071C8.07714 11.0771 8.52331 10 9.41421 10H14.5858C15.4767 10 15.9229 11.0771 15.2929 11.7071L12.7071 14.2929Z" fill="current"/>
</svg>

 

2. icons.ts 작성 : 컴포넌트 import

실제 SVG 컴포넌트를 import하고, 타입화하는 icons.ts를 작성해준다.

// SVG 아이콘 import
import IC_AllLink from './svgs/all_link.svg';
import IC_ArrowdropDown from './svgs/arrowdrop_down.svg';
import IC_ArrowdropLeft from './svgs/arrowdrop_left.svg';

// 컴포넌트들로 IconMap 구성
export const IconMap = {
  IC_AllLink,
  IC_ArrowdropDown,
  IC_ArrowdropLeft,
} as const;

// IconMapTypes = 'IC_Alllink' | 'IC_ArrowdropDown' | 'IC_ArrowdropLeft' | ...
export type IconMapTypes = keyof typeof IconMap;

// 사이즈 구성
export const IconSizes = {
  sm: 16,
  md: 20,
  lg: 24,
};

// IconSizeTypes = 'sm' | 'md' | 'lg' | ...
export type IconSizeTypes = keyof typeof IconSizes;

 

 

3. SVGIcon.tsx 작성 : 실사용할 컴포넌트

이 컴포넌트를 실제 아이콘이 필요한 곳에서 사용할 거다.

import React from 'react';
import { IconMap, IconMapTypes, IconSizeTypes, IconSizes } from './icons';

// icons.ts에서 정의한 IconMapTypes, IconSizeTypes를 각각 icon, size의 타입으로 정의
export interface SVGIconProps {
  icon: IconMapTypes;
  size?: IconSizeTypes;
  className?: string;
}

const SVGIcon: React.FC<SVGIconProps> = ({ icon, size = 'lg', className }: SVGIconProps) => {
  // <SVGIcon icon={'IC_ALLlink'} -> Icon = IconMap[IC_Alllink]
  const Icon = IconMap[icon as IconMapTypes];

  if (!Icon) return null;

  return <Icon className={className} width={IconSizes[size]} height={IconSizes[size]} />;
};

export default SVGIcon;

 

 

---

4. storybook 에러

스토리북이 시험해보기 간단하니까 스토리북에서 먼저 시험해봤는데 아무리 이것저것 수정해도 계속 에러가 뜨는 것이었다.

 

그러다가 SVGIcon만 사용해보고, IconButton을 사용해보니까 에러가 발생하지 않는 것을 보고 '아 또 스토리북이구나..!' 하면서 찾았다.

오늘도 헤메느라 꽤 많은 시간을 날린 나..

 

결론은 스토리북은 자체 webpack을 사용해서 내가 열심히 세팅한 turbopack 설정들이 안먹힌다는 것이었다. -.-

그래서 스토리북용 svg loader를 따로 세팅해주어야 한다.

 

.storybook/main.ts

import type { StorybookConfig } from '@storybook/nextjs';
import type { RuleSetRule } from 'webpack';	// webpack의 module.rules 배열에 들어가는 항목 타입을 정의하기 위함

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@chromatic-com/storybook',
    '@storybook/experimental-addon-test',
  ],

  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  staticDirs: ['../public'],

  // 추가로 작성한 부분
  webpackFinal: async config => {  // 최종 webpack 설정을 커스터마이징하는 함수
    if (!config?.module?.rules) return config; // config가 undefined이거나 없으면 반환
    const rules = config.module.rules as RuleSetRule[];  config.module.rules 타입 선언 (이 배열은 RuleSetRule[] 타입임)

    config.module.rules = rules.map(rule => {  // 기존 rules 배열을 map으로 순회하며 규칙 수정
      // test가 정규식인가 && 해당 정규식에 svg 문자열이 포함되었는가
      if (rule.test instanceof RegExp && /\.svg\b/.test(rule.test.toString())) {
        // 기존 rule을 복사하여 exclude를 추가
        // exclude : 이 rule에서 svg를 제외하고 다른 파일만 처리 (기존 file-loader과의 충돌 방지)
        return { ...rule, exclude: /\.svg$/i };
      }
      return rule;
    });

 

 

---

5. 결과물

로컬 호스트 화면

 

스토리북 화면

 

 

 

그래도 깔끔하게 완성해서 기분이 좋다. 휴~

 

 

 

참고

svg 아이콘의 경우에도 image 컴포넌트 사용해야하나요?

svg 아이콘의 경우에도 image 컴포넌트 사용해야하나요? - 인프런 | 커뮤니티 질문&답변

Next.js-Components-Images

Components: Image | Next.js

https://react-svgr.com/docs/webpack/

SVGR - Transforms SVG into React Components. - SVGR

https://sihun.dev/blog/nextjs15_svgr_setting

Next.js 15 + SVGR 세팅 방법 (feat.TurboPack)

https://stackoverflow.com/questions/79329145/how-to-import-svg-icons-in-nextjs-15

How to import svg icons in Nextjs 15

https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopack#examples

next.config.js: turbopack | Next.js

https://bh2980.tistory.com/276

Next.js와 Storybook에 SVGR 설정하기

https://velog.io/@jh5414092/SVG-Icon-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0SVGR-TS

SVG Icon 컴포넌트로 만들기(SVGR, TS)