[Flutter] Custom Icon generator (SVG to Icon)

 

 

 

 

안녕하세요. 이번에는 Custom Icon을 사용하거나 SVG를 Icon으로 바꾸는 방법을 알아보겠습니다. 

 

 

 

1. Flutter custom icons generator 접속

 

 

구글에 flutter icon을 검색하면 두 번째에 보이는 FlutterIcon 공식 사이트가 있습니다. 해당 페이지로 접속해 주세요.

 

https://www.fluttericon.com/

FlutterIcon - Flutter custom icons generator

 

 

 

 

2. 사용 Icon 선택

 

 

 

 

해당 페이지로 접속하게 되면 이런 화면이 보이실 겁니다. 보이는 아이콘들 중에서 스크롤로 내리면서 Flutter프로젝트에서 사용할 Icon을 선택하거나 디자이너가 준 SVG가 있다면 등록시킬 수 있습니다.

 

 

 

 

 

원하는 아이콘을 선택하면 이렇게 선택효과가 나타나고 DOWNLOAD (2) 개로 선택된 아이콘 개수가 나타납니다.

 

 

3. SVG 등록

 

 

 

가지고 계신 SVG를 사진에 보이는 Custom Icons 영역에 드래그합니다.

 

 

 

그러면 이렇게 SVG가 Icon으로 변해서 들어가게 됩니다.

 

 

그리고 똑같이 선택을 해주시면 됩니다.

 

 

 

 

4.  신경 써주셔야 할 부분

 

굉장히 쉽죠? 사용할 아이콘을 선택하고 svg를 드래그해서 가져다 두고 선택만 하면 됩니다. 하지만 한 가지 신경 써주셔야 할 부분은 Flutter언어인 Dart는 Camel Case로 명명을 합니다. 그래서 우리가 선택한 아이콘들의 이름도 Camel Case로 바꾸어 주어야 합니다.

 

 

 

Names칸에 들어가면 선택한 아이콘들의 이름을 설정할 수 있습니다. 여기에 적용되어 있는 이름 그대로 사용되기 때문에 해당 부분을 Camel Case로 바꾸어 주어야 합니다.

 

 

 

이렇게 바꾸어 주면 되겠죠?

 

 

 

5. 다운로드

 

이제 사용할 Icon들을 다운로드하여 줄 건데 그전에 설정 한 가지만 하겠습니다.

 

 

 

 

여기 이 부분을 설정해 줄 건데 쉽게 말하면 Class명이라고 생각하시면 됩니다. 저대로 사용하게 된다면 MyFlutterApp.futbol 이런 식으로 사용이 됩니다. 원하는 Class명으로 자유롭게 설정해 주세요.

 

 

 

저는 JutoleIcons로 하겠습니다.  자 이제 화면에 보이는 다운로드 버튼을 눌러주시면 됩니다.

 

 

 

6. 파일 설명

 

 

 

 

다운을 받게 되면 이러한 압축폴더가 생기게 됩니다. 해당 폴더를 압축을 풀어주세요.

 

 

 

압축을 풀면 위와 같은 내용물들이 있습니다. 위에서부터 쉽게 설명하겠습니다.

 

config 

 - 나중에 아이콘 추가하고 싶을 때 사용하는 파일

 

dart파일

 - 일반적으로 생성하는 dart 클래스 파일이라고 생각하시면 됩니다.

fonts폴더

 - 안에 ttf파일이 있는데 icon정보를 담고 있는 파일이라고 생각하시면 됩니다.

 

손보거나 수정할 일이 없는 것들이 기 때문에 이 정도만 아시면 될 거 같습니다.

 

 

 

 

7.  적용하기

 

 

 

 

lib 폴더 하위에 config 파일과 dart 파일을 넣어줍니다. 원하시는 위치에 넣으시면 됩니다. 저는 따로 icon이라는 폴더를 생성해서 안에 넣어줬습니다.

 

 

 

