[React Native] SVG아이콘 사용하기, 수정하기

최초 작성일 : 2024.11.22

최종 수정일 : 2024.11.22

 

1. 개요

서비스를 만들다 보면 SVG파일을 사용해야 할 경우가 잦다.

SVG파일을 이용하다보면 코드로 간편하게 사용하고싶을 때가 있는데, 이 때 사용할 수 있는 라이브러리를 소개한다!

개인적으로도 거의 필수로 이용하고 있는 라이브러리이다.

 

2. react-native-svg

react-native-svg라이브러리는 React Native에서 SVG파일을 이용할 수 있게 해주는 라이브러리이다.

https://github.com/software-mansion/react-native-svg

GitHub - software-mansion/react-native-svg: SVG library for React Native, React Native Web, and plain React web projects.

 

npm install을 이용해 간단하게 설치할 수 있다.

npm install react-native-svg
cd ios && pod install

 

3. react-native-svg-transformer

react-native-svg-transformer라이브러리는 SVG파일을 수정할 수 있게 해주는 라이브러리이다.

react-native-svg라이브러리와 함께 사용된다.

https://github.com/kristerkari/react-native-svg-transformer

GitHub - kristerkari/react-native-svg-transformer: Import SVG files in your React Native project the same way that you would in

 

npm install과 추가 작업이 필요하다.

npm install --save-dev react-native-svg-transformer
cd ios && pod install

 

프로젝트 루트 폴더에 metro.config.js파일을 생성한 뒤 아래의 내용을 작성한다.

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve(
      "react-native-svg-transformer/react-native"
    )
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};

module.exports = mergeConfig(defaultConfig, config);

 

Typescript를 이용한다면 프로젝트 루트 폴더에 declarations.d.ts파일을 만들고 아래의 내용을 작성한다.

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

 

4. SVG변경하기

위의 세팅을 완료했다면 이제 SVG파일을 import한 뒤 width, height를 이용해 크기, fill을 이용해 색을 변경할 수 있다.

import Logo from "./logo.svg";

export default function Screen() {
  return (
    <Logo width={120} height={40} fill = {"#f00"} />
  )
}