[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 (./assets/icons/raw 에 있는 모든 svg 파일을 리액트 컴포넌트로 변환)
"scripts": {
    // ...
  "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	output the version number
--config-file <file>	specify the path of the svgr config
--no-runtime-config	disable runtime config (".svgrrc", ".svgo.yml", ".prettierrc")
-d, --out-dir <dirname>	output files into a directory
--ignore-existing	ignore existing files when used with --out-dir
--ext <ext>	specify a custom file extension (default: "js")
--filename-case <case>	specify filename case ("pascal", "kebab", "camel") (default: "pascal")
--icon	use "1em" as width and height
--native	add react-native support with react-native-svg
--memo	add React.memo into the result component
--ref	forward ref to SVG root element
--no-dimensions	remove width and height from root SVG tag
--expand-props [position]	disable props expanding ("start", "end", "none") (default: "end")
--svg-props <property=value>	add props to the svg element
--replace-attr-values <old=new>	replace an attribute value
--template <file>	specify a custom template to use
--index-template <file>	specify a custom index.js template to use
--no-index	disable index file generation
--title-prop	create a title element linked with props
--prettier-config <fileOrJson>	Prettier config
--no-prettier	disable Prettier
--svgo-config <fileOrJson>	SVGO config
--no-svgo	disable SVGO
--silent	suppress output
--stdin	force reading input from stdin
--stdin-filepath	path to the file to pretend that stdin comes from
-h, --help	output usage information

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요