fonts폴더 안에 있는 ttf 파일을 원하시는 곳에 넣어주세요. 저는 assets폴더 하위에 두겠습니다.

 

 

아까 넣어준 dart파일을 열어보아요. 친절하게 적용법이 나와있죠? pubspec.yaml 파일에 가서 해당 부분을 넣어주시면 됩니다.

 

 

asset 경로는 ttf파일 있는 곳으로 수정해주셔야 합니다? 저거 그대로 복사하시면 안 됨!   Pub get ~

 

이러면 준비는 끝났고 사용법은 세상 간단합니다.

 

            Icon(
              JutoleIcons.futbol,
            ),

 

Icon이기 때문에 Icon 위젯 안에 설정한 Class명. 아이콘이름 만 넣어주시면 사용이 됩니다.

 

 

 

8. 아이콘 추가하기

 

작업을 하면서 아이콘을 추가해야 될 상황이 생기면 다시 (1) 번부터 작업해야 합니다.

 

 

 

 

하지만 이렇게 또 원래 사용하던 아이콘을 다시 추가하기란 너무 허튼짓이죠. 웹상에 데이터가 남아있을 수는 있지만 협업을 하다 보면 다른 사람이 더 추가해 놨을 수도 있고 다른 컴퓨터로 접속하면 위처럼 처음화면으로 다시 보일 것입니다.

 

이때 우리는 프로젝트에 넣어둔 config 파일을 사용해서 import 시켜줄 수 있습니다.

 

 

 

이렇게 config 파일을 드래그해서 가져다 놓으면 프로젝트에서 사용하던 icon들을 전부 import 할 수 있습니다.

이 상태에서 추가할 아이콘들을 다시 작업해 주고 DownLoad 받아주면 됩니다.

 

그리고 (7. 적용하기)에서 파일들 넣어줬던 거 있죠 3개? 새로 DownLoad 해서 받은 파일들을 갈아 끼워주면 됩니다. 기존에 있던 건 삭제하고 그 위치 그대로 새 파일들을 3개 전부 넣어주시면 됩니다. 

 

 

 

 

9. 장점

 

 왜 이런 귀찮은 것을 하나요? 그냥 있는 Icon 쓰고 없는 건 SVG로 다운로드하여서 svg.picture로 사용하면 되는 거 아닌가요?

 

    -  외관상 좋음

 

 

이제 이런 거 볼 필요 없습니다. 많으면 진짜 많아서 이게 있는 아이콘인지 찾기도 힘들고 svg로 사용하는 거 아니고 기본제공되는 icon사용한다 해도 작업자들마다 맘대로 사용하게 되고 아무튼 저는 불편했습니다.

 

 

 - 협업에 좋음

위에서 살짝 언급했는데 일단 여러 명이서 UI 작업을 하는데 svg 아이콘을 사용해야 된다? 저렇게 많은 svg 중에 내가 사용해야 될 icon 찾기 겁나 귀찮습니다. 그래서 그냥 있는지 확인도 안 하고 또 넣어버려요. 중복 icon 무조건 생깁니다.

 

그런데 이렇게 사용할 아이콘 설정해 두면 Class안에서 꺼내서 쓰기 때문에 미리 사용할 아이콘들을 적용해 둘 수 있고 중복 아이콘이 있는지 확인도 매우 쉽습니다. 

 

 

config 파일 넣고 Names 눌러서 확인하면 한눈에 다 보이죠? 

 - 성능상 좋음

어디서 본거긴 한데 성능에 좋다고 합니다. 딱 봐도 좋아 보여요. 프로젝트 크기도 줄어들 거고..

 

 

 

 

10. 단점

 

 - 번거롭다

svg파일 때려 박는 거보단 번거로워요. 

 

 - 처음 보면 당황스럽다

저도 처음 보고 어떻게 사용하는 거야?... 당황했습니다.

 

 

협업을 하신다면 처음 볼 동료 개발자들을 위해 readme 하나정도 넣어두는 게 어떨까요?

 

 

 

 

봐주셔서 감사합니다.