개발/React Native

[React Native] 앱 아이콘 쉽게 변경하기 - 2023

ENFP Jake 2023. 8. 2. 03:22
728x90
반응형

# icon-set-creator으로 앱 아이콘 쉽게 변경하는 방법 소개(react-native-make는 놓아주자)

- React Native로 개발을 하고 IOS, Android 플랫폼 모두에 앱을 출시해본 경험이 있는 사람이라면, 아이콘을 변경하는 일이 얼마나 번거롭고 귀찮은 일인지 아실 겁니다. 그렇기에 react-naitve-make 같은 라이브러리를 찾아서 사용하게 됩니다. react-native-make를 사용해보신 적 없으신 분들을 위해 설명하자면, 지정한 아이콘 이미지를 기반으로 각 플랫폼에서 요구하는 아이콘 사이즈를 폴더 구조에 맞게 자동으로 생성해 주는 도구라고 보시면 될 것 같습니다. 문제는 플랫폼 별로 요구하는 사항이 계속 업데이트가 되다 보니, 라이브러리의 유지보수가 중요한데, react-native-make는 2023년 현재에는 이미 문을 닫아버렸습니다.(archived 상태) 그러므로 대안이 필요해서 열심히 찾아낸 결과 쓸만한 녀석을 찾았기에 본 포스팅에서 소개해 드리려고 합니다.

깃헙 저장소에 가져온 이미지입니다 문제 시 삭제하겠습니다

 

# 관련 사이트

- 깃헙 저장소: https://github.com/martiliones/icon-set-creator 

 

GitHub - martiliones/icon-set-creator: 🚀 CLI for creating React Native app icons

🚀 CLI for creating React Native app icons. Contribute to martiliones/icon-set-creator development by creating an account on GitHub.

github.com

 

# 사용 방법 소개

- 우선 라이브러리를 설치합니다. npx를 사용해서 임시로 설치를 한 후에 실행할 수도 있으니, 첫번 째 방법이 제일 편하긴 합니다. 필요에 따라 원하시는 방법으로 진행하시면 될 것 같습니다

$ npx icon-set-creator create ./path/to/icon.png # 이미지 파일 경로

# 글로벌로 사용하려면
$ yarn global add icon-set-creator
# 프로젝트에서만 사용하려면
$ yarn add icon-set-creator -D

# 글로벌이나 로컬 설치 시 아래와 같이 실행
$ iconset create ./icon.png # 이미지 파일 경로

 

- 기본적인 사용법은 끝입니다. 플랫폼 별로 옵션을 변경하고 싶거나, 파라미터를 변경하고 싶으신 경우, 위의 깃헙 페이지에 설명이 잘 나와 있으니 참고하시면 될 것 같습니다. 그리고 React Nativ의 최신버젼(0.72) 기준으로 정상적으로 아이콘이 변경됨을 확인하였으니, 현재 유지 보수도 되고 있다고 봐도 무방할 것 같습니다.


728x90
반응형