[React Native] SVG 파일을 별도 generate 없이 불러와보자! - react native svg component

 

React Native 환경에서는, svg 파일을 바로 불러올 수 있는 기능을 지원하지 않는다.

때문에 svg 파일을 임포트 하려면 react-native-svg 패키지를 반드시 추가해줘야 하며

react-native-vector-image 등 별도 라이브러리를 추가 인스톨하여 사용하게 되는데,

 

위 방법에서는 svg 파일을 assets 폴더에 넣고 별도의 'generate' 명령어를 통해 android / ios 에서 인식할 수 있도록 해주고

npm 서버도 리로드(가끔은 cache도 비워줘야 동작하는 이슈ㅠ) 해주어야 하는 번거로움이 있어

디자인 팀에서 svg 아이콘을 추가해달라고 요청하면 '시간 좀 걸려요..' 라고 대답하는게 일상이었다.

(이전 개발자는 그냥 png로 export 하더라..)

 

이런 불편함을 해결할 수 있는 방법과 함께 SVG Icon을 바로 불러올 수 있게 하는 Svg 전용 컴포넌트를 생성해보자.

 

📚 Installation

npm install react-native-svg
npm install -D react-native-svg-transformer

 

😀 react-native-svg 만 사용한다고 해서 바로 <Svg source={...} /> 이렇게 불러올 수 없다. 이를 위해 react-native-svg-transformer 도 설치해주고 설정도 변경해주어야 한다. setting의 1. 에서 이 내용을 다뤄보자.

---

⚒️ setting

 

1. metro.config.js 설정해주기

 

react-native-cli 로 빌드한 RN 프로젝트는 기본적으로 metro.config.js 파일이 생성되어 있을 것이다.

이 파일에 svg-transformer 라이브러리 모듈을 연결해주는 코드를 추가해주자.

 

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

 

1-1. (타입스크립트 설정) declaration.d.ts 파일 추가

 

타입스크립트 프로젝트라면, 프로젝트 루트에 declaration.d.ts 파일을 추가해주어야 한다.

 

(project root)/declaration.d.ts

// TypeScript에서 .svg 이미지를 사용하기 위한 .d.ts 파일
declare module '*.svg' {
  import React from 'react';
  import {SvgProps} from 'react-native-svg';
  const content: React.FC<SvgProps>;
  export default content;
}

 

1-2. .svgrrc 파일 추가하기

 

svgrrc 파일을 추가하면 추후 임포트될 svg파일의 어트리뷰트를 동적으로 사용할 수 있게 된다.

 

(project root)/.svgrrc

{
  "replaceAttrValues": {
    "#000": "{props.fill}"
  }
}

 

2. 공용 컴포넌트 파일 생성

 

이제 Svg 파일을 생성하기 위한 컴포넌트를 작성해보자.

우리 팀은 컴포넌트의 가장 작은 단위를 'atom'으로 네이밍 규칙을 맞췄기에 파일명은 SvgIconAtom.tsx로 생성했다.

 

SvgIconAtom.tsx

import React from 'react';
import {SvgProps} from 'react-native-svg';
import * as Icons from '../../assets';

type TSvgIconProps = SvgProps & {
  // res 에서 re-export 되는 SVG 파일들의 이름을 name 으로 받을 수 있다.
  name: keyof typeof Icons;
  size?: number;
};
const SvgIconAtom = ({
  name,
  fill,
  width: _width,
  height: _height,
  size,
  ...props
}: TSvgIconProps) => {
  const Comp = Icons[name];
  // `width`, `height` 를 따로 지정할 수 있지만
  // 아이콘은 보통 가로 세로 값이 같은 정사각형 형식이기 때문에
  // 여기서는 `size` 를 사용해 너비와 높이를 같이 지정할 수 있게 해주었다.
  const width = _width ?? size;
  const height = _height ?? size;
  const sizeProps = {
    ...(width !== undefined ? {width} : {}),
    ...(height !== undefined ? {height} : {}),
  };

  return (
    <Comp
      {...props}
      // 1.2.3. `.svgrrc` 의 설정 덕분에 `fill` prop 을 이렇게 사용할 수 있다.
      fill={fill}
      {...sizeProps}
      scaleX={1}
    />
  );
};

export default SvgIconAtom;

 

2-1. svg 파일 re-export 해주기

 

우리가 원하는 동작은 svg 파일을 하나하나 import 문으로 불러오는게 아니라,

전역 컴포넌트로 svg 파일을 불러오게 하는 것이다.

assets 폴더에 index.ts 파일을 생성해서 svg 파일을 한곳에서 import 하여 관리해주자.

 

export {default as 변수명} from './icons/파일명.svg';

 

세팅 끝!

 

👍 Usage

 

위 방법대로 잘 따라왔다면, 이제 사용할 컴포넌트 내에서 아래와 같이 호출해주면 된다.

<SvgIconAtom name={'ArrowRightRed'} />

 

 

참고 블로그 : https://ricale.kr/blog/posts/220409-react-native-svg-icon-component/