React-Native에서 svg 아이콘 컴포넌트 사용하기

진행하는 프로젝트에서 svg 아이콘을 편하게 사용하기 위한 컴포넌트를 만들어보았습니다.

react-native-svg

React-Native에서 svg를 사용하려면 react-native-svg라는 라이브러리를 사용합니다. (svg 요소를 렌더링하는데 필요한 컴포넌트 제공)

npm install react-native-svg
yarn add react-native-svg

react-native-svg-transformer

또한 react-native-svg-transformer는 프로젝트에서 SVG 파일을 직접 import하여 사용할 수 있도록 해주는 라이브러리입니다.

svg를 React-Native에서 사용하려면 svg XML 마크업을 JavaScript 컴포넌트로 바꾸는 작업을 대신 해줍니다. 그래서 svg 파일을 자체를 직접 import하고 그대로 컴포넌트로 사용할 수 있게 해줍니다.

declaration.d.ts

타입스크립트를 사용하는 프로젝트이기 때문에 루트 디렉토리에 declaration.d.ts파일을 만들어야 합니다.

// declaration.d.ts

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

이제 아래처럼 svg파일을 불러올 수 있게 됩니다.

import KebabIcon from '~/assets/icon/chat-icon/ico_kebab.svg';

//중략

<KebabIcon width={20} height={20} />

하지만 이런 식으로 하게되면 매번 svg 파일을 하나하나 import해야하는 문제점이 있었습니다!

import ImageIcon from '~/assets/icon/chat-icon/ico_image.svg';
import LinkIcon from '~/assets/icon/chat-icon/ico_link.svg';
import VoteIcon from '~/assets/icon/chat-icon/ico_vote.svg';
import ExitIcon from '~/assets/icon/chat-icon/ico_exit.svg';
...등등

이런 문제를 해결하기 위해 svg 컴포넌트를 작성합니다.

---

svg 아이콘 컴포넌트

svg 파일 관리

svg 파일을 export해주는 index.ts 파일을 아이콘 폴더에 만들어줍니다.

// index.ts
export {default as AddPicture} from './ico_add_picture.svg';
export {default as Kebab} from './ico_kebab.svg';
...등등

svgIcon 컴포넌트 작성

import React from 'react';
import {SvgProps} from 'react-native-svg';

// 직전에 만들었던 아이콘 관리 파일에서 import
import * as Icons from '~/icon';

type IconProps = SvgProps & {
  name: keyof typeof Icons;
  size?: number;
  onPress?: () => void;
};
function Icon({name, size, onPress}: IconProps) {
  const SvgIcon = Icons[name];

  // svg 아이콘은 정사각형으로 제작했기 때문에 width, height값 둘다 size 적용
  const width = size;
  const height = size;

  const sizeProps = {
    ...(width !== undefined ? {width} : {}),
    ...(height !== undefined ? {height} : {}),
  };

  return <SvgIcon {...sizeProps} onPress={onPress} />;
}

export default Icon;

사용

import SvgIcon from '~/components/svgIcon';

//중략

<SvgIcon name="Kebab" size={20} />

케밥 아이콘이 잘 나오는 것을 확인할 수 있었습니다!

---

📚 참고 링크

https://ricale.kr/blog/posts/220409-react-native-svg-icon-component/

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