아이콘 및 픽토그램 시스템
1) 제품에서 아이콘의 역할
아이콘은 의미와 상태의 컴팩트 한 캐리어입니다. 스캔 속도를 높이고 공간을 절약하며 패턴 인식을 높입니다. 제품 인터페이스에서 아이콘은 텍스트와 색상을 대체하지 않고 보완합니다.
원칙:1. 의미> 스타일: 각 아이콘에는 명확한 응용 프로그램 시나리오가 있어야
2. 일관성: 단일 그리드, 스트로크, 각도, 채우기 리듬.
3. 가용성: 아이콘이 유일한 신호는 아닙니다. 항상 서명/툴팁/아리아가 있습니다.
4. 성능: 하나의 SVG 파이프 라인, 스프라이트 및 색상/크기 토큰.
2) 그리드 및 키 라인
기본 아트 보드: 16 × 16, 20 × 20, 24 × 24 (주), 32 × 32.
키라인 -A 원/사각형은 광학 균형을 위해 1-2 px로 새겨 져 있습니다.
픽셀 피치: 정수 좌표를 그립니다. 스트로크는 0의 배수입니다. 5 px (보통 1. 24 × 24에서 5 px).
- 대각선 "두껍게" 더 얇아 보입니다-0을 추가하십시오. 문제 지점에서 뇌졸중까지 25 px.
- 우리는 "딸랑이" 하지 않도록 키라인 내부의 날카로운 모서리 상단을 1 px 조금 가라 앉힙니다.
- 서클과 점은 종종 동일한 시각적 질량을 위해 직경이 + 1 px이어야합니다.
영역을 클릭하십시오: 대화 형 영역 보조 40 × 40 px (모바일), 확장 32 × 32 px (데스크탑); 아이콘이 중앙에 있습니다.
3) 타이핑 스타일
기본 개요:- 스트로크: 1. 5 px (24 × 24), 1. 25 px (20 × 20), 1 px (16 × 16).
- linecap/linejoin: 친근감을위한 '라운드' 또는 기술 스타일을위한 '마이터' (가이드 라인에 고정).
- 형상의 반경 각도: 2-3 px (24 × 24).
밀집된 영역 및 상태 아이콘.
Duotone은 예시적인 빈 상태로 허용되지만 중요한 UI 신호에는 허용되지 않습니다.
- 개요-기본 상태.
- 채워짐-자산/할당.
- 투톤-장식용/도움말.
4) 색상과 대비 (WCAG)
기본 모드는 'currentColor' 를 통한 흑백입니다. 아이콘은 텍스트/컨텍스트의 색상을 상속합니다.
중요한 상태 (오류/성공/경고) -의미 토큰:- '아이콘. (PHP 3 = 3.0.3, PHP 4)
- '아이콘. 표면상의 '배경 3:1; 작은 크기의 경우 4를 목표로합니다. 5:1.
- 색상 다이에서는 '온' 색상을 사용하십시오 (색상 시스템과의 자동 대비).
5) 상태와 상호 작용
기본/호버/활성/장애인/초점: 차이점은 색상뿐만 아니라 불투명도/채우기/두께/배경 알약을 변경하고 초점 링을 추가합니다.
배지-Digit 콘트라스트는 4 이상입니다. 주사위에 5:1; 숫자 크기는 10-11 px 이상입니다.
아이콘 토글 (예: 즐겨 찾기): 색상뿐만 아니라 필 및/또는 내부 지점을 변경하십시오.
6) 아이콘 + 텍스트
아이콘은 주요 동작의 레이블을 대체하지 않습니다. 최소 쌍: 아이콘 + 짧은 텍스트 (또는 '아리아 레이블' 별 툴팁). 목록과 표에서 아이콘은 텍스트의 캡 높이 및 기준선과 정렬됩니다.
7) 가용성 (A11y)
장식용 아이콘: 'role = "img" aria-hidden = "참"' 또는 스트림에서 접근성을 제거하십시오.
의미 론의 경우: '<svg 역할 = "img" aria-labeledby = "id">' + '<timite id = "id"> 설명 </제목>' 또는 'aria-label'.
아이콘이 상태의 유일한 반송파가되어서는 안됩니다: 텍스트/힌트/상징적 패턴 (형태, 스트로크) 추가.
텍스트 크기 및 시그니처 대비는 WCAG (일반 이하 4) 에 해당합니다. 5:1).
8) SVG 파이프 라인 및 성능
SVG: 벡터 선명도, CSS를 통한 스타일링, 최적화 된 가벼운 무게.
권장 사항:- Figma에 마스터 파일을 저장하고 옵션을 사용하여 SVG로 내보냅니다. 기본적으로 '채우기' 없이 'viewBox' 속성으로 고정 된 '너비/높이' (CSS 무시) 없이 추가 '그룹' 없이.
- SVGO (프로젝트 프로필) 를 통해 실행: 메타 데이터 삭제, 좌표 축소, 경로 병합.
- 아이콘 글꼴 폐기-접근성 및 렌더링 문제.
1. SVG 스프라이트:
html
<svg style="display:none">
<symbol id="icon-upload" viewBox="0 0 24 24">…</symbol>
</svg>
…
<svg class="i"><use href="#icon-upload"></use></svg>저렴한 반복-일부 파이프 라인에서는 '스트로크 폭' 을 쉽게 변경할 수 없습니다.
2. 인라인 SVG (반응 구성 요소): 스타일과 소품의 유연성, 트리 쉐이킹.
3. 외부 '<img>' - 장식/예시만을 위해.
css
.i { width: 1em; height: 1em; color: var(--icon-color, currentColor); }
.i--muted { opacity:.64; }
.i--danger { color: var(--role-danger); }9) 구성 요소 API (반응 예)
tsx type IconProps = {
name: 'upload' 'download' 'wallet' 'trophy' 'shield' string;
size?: number '1em' 'sm' 'md' 'lg';
stroke?: number; // 1 1. 25 1. 5 title?: string; // для a11y decorative?: boolean; // если true -> aria-hidden className?: string;
};- 기본적으로 'size = "1em"' 및 'stroke = 1입니다. 5`.
- '장식' 인 경우 'aria-hidden =' 참 '을 추가하십시오.