쓰는 규칙FOX · Icon
아이콘
아이콘은 24px 격자 위에 2px 굵기 선으로, 끝과 꺾임을 각지게 그려요. 색은 둘러싼 글자색을 따라가요.
그리는 규칙
Nemo 아이콘은 모두 같은 규칙으로 그려서 어느 것을 가져다 놓아도 한 식구로 보여요.
격자
24 x 24px 안에서 그려요. 가장자리 2px은 비워 둬요.
선 굵기
2px 한 가지예요. 면을 칠하지 않아요.
끝과 꺾임
strokeLinecap은 square, 꺾임은 각지게 해요. 둥글리지 않아요.
색
currentColor만 써요. 아이콘이 따로 색을 갖지 않아요.
크기
16, 20, 24px 세 가지예요. 같은 줄 글자 크기에 맞춰요.
누르는 영역
누를 수 있는 아이콘은 그림이 작아도 44px 이상으로 잡아요.
아이콘 12개
자주 쓰는 기본 아이콘이에요. 각각 인라인 SVG라서 그대로 복사해 쓸 수 있어요.
ICON SET
화살표
닫기
체크
더하기
빼기
검색
메뉴
꺾쇠
안내
경고
바깥 링크
복사
<svg viewBox="0 0 24 24" width="24" height="24" fill="none"
stroke="currentColor" strokeWidth="2" strokeLinecap="square">
<path d="M5 12h14M13 6l6 6-6 6" />
</svg>크기
16px은 글자 줄 안, 20px은 버튼 안, 24px은 단독으로 쓸 때예요.
SIZES
16px
20px
24px
<Svg size={16} /> <Svg size={20} /> <Svg size={24} />누르는 영역
그림이 작아도 누르는 영역은 44px을 지켜요. 아이콘 버튼은 이미 그렇게 만들어졌어요.
TOUCH TARGET
<IconButton label="닫기"><CloseIcon /></IconButton>이렇게 써요
이렇게선으로 그린 아이콘에 이름을 붙여요. 색은 주변 글자색을 따라요.
이렇게 말고키보드 이모지를 아이콘 대신 쓰지 않아요. 기기마다 모양이 달라 화면이 어긋나요.