- 모든 이름은 소문자 카멜 케이스를 준수한다.
- 각각의 네이밍 컴포넌트(아래 참조)는 **언더바(_)**로 연결한다.
- 통용된 단어만 축약을 허용한다. (FAQ 등)
- 정해진 축약외에는 축약을 허용하지 않는다.
- 에셋 네임은 고유해야 한다.
-
asset type : icon의 경우 icon, logo의 경우 logo, 배경의 경우 bg, 이미지의 경우 img로 정의한다.
-
namespace : 아이콘이 사용되는 위치를 기입한다.
- 공통(두개 이상의 화면에서)으로 사용되는 아이콘의 경우에는 namespace를 생략한다.
-
asset name : 아이콘을 가장 잘 설명할 수 있는 메타포를 기입한다.
- 🔍는 돋보기 이므로 search가 아닌 magnifier를 사용한다.
- 가장 헷갈릴 수 있는 몇가지 메타포 예시
- ">", < : AngleBracket
- ←, → : Arrow
-
qulifier : 하단 이미지 참고
-
direction : 방향을 나타낼 수 있다면 기입한다. (left, right, up, down 등)
-
shape : 형태를 표현해야 하는 경우 사용합니다. (circle, rectangle 등)
-
outline : 아웃라인 존재 여부, 아웃라인이 존재한다면 outline을 명시한다.
-
status : 선택, 비선택 등 아이콘이 특별한 경우에 사용된다면 기입한다.
- normal, selected, focused 등 문법을 준수하여 기입한다.
-
color : 프로젝트에서 사용하는 컬러 명시를 명시한다.(green900)
-
size : 아이콘의 사이즈 명시한다.
- 28*28처럼 width, height이 동일한 경우에는 28만 명시한다.
- 28*40처럼 사이즈가 다른 경우 28x40으로 사이즈 전체를 명시한다.
예시)
icon_tabbar_magnifier_left_selected_green900_28
icon_tabbar_person_selected_green900_28
icon_tabbar_pencil_deselected_gray200_28
icon_crossX_circle_filled_black_24
icon_threeDots_horizon_black_24
참조 :