리액트 네이티브 앱 아이콘, 파비콘, 스플래시 스크린 생성, 변환기 Expo Icon Builder

expo를 이용해 리액트 네이티브 앱을 개발하던 중 icon과 스플래시 스크린 등등에서 상당히 골머리를 앓았다. 뭔 문서마다 이야기 하는 형식이 천차만별이다. 또 하나의 아이콘을 만들어도 스플래시나 여느 곳에 쓸 다른 버전을 만드는게 상당히 귀찮다. expo공식문서에서 지원하는 Expo Icon Builder 사이트에서 이걸 한번에 해결할 수 있다. 

Expo Icon Builder 

https://buildicon.netlify.app/

Expo Icon Builder

 

1. 기능 및 특징

• 아이콘 생성 및 커스터마이징:
  • 사용자는 SVG 기반 아이콘을 생성하고 색상, 크기, 스타일을 조정 가능.
  • 직접 이미지를 업로드 할 수 있다.
  • 1000개 이상의 편집 가능한 아이콘 제공, 실시간 미리보기 지원.
• 출력:
  • PNG 포맷으로 개별 아이콘 또는 아이콘 팩 다운로드 가능.
  • React Native 및 Expo 앱에 최적화된 아이콘 출력.
  • 파비콘과 아이콘, 스플래시를 한번에 만들어 준다.

2. 사용 방법

• :https://buildicon.netlify.app/ 접속.
• 아이콘 커스터마이징:
  1. 아이콘 라이브러리에서 원하는 아이콘 선택.
  2. 색상 선택기로 색상 지정.
  3. 크기(예: 16x16, 32x32, 256x256) 및 스타일(라인, 플랫, 그라디언트) 조정.
  4. 실시간 미리보기 확인 후 SVG/PNG로 다운로드.
• Expo 프로젝트 통합:
  • 다운로드한 아이콘을 assets 폴더에 추가.
  • expo-asset으로 로드하거나, react-native-vector-icons을 통해 동적 삽입.