직딩 개발기 —Svg

직딩에 아이콘을 추가하기로 했어요

navigation bar를 자체적으로 재정의 했기 때문에 react-navigation의 기본 뒤로가기 버튼을 사용할 수 없어서 직접 아이콘을 추가해야 했어요.

아이콘 모아져있는 react-native-vector-icons 등도 있지만
사용하는 아이콘이 별로 없어서 svg를 사용하기로 했어요.

react-native-svg

react-native에서 svg 이미지를 보이려면 어떻게 해야 할까요? 🤔

react-native-svg라는 라이브러리를 사용하면 되는데 버전 별로 지원하는 react-native가 달라요.

13.6.0 이상은 react-native를 0.70 이상으로 올려야 하는데

직딩은 0.69를 사용하고 있었기 때문에 13.5.0을 사용하기로 했어요

설치는 간단하게 아래 명령어로 하면돼요.

yarn add react-native-svg@13.5.0

Import SVG

svg를 사용하는 방법은 두가지에요 첫번째는 WithLocalSvg

를 사용하는 것.

import {WithLocalSvg} from 'react-native-svg'
import ArrowIcon from '#/icon/keyboard_arrow_up.svg'

export const Component = (...) => {
  return (
    ...
    <WithLocalSvg asset={ArrowIcon} width={24} height={24} />}
    ...
  )
}

하지만 svg 파일을 import하면 아래와 같은 오류가 발생해요. 😭

이때는 .svg에 대한 선언을 추가해줘야하는데,

index.d.ts를 열어서 아래 추가를 하면 오류가 없어져요

declare module '*.svg' {
  //
}

Import SVG as Component

두번째 방법은 svg를 컴포넌트로 import하는 건데 plugin이 필요해요.

먼저 공홈 설명의 Use with svg files를 따라 Transformer를 설치해요

yarn add — dev react-native-svg-transformer

그리고 metro.config.js를 열어서 수정해요

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"]
    }
  };
})();

기존 설정은 transformer: 에 넣으면 될 거에요.

그리고 위에서 .svg 선언했던 d.ts 파일을 열어서 .svg 선언을 수정해요

declare module "*.svg" {
  import React from 'react';
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

오류가 나면 Package Manager를 재실행하면 되요.

뒤로가기 아이콘이 잘 추가되었어요. 😃

참조

GitHub - software-mansion/react-native-svg: SVG library for React Native, React Native Web, and…

[React Native] SVG 이미지 로드 하기

[TS] TypeScript가 SVG 파일을 import하지 못하여 에러가 발생할 때