[React Native Expo] vertor IconFont 적용하기 (svg 아이콘들)

Web에서는 svg를 i태그에 클래스로 지정해서 썼었는데

react native에서는 일단 svg부터가 image태그에 바로 안넣어진다.. 쉽지않다

 

그래서 찾은방법이 svg들을 IconFont로 변환해서 쓰는법

npm install --save react-native-vector-icons --save-dev @types/react-native-vector-icons

먼저 일단 설치

 

https://icomoon.io/app/#/select

❍ IcoMoon App

그러고 변환사이트에 들어가서 svg아이콘들을 변환해준다

import icons 해서 svg파일들을 올리면

 

이렇게 뜨는데 얘네를 다 클릭해준다음 아래에 Generage font 를 누른 후 위에 preferences를 누르고

 

Use a class를 체크해준다 그러고 다운로드를 받으면 안에 selection.json과 myIcon.ttf 파일이 있을것이다

이걸 각자 assets/selection.json과 assets/fonts/myIcon.ttf 로 넣어준다.

// _layout.tsx
import * as Font from "expo-font";
useEffect(() => {
  getFont();
}, []);
async function getFont() {
await Font.loadAsync({
  myIcon: require("@/assets/fonts/myIcon.ttf"),
});
}

그러고 상위 app컴포넌트쪽에 폰트를 로드한다(참고로 연계해서 로드가 되면 스플래시 사라지게하면된다)

그리고 Component에 Icon.tsx를 하나 만들어서

import icoMoonConfig from "@/assets/selection.json";
import { createIconSetFromIcoMoon } from "react-native-vector-icons";

const Icon = createIconSetFromIcoMoon(icoMoonConfig, "myIcon");

export default Icon;

아이콘 컴포넌트를 만들어주고

import Icon from "@/components/Icon";

<Icon name="write" size={24} color="#fff" />

 

아이콘을 사용할 컴포넌트에서 이렇게 불러오면

 

아이콘이 잘 적용된 모습을 볼 수 있다

 

** 주의 : svg파일 디자이너한테 받을때 아웃라인 깨진버전으로 받아야한다. 선 형태로 받으면 변환이 안된다