기본 사용법

설치

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

CLI 명령어

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

</aside>

# 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 경로를 입력한다.

"scripts": {
	// ...
  "generate": "svgr --config-file ./svgr.config.js -- ./assets/icons/raw"
},

생성 예시

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

import * as React from "react";
import { SVGProps } from "react";

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

export default SvgMagnifierOutlined;

export { default as MagnifierOutlined } from "./MagnifierOutlined";
export { default as Spinner } from "./Spinner";
// ...

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

config 파일 예시

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 하기