[React] svg 파일 → 리액트 컴포넌트 변환하기 - React SVGR

기본 사용법

---

설치

yarn add "@svgr/cli"
yarn add -D "@svgr/webpack"

 

CLI 명령어

💡 경로만 입력하면 svg path를 지정하는 것과 동일. -- double dash는 커맨드 옵션이 끝난다는걸 의미하므로(참고글) -- 뒤에 경로를 입력하면 svg path가 지정됨(옵션이 없다면 굳이 안붙여도 됨).

# config 파일이 없을 때 
# svgr <svg-path> -d <output-path>
svgr ./assets/icons/raw/bulb.svg -d ./assets/icons/dist

# config 파일이 있을 때
# svgr --config-file <config-file-path> <svg-path> -d <output-path>
svgr --config-file ./svgr.config.js ./assets/icons/raw/bulb.svg -d ./assets/icons/dist

# config 파일에 output 경로를 설정했을 때
svgr --config-file ./svgr.config.js -- ./assets/icons/raw/bulb.svg

# config 파일에 output 경로를 설정하고, 특정 폴더(아래에선 raw)에 있는 모든 svg를 변환할 때
svgr --config-file ./svgr.config.js -- ./assets/icons/raw

 

💡 package.json 파일 scripts 속성에 아래처럼 등록해두고 사용하면 편리하다. 아래 스크립트를 실행하면(npm run generate) ./assets/icons/raw(svg path) 폴더에 있는 모든 svg 파일을 리액트 컴포넌트로 변환한 후 svgr.config.js 설정 파일에(outDir 속성) 명시한 output 폴더에 저장한다. svg path는 프로젝트에서 사용하는 적절한 output 경로를 입력한다.

// package.json
{
  "scripts": {
    // ./assets/icons/raw 에 있는 모든 svg 파일을 리액트 컴포넌트로 변환
    "generate": "svgr --config-file ./svgr.config.js -- ./assets/icons/raw"
  }
}

 

생성 예시

지정한 output 경로에 SVG 리액트 컴포넌트 파일과 export 할 수 있는 index.ts 파일이 자동으로 생성된다.

// 변환된 svg 컴포넌트 예시 — assets/icons/dist/MagnifierOutlined.tsx
import * as React from 'react';
import { SVGProps } from 'react';

const SvgMagnifierOutlined = (props: SVGProps<SVGSVGElement>) => (
  // svg 세부 내용 생략
  <svg {...props}>
    <path />
  </svg>
);

export default SvgMagnifierOutlined;

// assets/icons/dist/index.ts 파일에 변환한 svg 컴포넌트가 자동 추가된다
export { default as MagnifierOutlined } from './MagnifierOutlined';
export { default as Spinner } from './Spinner';
// ...

// 다른 컴포넌트에서 import 예시
import { MagnifierOutlined } from '@/assets/icons/dist';

 

 

config 파일 예시

---

svgr.config 파일은 js 확장자만 사용할 수 있다.

// svgr.config.js
module.exports = {
  icon: true, // use "1em" as width and height
  typescript: true, // 타입스크립트 사용시 true
  outDir: './assets/icons/dist', // output 경로
  replaceAttrValues: {
    // 속성 값이 #282829면 모두 currentColor로 변경됨
    '#282829': 'currentColor',
  },
};

 

 

NextJS에서 React 컴포넌트로 바로 import 하기

---

위에서 설명한 svgr 사용 방법은 svgr cli 터미널 명령어를 이용해 svg 파일을 React 컴포넌트로 미리 만들어 두고 사용하는 방식이다. 한편, React CRA에선 별다른 설정 없이 그때그때 필요한 svg 파일을 React 컴포넌트로 불러와서 사용할 수 있는데(미리 변환 없이), svgr을 사용하면 NextJS에서도 동일한 방법으로 사용할 수 있다.

// svg 파일 → 리액트 컴포넌트로 불러오기 예시 — React CRA
import { ReactComponent as BulbIcon } from './assets/icons/bulb.svg';

// 컴포넌트 리턴문
return <BulbIcon />;

 

NextJS에서 svg 파일을 리액트 컴포넌트로 불러와서 바로 사용할 수 있도록 하기 위해 next.config.js 설정 파일에 아래 내용을 추가한다. config 파일 수정 후엔 애플리케이션을 재시작해야 적용된다.

// NextJS 사용시 — next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // ...
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

module.exports = nextConfig;

 

이 방법은 svgr cli를 사용하지 않으므로 @svgr/cli 패키지는 설치하지 않아도 된다(물론 @svgr/webpack 패키지는 설치해야 된다). 참고로 svgr.config.js 파일을 삭제해야 정상적으로 작동한다.

// svg 파일 → 리액트 컴포넌트로 불러오기 예시 — NextJS
import BulbIcon from '@/assets/icons/raw/bulb.svg';

// 컴포넌트 리턴문
return <BulbIcon />;

 

 

CLI 옵션

---

구문: svgr [options] <file|directory>
예시: svgr --replace-attr-values "#fff=currentColor" icon.svg

 

옵션 플래그	설명
-V, --version	버전 번호 출력
--config-file <file>	SVGR 설정 파일 경로 지정
--no-runtime-config	런타임 설정 파일(.svgrrc, .svgo.yml, .prettierrc) 비활성화
-d, --out-dir <dirname>	출력 디렉터리 지정
--ignore-existing	--out-dir 사용 시 기존 파일 무시
--ext <ext>	사용자 지정 확장자 지정 (기본값: js)
--filename-case <case>	파일명 형식 지정 (pascal, kebab, camel, 기본값: pascal)
--icon	너비와 높이를 1em으로 설정
--native	react-native-svg 기반 React Native 지원 추가
--memo	결과 컴포넌트에 React.memo 추가
--ref	SVG 루트 요소에 ref 전달
--no-dimensions	루트 SVG의 width, height 제거
--expand-props [position]	props 확장 위치 지정 또는 비활성화 (start, end, none, 기본값: end)
--svg-props <property=value>	SVG 요소에 props 추가
--replace-attr-values <old=new>	속성값 치환
--template <file>	사용자 지정 템플릿 파일 지정
--index-template <file>	사용자 지정 index.js 템플릿 파일 지정
--no-index	index 파일 생성 비활성화
--title-prop	props와 연결된 title 요소 생성
--prettier-config <fileOrJson>	Prettier 설정 지정
--no-prettier	Prettier 비활성화
--svgo-config <fileOrJson>	SVGO 설정 지정
--no-svgo	SVGO 비활성화
--silent	출력 메시지 숨김
--stdin	표준 입력(stdin)에서 강제로 읽기
--stdin-filepath	stdin 입력의 파일 경로인 것처럼 지정
-h, --help	사용법 출력