[React] SVG 파일 index.ts에서 export 하기 - SVGR

assets 폴더에서 svg 파일들을 한번에 import 하고 싶어서 index.ts 파일을 생성하여 export를 하려고 한다.

현재 svgr 라이브러리를 시용중인데 라이브러리를 사용할때와 아닐때의 방법에 차이가 있다.

 

일반적인 방법

// src/assets/images/index.ts

export { ReactComponent as Area } from "./area.svg";
export { ReactComponent as Circle } from "./circle.svg";
export { ReactComponent as Draw } from "./draw.svg";
export { ReactComponent as Line } from "./line.svg";
export { ReactComponent as Map } from "./map.svg";
export { ReactComponent as Measure } from "./measure.svg";
export { ReactComponent as Point } from "./point.svg";
export { ReactComponent as Polygon } from "./polygon.svg";
export { ReactComponent as square } from "./square.svg";
export { ReactComponent as Video } from "./video.svg";

 

index.ts를 사용하지 않고 컴포넌트에서 import 하는 방법

import { ReactComponent as Circle } from "assets/images/circle.svg";

 

SVGR을 사용중인 경우

// src/assets/images/index.ts

export { default as Area } from "./area.svg";
export { default as Circle } from "./circle.svg";
export { default as Draw } from "./draw.svg";
export { default as Line } from "./line.svg";
export { default as Map } from "./map.svg";
export { default as Measure } from "./measure.svg";
export { default as Point } from "./point.svg";
export { default as Polygon } from "./polygon.svg";
export { default as square } from "./square.svg";
export { default as Video } from "./video.svg";

 

index.ts를 사용하지 않고 컴포넌트에서 import 하는 방법

ReactComponent as를 사용하지 않고 바로 사용 가능하다.

import Circle from "assets/images/circle.svg";