React Native에서 svg 파일 사용하기

 

1) xml로 불러오기

React Native에서 svg를 불러올 때에는 react-native-svg라는 패키지를 따로 설치해야 한다

npm install react-native-svg
npx pod-install

 

각 상황별로 다양하게 사용하는 법이 패키지의 github에 소개되어 있는데 그 중에서 내가 필요한 부분만 포스팅ㅎㅎ

https://github.com/react-native-svg/react-native-svg#use-with-svg-files

 

import React from 'react';
import Styled from 'styled-components/native';
import {SvgXml} from 'react-native-svg';
import {theme} from '~/theme';

const Box = Styled.View`
    width: 8px;
    height: 40px;
`;

const xml = `
    <svg
        stroke="currentColor"
        fill="currentColor"
        strokeWidth="0"
        version="1.1"
        viewBox="4.5 -9 6 34"
        color="black"
        height="1em"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
    >
    <path d="M9 1.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5z"></path>
    <path d="M9 4h-3c-0.552 0-1 0.448-1 1v5h1v6h1.25v-6h0.5v6h1.25v-6h1v-5c0-0.552-0.448-1-1-1z"></path>
    </svg>
`;

const SvgImg = (color: any) => {
  return (
    <Box>
      <SvgXml xml={xml} width="100%" height="100%" fill={color} />
    </Box>
  );
};

 

 

이 부분은 SVG 이미지를 여러개 붙여서 쓰기 위한 추가 코드

interface Props {
  level: number;
  isWhite: boolean;
}

const Container = Styled.View`
    flex-direction: row
`;

const ManIcon = ({level, isWhite}: Props) => {
  const steps = [1, 2, 3, 4];
  const man = steps.map((step, index) => {
    if (step < level + 1) {
      return (
        <SvgImg
          key={index}
          color={isWhite ? theme.colors.white : theme.colors.gray}
        />
      );
    }
  });

  return <Container>{man}</Container>;
};

export default ManIcon;

 

 

---

2) svg 파일을 불러오기

 

내가 하고 싶은 것은 스타벅스 로고 svg를 React Native 화면에 띄우는 것이다. 이를 위해 먼저 svg 파일을 인터넷에서 다운로드 받아서 assets 디렉토리에 넣어줬다. 

 

그 다음으로는 react-native-svg에 이어 react-native-svg-transformer를 연이어 설치한다. pod-install을 통해 auto Link해주는 것도 잊지말자. ios 디렉토리로 들어가서 pod install 하는 것과 동일한 효과를 가진다.

npm install react-native-svg
npm install react-native-svg-transformer --dev
npx pod-install

 

 

나는 React-Native CLI 최신버전을 사용하고 있기 때문에 metro.config.js 파일을 아래와 같이 변경해준다

/* 기존 */
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};


/* 수정 */
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"]
    }
  };
})();

 

타입스크립트를 사용하고 있다면 루트프로젝트에 declarations.d.ts 를 생성하고 아래 내용을 복붙하자

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

 

아래처럼 사용하면 된다고 하는데!!!! 계속 svg 파일을 못찾고 None of file exists 라고 나와서 속 터졌는데 여러번 시뮬레이터를 껐다가 다시 켜고 (한 번으로는 안됨) VS Code도 다시 껐다가 켜고 하니 됐다... 휴 ~ 

 

이것 때문에 한 시간은 삽질한듯

import StarbucksLogo from '~/assets/starbucksLogo.svg';

<StarbucksLogo width={160} height={60} />